How to deploy a reactJS application to Heroku

user_5586807 0
Viewed 2911

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 jonathn6@icloud.com
2018-09-06T13:37:57.785389+00:00 app[api]: Enable Logplex by user jonathn6@icloud.com
2018-09-06T13:37:57.785389+00:00 app[api]: Release v2 created by user jonathn6@icloud.com
2018-09-06T13:38:40.000000+00:00 app[api]: Build started by user jonathn6@icloud.com
2018-09-06T13:37:57.697321+00:00 app[api]: Initial release by user jonathn6@icloud.com
2018-09-06T13:39:05.206635+00:00 app[api]: Scaled to web@1:Free by user jonathn6@icloud.com
2018-09-06T13:39:05.188008+00:00 app[api]: Release v3 created by user jonathn6@icloud.com
2018-09-06T13:39:05.188008+00:00 app[api]: Deploy 257b0e8b by user jonathn6@icloud.com
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]: > sample-app@1.0.0 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! sample-app@1.0.0 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 sample-app@1.0.0 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?

reactjs heroku deployment
2 Answers

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.

user_59093500

I googled your issue Error: spawn EACCES and found that others have reported something similar when working with Heroku.

Try adding a postinstall to your scripts to see if that helps.

"name": "sample-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "start": "webpack-dev-server --open",
  "postinstall": "chmod -R +x node_modules/next/dist/bin/next-* && npm run build",
}

If that doesn't work, you can check out the original thread here to see if any other solution works for you.

user_17850660
Related