6

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?

Improve this question

2 Answers 2

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you so much! Made you changes, deployed and ran. Thank you very much!
No worries, glad to help
After having the same issue I tried this and this works but now i am getting this error /%PUBLIC_URL%/manifest.json 404 (Not Found) Any Ideas?
0

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.

Improve this answer

3 Comments

Now I get the following error. Ill check the original thread > [email protected] postinstall /tmp/build_4ea172a4adb229abc4dd3ce0a25b633a remote:> chmod -R +x node_modules/next/dist/bin/next-* && npm run build remote: remote: chmod: cannot access 'node_modules/next/dist/bin/next-*': No such file or directory remote: npm ERR! code ELIFECYCLE remote: npm ERR! [email protected] postinstall: chmod -R +x node_modules/next/dist/bin/next-* && npm run build remote: npm ERR! Failed at the [email protected] postinstall script.
Oh ok. The error is probably because the postinstall script is referring to a node_modules/next folder, which you are probably not using in your project. Try replacing that path to something relevant that might be causing this issue for you.
do I need to point to a specific file or just any folder in my project? Seems like a lot to go through just to deploy an application

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.