React App runs locally but crashes with error code=H10 on Heroku

Question

I am trying to host my react app on heroku. It runs locally without any error, but on heroku the app crashes. Here's my package.json :

{
  "name": "steptracker-admin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@wojtekmaj/react-daterange-picker": "^2.5.0",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Node version : 12.16.1 npm version : 6.13.4

I get the following error when I check heroku logs :

2020-03-25T10:12:12.437479+00:00 app[web.1]: > [email protected] start /app
2020-03-25T10:12:12.437480+00:00 app[web.1]: > react-scripts start
2020-03-25T10:12:12.437480+00:00 app[web.1]:
2020-03-25T10:12:15.473839+00:00 heroku[web.1]: State changed from starting to up
2020-03-25T10:12:15.444327+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.165.2/
2020-03-25T10:12:15.444903+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-25T10:12:15.445032+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-25T10:12:15.445120+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-25T10:12:15.445390+00:00 app[web.1]: Starting the development server...
2020-03-25T10:12:15.445391+00:00 app[web.1]:
2020-03-25T10:12:15.642416+00:00 heroku[web.1]: State changed from up to crashed
2020-03-25T10:12:15.626641+00:00 heroku[web.1]: Process exited with status 0
2020-03-25T10:15:28.913535+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=steptrack-admin.herokuapp.com request_id=9ca7fdff-2d75-48fc-bb91-edd54ca49c1b fwd="223.233.97.23" dyno= connect= service= status=503 bytes= protocol=https
2020-03-25T10:15:29.456687+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=steptrack-admin.herokuapp.com request_id=906e140e-dd4f-4caa-a9bd-c732cc64d4bd fwd="223.233.97.23" dyno= connect= service= status=503 bytes= protocol=https

Answer 1

There's something wrong with the new CRA start script. Use serve instead:

npm install --save serve

Change start to use serve in package.json

start: "serve -s build"

Answer 2

I was able to fix this issue on my react app using Windows 10 by performing the following steps. First make sure you include Express in your project. From your project root:

npm install express --save

Then create a server.js file in your project's root folder and add the following to it:

const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 5000;

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

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(PORT);

Next create a Procfile (no extension) file in your project's root folder. Make sure you name it Procfile with a capital "P". Heroku looks for the exact filename and if it doesn't find it, it will not include it in the build. In Procfile add:

web: node server.js

Again, make sure it is typed exactly like this. If there are any extra spaces it will crash the app and return error H10 again. That should be all you need. Commit the changes to Heroku and heroku restart for good measure before heroku open

Hope that helps anyone else still having this problem.