Web process failed to bind to $PORT - reactjs

Question

I have a react project bootstrapped using the CRA Cli. I have travis for CI and deploying on Heroku. The project has been running for about a month now. The last build was about 25 days ago and it passed. Today, when I visit this app, it is breaking. When I rebuild and re-deploy, the rebuild works, deployment too to some extent and the error
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
Since the last push 25 days ago, I have merged anything into master, so I am quite certain that there is no code that got to source control and messed things up.
This is my package.json (just the relevant parts)
"dependencies": {
"axios": "^0.18.0",
"leaflet": "^1.3.1",
"lodash": "^4.17.5",
"npm-run-all": "^4.1.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-leaflet": "^1.9.0",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tabs": "^2.2.1",
"react-tabs-redux": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"socket.io-client": "^2.1.0",
"thunk": "0.0.1"
},
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm-run-all build-css build-js",
"start-js": "react-scripts start",
"build-js": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"test-ci": "CI=true react-scripts test --env=jsdom --ci",
"eject": "react-scripts eject",
"build-css": "node-sass-chokidar src/ -o src/ --quiet",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"lint": "./node_modules/.bin/eslint src/**/*.js",
"prettier": "prettier --write --tab-width=2 --single-quote=true \"src/**/*.{js,scss}\""
},
And this is my index.js (relevant parts only)
if (process.env.NODE_ENV === 'development') {
middleware = [logger];
}
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(thunk, ...middleware))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
And the Procfile
web: npm i -g serve && npm run build && serve -s build
And this is the last build status
Then the logs from Heroku
From the logs, it says
INFO: Accepting connections at http://localhost:3000
Questions
What am I doing wrong here?
How come that connections are accepted at localhost but I am running a production bundle?
How do I fix it?

Answer 1

Please check your create server code you must have missed process.env.PORT
Heroku assigns a port dynamically which it pulls from env variable. Your code should be like this :
.listen(process.env.PORT || 3000)