How to deploy a reactJS application to Heroku

Question

I am trying to deploy a reactJS application to heroku. I am developing on my local machine. I have the following in my package.json file:

"name": "sample-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "start": "webpack-dev-server --open"
}

When testing on my local machine, I type in "npm start" from a command prompt and my browser opens to localhost:8080 and my application starts up.

When I deployed the application to the heroku service and tried to start the application, I get an application error. I then looked at the logs and I see this:

2018-09-06T13:37:57.697321+00:00 app[api]: Release v1 created by user [email protected]
2018-09-06T13:37:57.785389+00:00 app[api]: Enable Logplex by user [email protected]
2018-09-06T13:37:57.785389+00:00 app[api]: Release v2 created by user [email protected]
2018-09-06T13:38:40.000000+00:00 app[api]: Build started by user [email protected]
2018-09-06T13:37:57.697321+00:00 app[api]: Initial release by user [email protected]
2018-09-06T13:39:05.206635+00:00 app[api]: Scaled to web@1:Free by user [email protected]
2018-09-06T13:39:05.188008+00:00 app[api]: Release v3 created by user [email protected]
2018-09-06T13:39:05.188008+00:00 app[api]: Deploy 257b0e8b by user [email protected]
2018-09-06T13:39:08.000000+00:00 app[api]: Build succeeded
2018-09-06T13:39:10.243037+00:00 heroku[web.1]: Starting process with command `npm start`
2018-09-06T13:39:12.459230+00:00 app[web.1]:
2018-09-06T13:39:12.459251+00:00 app[web.1]: > [email protected] start /app
2018-09-06T13:39:12.459255+00:00 app[web.1]:
2018-09-06T13:39:12.459253+00:00 app[web.1]: > webpack-dev-server --open
2018-09-06T13:39:13.990393+00:00 app[web.1]: Project is running at http://localhost:8080/
2018-09-06T13:39:13.990876+00:00 app[web.1]: webpack output is served from /
2018-09-06T13:39:13.990913+00:00 app[web.1]: Content not from webpack is served from /app/public
2018-09-06T13:39:13.990975+00:00 app[web.1]: 404s will fallback to /index.html
2018-09-06T13:39:13.999552+00:00 app[web.1]: internal/child_process.js:323
2018-09-06T13:39:13.999556+00:00 app[web.1]: throw errnoException(err, 'spawn');
2018-09-06T13:39:13.999557+00:00 app[web.1]: ^
2018-09-06T13:39:13.999559+00:00 app[web.1]:
2018-09-06T13:39:13.999560+00:00 app[web.1]: Error: spawn EACCES
2018-09-06T13:39:13.999562+00:00 app[web.1]: at _errnoException (util.js:992:11)
2018-09-06T13:39:13.999564+00:00 app[web.1]: at ChildProcess.spawn (internal/child_process.js:323:11)
2018-09-06T13:39:13.999565+00:00 app[web.1]: at Object.exports.spawn (child_process.js:502:9)
2018-09-06T13:39:13.999567+00:00 app[web.1]: at module.exports (/app/node_modules/opn/index.js:76:26)
2018-09-06T13:39:13.999569+00:00 app[web.1]: at reportReadiness (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:474:5)
2018-09-06T13:39:13.999571+00:00 app[web.1]: at Server.server.listen (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:439:7)
2018-09-06T13:39:13.999572+00:00 app[web.1]: at Server.returnValue.listeningApp.listen (/app/node_modules/webpack-dev-server/lib/Server.js:615:10)
2018-09-06T13:39:13.999575+00:00 app[web.1]: at emitNone (events.js:106:13)
2018-09-06T13:39:13.999573+00:00 app[web.1]: at Object.onceWrapper (events.js:313:30)
2018-09-06T13:39:13.999576+00:00 app[web.1]: at Server.emit (events.js:208:7)
2018-09-06T13:39:14.008212+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-09-06T13:39:14.008589+00:00 app[web.1]: npm ERR! errno 1
2018-09-06T13:39:14.009730+00:00 app[web.1]: npm ERR! [email protected] start: `webpack-dev-server --open`
2018-09-06T13:39:14.009893+00:00 app[web.1]: npm ERR! Exit status 1
2018-09-06T13:39:14.010124+00:00 app[web.1]: npm ERR!
2018-09-06T13:39:14.010297+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2018-09-06T13:39:14.010464+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-09-06T13:39:14.050770+00:00 app[web.1]:
2018-09-06T13:39:14.051004+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-09-06T13:39:14.051156+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-09-06T13_39_14_011Z-debug.log
2018-09-06T13:39:14.139768+00:00 heroku[web.1]: State changed from starting to crashed

I'm pretty sure I need to change the "start" script to something else but I dont know what I need to change it to. I think.

Any ideas?

Answer 1

You really shouldn't be using dev-server to try and run your app in production. I would roll a simple Express server and use that to deploy your app. You can get this set up very quickly:

npm i -s express

Then create your server.js file in the top level of your app's structure.

Put this code into the server.js file:

const express = require('express')
const app = express()
const path = require('path')
const port = process.env.PORT || 3001

app.use('/', express.static(path.join(__dirname, 'public')))

app.listen(port, () => console.log("Listening on Port", port)) 

Essentially this just sets up your server and then shows it where to find the index.html page that you're using to load your react app in order to send it to the browser. If your webpack setup outputs the index.html file to a folder other than 'public', just put the name of that folder in where I've put 'public' after '__dirname'.

Now you just need to build your app.

If you're using webpack it's as simple as setting up a "build" script in your package.json:

"build": "webpack -p"

Then make sure Heroku knows how to use your build with another script:

"heroku-postbuild": "npm run build"

Finally set your "start" script to run your server (Heroku uses the name start by default for this):

"start": node server.js

So your package.json scripts should look like this:

"scripts": {
    "dev-server": "webpack-dev-server --open"
    "start": "node server.js",
    "build": "webpack -p",
    "heroku-postbuild": "npm run build"
}

Now if you push to Heroku it should run without any issues.