React app working well locally but fails after deployment on Heroku

Question

I'm deploying my react website on Heroku. It's running fine locally and on running the command 'heroku local web'. The website is getting deployed successfully but getting Application Error.

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

On running heroku logs -tail , my log file looks something like this:

2020-04-20T09:47:52.000000+00:00 app[api]: Build succeeded
2020-04-20T09:47:55.522526+00:00 app[web.1]: ℹ ｢wds｣: Project is running at https://{some-ip-address}
2020-04-20T09:47:55.523069+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from /{filename path}
2020-04-20T09:47:55.523174+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-04-20T09:47:55.523277+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /{filename path}
2020-04-20T09:47:55.523531+00:00 app[web.1]: Starting the development server...
2020-04-20T09:47:55.523534+00:00 app[web.1]: 
2020-04-20T09:47:55.631808+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-20T09:48:17.332436+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host={hostname}.herokuapp.com request_id={some_request_id} fwd={ip address} dyno= connect= service= status=503 bytes= protocol=https

What could be causing possible reason of failure? How can I resolve it?

Answer 1

You're trying to run a development server on Heroku as indicated by:

Starting the development server...

What is your npm start task? Do you have a npm run build script? I would bet your start script starts webpack in watch mode?

Instead, try something like this for your package.json:

{
  //...
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch",
    "start": "node server.js"
  }
}

This assumes you're using a node server, you will need to replace the start command with whatever server you're using or use the Heroku static buildpack.

If Heroku sees a build script, it will run this when deploying your app.

Option 2

Make sure you have a Procfile set if you server is not being started with "npm start":

web: npm run server