React 应用程序在 Heroku 上顺利部署，但应用程序未运行

Question

My app which is created in React is running locally with no error but when I deployed the app on Heroku and tried to run it, it comes with error as below, I tried to fix the error and found some solutions on google like changing the Start script in package.json to "node index.js" or "server index.js", the other solution was to make sure that my local npm and node version is same as the app, I tried everything but still can't run the app on Heroku, please check the error log from Heroku

 2020-08-20T06:22:22.716838+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T06:22:30.000000+00:00 app[api]: Build succeeded
2020-08-20T06:22:32.697272+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T06:22:35.362552+00:00 app[web.1]: 
2020-08-20T06:22:35.362575+00:00 app[web.1]: > covid-19@0.1.0 start /app
2020-08-20T06:22:35.362576+00:00 app[web.1]: > react-scripts start
2020-08-20T06:22:35.362576+00:00 app[web.1]: 
2020-08-20T06:22:37.859674+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Project is running at http://172.16.212.234/
2020-08-20T06:22:37.860044+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: webpack output is served from 
2020-08-20T06:22:37.860151+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Content not from webpack is served from /app/public
2020-08-20T06:22:37.860224+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /
2020-08-20T06:22:37.860432+00:00 app[web.1]: Starting the development server...
2020-08-20T06:22:37.860434+00:00 app[web.1]: 
2020-08-20T06:22:37.946386+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T06:22:37.985574+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T06:31:36.225969+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=covid-19-picker.herokuapp.com request_id=224c59d7-298b-4fe9-8eef-bce69767b694 fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T06:31:37.621408+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=covid-19-picker.herokuapp.com request_id=7b031e14-2a8c-4243-b69c-61cb46bd4b7e fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https 

This is my package.json

  "name": "covid-19",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "6.14.5",
    "node": "14.5.0"
  },
  "dependencies": {
    "@material-ui/core": "^4.9.10",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "dev": "react-scripts start",
    "start": "react-scripts start",
   
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    
    "heroku-postbuild": "npm run build"
  },
  "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"
    ]
  }
}  

Answer 1

This error may occur when the deploying environment (here Heroku) is not be able to find out the correct path of your App module.

Try to focus on these last two lines of your code and ensure you selected the right path here:

2020-08-20T06:31:36.225969+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=covid-19-picker.herokuapp.com request_id=224c59d7-298b-4fe9-8eef-bce69767b694 fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https

2020-08-20T06:31:37.621408+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=covid-19-picker.herokuapp.com request_id=7b031e14-2a8c-4243-b69c-61cb46bd4b7e fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https

Answer 2

I used this solution and my app is running on heroku now.

You have to build react app before deploying to heroku.

There is a tool to automate this process

create-react-app-buildpack

The steps required are following

heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "Start with create-react-app"
git push heroku master
heroku open