Web process failed to bind to $PORT

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?

score 0 · Answer 1 · answered Jun 04 '18 at 10:17

0

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)

answered Jun 04 '18 at 10:17

DHIRAJ KATEKAR

208
1
8

Where would I set the port for a CRA bootstrapped project? – Siya Mzam Jun 04 '18 at 10:20
@brandNew: you are using defualt serve command to host the app which you should not do on heruko "web: npm i -g serve && npm run build && serve -s build" Build your app and the host it using simple node js express app, you can check the "Deployment" section in following URL : https://www.npmjs.com/package/cra-liam, I hope it helps, I have not personally worked on it, but I am providing you the solution based on the approach you have followed – DHIRAJ KATEKAR Jun 04 '18 at 10:50
It may sound confusing, I just saw your screenshot carefully and i found that you are using "serve" module, which is not creating server as expected, as mentioned in my answer your code should contain .listen(process.env.PORT || 3000) which is missing in serve module for successfully hosting app on heroku. I also faced same error for port binding but the context was different. I would suggest you to create simple express app to host your application instead of serve. – DHIRAJ KATEKAR Jun 04 '18 at 11:09

Web process failed to bind to $PORT

1 Answers1