heroku local web works fine but deployment doesn't work properly

Question

App is consist of Node.js and React. There is no database. Heroku local web works fine but deployment doesn't work properly. Deployment just has index.html. In short words, node and react doesn't work properly on deployment.

backend package.json

"engines": {
  "node": "15.4.0",
  "npm": "7.20.5"
},
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node app.js",
  "heroku-postbuild": "cd frontend && npm install && npm run build"
}

frontend package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"

app.js

app.use(express.static(path.join(__dirname, './frontend/build')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname+'/frontend/build/index.html'));
});
const PORT = process.env.PORT || 5000;

Procfile

web: node app.js

Everything is fine with the heroku local web code as above. But on deployment I met error like this:

error I got

Stopping all processes with SIGTERM
heroku[web.1]: Process exited with status 143

I tried some solutions in here. But I couldn't solve. I can write more information as needed. Thanks!

Answer 1

Add these to your frontend package.json scripts:

"devStart": "react-scripts start",
"start": "serve -s build",
....
"heroku-postbuild": "npm run build"