Deploying on Heroku

Node version: v5.0.0

npm version: 3.3.6

Operating system: OSX

Command line used: Terminal

Steps to reproduce: Clone repot. Run npm run setup. Deploy react sling-shot on Heroku. Using the four steps from the Heroku Getting Started Tutorial: https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app

First off, thanks for the starter kit. It’s been a massive help.

I was wondering if anyone had any experience deploying react-slingshot to Heroku. I’ve built two apps on top of it. Both of which I found had memory leaks after running $ heroku logs --tail after trying to deploy. I wasn’t sure where the memory leaks were coming from, so I started with just trying to deploy the example react-slingshot app. This also failed for what looks like a different reason.

I’m relatively new to Heroku. If anyone who has deployed on Heroku using react-slingshot could point me in the right direction, you’d be a hero. Thanks 😃

When I log the details of launching react-slingshot, I get the following output:

$ heroku logs --tail 2016-09-20T21:52:41.722414+00:00 heroku[api]: Enable Logplex by [e-mail] 2016-09-20T21:52:41.722414+00:00 heroku[api]: Release v2 created by [e-mail] 2016-09-20T21:53:21.115338+00:00 heroku[api]: Scale to web=1 by [e-mail] 2016-09-20T21:53:21.116298+00:00 heroku[api]: Deploy 884be3c by [e-mail] 2016-09-20T21:53:21.116404+00:00 heroku[api]: Release v3 created by [e-mail] 2016-09-20T21:53:21.603620+00:00 heroku[slug-compiler]: Slug compilation started 2016-09-20T21:53:21.603625+00:00 heroku[slug-compiler]: Slug compilation finished 2016-09-20T21:53:22.582516+00:00 heroku[web.1]: Starting process with command npm start2016-09-20T21:53:24.423356+00:00 app[web.1]: > example_react_app@0.1.0 prestart /app 2016-09-20T21:53:24.423342+00:00 app[web.1]: 2016-09-20T21:53:24.423357+00:00 app[web.1]: > npm-run-all --parallel start-message remove-dist 2016-09-20T21:53:24.423358+00:00 app[web.1]: 2016-09-20T21:53:24.428706+00:00 app[web.1]: sh: 1: npm-run-all: not found 2016-09-20T21:53:24.438975+00:00 app[web.1]: npm ERR! node v5.11.1 2016-09-20T21:53:24.432801+00:00 app[web.1]: 2016-09-20T21:53:24.438743+00:00 app[web.1]: npm ERR! Linux 3.13.0-95-generic 2016-09-20T21:53:24.438884+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start" 2016-09-20T21:53:24.439208+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2016-09-20T21:53:24.439045+00:00 app[web.1]: npm ERR! npm v3.10.7 2016-09-20T21:53:24.439124+00:00 app[web.1]: npm ERR! file sh 2016-09-20T21:53:24.439293+00:00 app[web.1]: npm ERR! errno ENOENT 2016-09-20T21:53:24.439364+00:00 app[web.1]: npm ERR! syscall spawn 2016-09-20T21:53:24.439433+00:00 app[web.1]: npm ERR! example_react_app@0.1.0 prestart:npm-run-all --parallel start-message remove-dist2016-09-20T21:53:24.439699+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed. 2016-09-20T21:53:24.439494+00:00 app[web.1]: npm ERR! spawn ENOENT 2016-09-20T21:53:24.439870+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system: 2016-09-20T21:53:24.439572+00:00 app[web.1]: npm ERR! 2016-09-20T21:53:24.439646+00:00 app[web.1]: npm ERR! Failed at the example_react_app@0.1.0 prestart script 'npm-run-all --parallel start-message remove-dist'. 2016-09-20T21:53:24.439760+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the example_react_app package, 2016-09-20T21:53:24.439816+00:00 app[web.1]: npm ERR! not with npm itself. 2016-09-20T21:53:24.439922+00:00 app[web.1]: npm ERR! npm-run-all --parallel start-message remove-dist 2016-09-20T21:53:24.440030+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with: 2016-09-20T21:53:24.440082+00:00 app[web.1]: npm ERR! npm bugs example_react_app 2016-09-20T21:53:24.440132+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via: 2016-09-20T21:53:24.443565+00:00 app[web.1]: 2016-09-20T21:53:24.440182+00:00 app[web.1]: npm ERR! npm owner ls example_react_app 2016-09-20T21:53:24.440233+00:00 app[web.1]: npm ERR! There is likely additional logging output above. 2016-09-20T21:53:24.443670+00:00 app[web.1]: npm ERR! Please include the following file with any support request: 2016-09-20T21:53:24.443727+00:00 app[web.1]: npm ERR! /app/npm-debug.log 2016-09-20T21:53:24.485426+00:00 heroku[web.1]: Process exited with status 1 2016-09-20T21:53:24.499145+00:00 heroku[web.1]: State changed from starting to crashed 2016-09-20T21:53:24.500363+00:00 heroku[web.1]: State changed from crashed to starting 2016-09-20T21:53:26.160823+00:00 heroku[web.1]: Starting process with commandnpm start2016-09-20T21:53:28.528762+00:00 app[web.1]: 2016-09-20T21:53:28.528778+00:00 app[web.1]: > example_react_app@0.1.0 prestart /app 2016-09-20T21:53:28.528779+00:00 app[web.1]: > npm-run-all --parallel start-message remove-dist 2016-09-20T21:53:28.528780+00:00 app[web.1]: 2016-09-20T21:53:28.535445+00:00 app[web.1]: sh: 1: npm-run-all: not found 2016-09-20T21:53:28.540004+00:00 app[web.1]: 2016-09-20T21:53:28.546468+00:00 app[web.1]: npm ERR! Linux 3.13.0-95-generic 2016-09-20T21:53:28.546625+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start" 2016-09-20T21:53:28.546748+00:00 app[web.1]: npm ERR! node v5.11.1 2016-09-20T21:53:28.546854+00:00 app[web.1]: npm ERR! npm v3.10.7 2016-09-20T21:53:28.546967+00:00 app[web.1]: npm ERR! file sh 2016-09-20T21:53:28.547075+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2016-09-20T21:53:28.547179+00:00 app[web.1]: npm ERR! errno ENOENT 2016-09-20T21:53:28.547283+00:00 app[web.1]: npm ERR! syscall spawn 2016-09-20T21:53:28.547372+00:00 app[web.1]: npm ERR! example_react_app@0.1.0 prestart:npm-run-all --parallel start-message remove-dist 2016-09-20T21:53:28.547536+00:00 app[web.1]: npm ERR! 2016-09-20T21:53:28.547445+00:00 app[web.1]: npm ERR! spawn ENOENT 2016-09-20T21:53:28.547626+00:00 app[web.1]: npm ERR! Failed at the example_react_app@0.1.0 prestart script 'npm-run-all --parallel start-message remove-dist'. 2016-09-20T21:53:28.547784+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the example_react_app package, 2016-09-20T21:53:28.547859+00:00 app[web.1]: npm ERR! not with npm itself. 2016-09-20T21:53:28.547701+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed. 2016-09-20T21:53:28.547936+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system: 2016-09-20T21:53:28.548008+00:00 app[web.1]: npm ERR! npm-run-all --parallel start-message remove-dist 2016-09-20T21:53:28.548082+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with: 2016-09-20T21:53:28.548155+00:00 app[web.1]: npm ERR! npm bugs example_react_app 2016-09-20T21:53:28.548227+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via: 2016-09-20T21:53:28.548300+00:00 app[web.1]: npm ERR! npm owner ls example_react_app 2016-09-20T21:53:28.548376+00:00 app[web.1]: npm ERR! There is likely additional logging output above. 2016-09-20T21:53:28.552172+00:00 app[web.1]: 2016-09-20T21:53:28.552332+00:00 app[web.1]: npm ERR! Please include the following file with any support request: 2016-09-20T21:53:28.552404+00:00 app[web.1]: npm ERR! /app/npm-debug.log 2016-09-20T21:53:28.639797+00:00 heroku[web.1]: State changed from starting to crashed 2016-09-20T21:53:28.624904+00:00 heroku[web.1]: Process exited with status 1

[dmurawsky]

I actually just deployed a couple days ago. The easiest way I found was to put your /dist directory inside a “/dist-server” directory and change the build configuration to build to that /dist, preserving the /dist-server. Then simply add an Express serve setup to server the files from /dist.

Here’s the folder structure:

And here’s a simple Express server: http://blog.modulus.io/nodejs-and-express-static-content

Then you’ll need to change “webpack.config.prod.js” output->path to this:

output: { path: ${__dirname}/dist-server/dist, publicPath: ‘/’, filename: ‘[name].[chunkhash].js’ },

And your build scripts in package.json to this:

“clean-dist”: “npm run remove-dist && mkdir dist-server/dist”, “remove-dist”: “rimraf ./dist-server/dist”, “prebuild”: “npm run clean-dist && npm run lint”, “build”: “babel-node tools/build.js”,

This probably isn’t enough to get it working so if you need more help, let me know and I’ll put together a quick screen cap of the process.

[kwelch]

how are you serving dist-server?

I am using express.

var express = require('express');
var path = require('path');
var compression = require('compression');

var port = process.env.port || 3000;
var app = express();

app.use(compression()); 
app.use(express.static(path.join(__dirname, 'app')));

app.get('*', (_req, res) => {
  res.sendFile(path.join(__dirname, 'app/index.html'));
});

app.listen(port, (err) => {
  if (err) {
    console.log(err);
  } else {
    console.log(`server started port: ${port}`);
  }
});