Heroku unable to start app with "npm start"

Question

After I deploy my app to heroku it will build just fine but after it runs the start script: npm start it hangs then eventually breaks. Ive tried playing around with it and nothing ive done seems to get it to actually run after deployment. Its also note worthy to mention that building the app and starting it locally works. Below is the log output from heroku logs --tails and the relevant code.

2019-08-20T16:02:56.000000+00:00 app[api]: Build succeeded
2019-08-20T16:02:58.168780+00:00 heroku[web.1]: Starting process with command `npm start`
2019-08-20T16:03:00.139605+00:00 app[web.1]:
2019-08-20T16:03:00.139625+00:00 app[web.1]: > flexer@1.0.0 start /app
2019-08-20T16:03:00.139627+00:00 app[web.1]: > export NODE_ENV=Production && node src/server.js
2019-08-20T16:03:00.139629+00:00 app[web.1]:
2019-08-20T16:03:00.468869+00:00 app[web.1]: App running at http://localhost:8080
2019-08-20T16:03:00.469522+00:00 app[web.1]: Press Ctrl + C to shut the app down
2019-08-20T16:03:58.258831+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-08-20T16:03:58.258968+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-08-20T16:03:58.352312+00:00 heroku[web.1]: State changed from starting to crashed
2019-08-20T16:03:58.356511+00:00 heroku[web.1]: State changed from crashed to starting
2019-08-20T16:03:58.332256+00:00 heroku[web.1]: Process exited with status 137
2019-08-20T16:04:01.054987+00:00 heroku[web.1]: Starting process with command `npm start`
2019-08-20T16:04:03.927374+00:00 app[web.1]:
2019-08-20T16:04:03.927394+00:00 app[web.1]: > flexer@1.0.0 start /app
2019-08-20T16:04:03.927396+00:00 app[web.1]: > export NODE_ENV=Production && node src/server.js
2019-08-20T16:04:03.927398+00:00 app[web.1]:
2019-08-20T16:04:04.265778+00:00 app[web.1]: App running at http://localhost:8080
2019-08-20T16:04:04.265819+00:00 app[web.1]: Press Ctrl + C to shut the app down
2019-08-20T16:04:26.772380+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=flexer-css.herokuapp.com request_id=df728327-bc5c-4484-b6ff-c5e66c3984e6 fwd="136.36.121.111" dyno= connect= service= status=503 bytes= protocol=https
2019-08-20T16:05:01.601305+00:00 heroku[web.1]: State changed from starting to crashed
2019-08-20T16:05:01.464089+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-08-20T16:05:01.464089+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-08-20T16:05:01.573116+00:00 heroku[web.1]: Process exited with status 137
2019-08-20T16:05:02.186635+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=flexer-css.herokuapp.com request_id=3a0c387e-a781-4d0b-9db0-208fcc3ee994 fwd="136.36.121.111" dyno= connect= service= status=503 bytes= protocol=https
2019-08-20T16:05:02.740563+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=flexer-css.herokuapp.com request_id=40e04b18-7e6d-4f41-b7fb-ffdfeb49331e fwd="136.36.121.111" dyno= connect= service= status=503 bytes= protocol=https

package.json:

{
  "name": "flexer",
  "version": "1.0.0",
  "engines": {
    "node": "10.14.2",
    "npm": "6.9.0"
  },
  "description": "Flexbox generator",
  "main": "index.js",
  "scripts": {
    "start:dev": "export NODE_ENV=Development && webpack-dev-server --open --config webpack.dev.js",
    "start": "export NODE_ENV=Production && node src/server.js",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "Dakota Ruller",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.0.0",
    "file-loader": "^4.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.19.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1",
    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4"
  }
}

server.js

const express = require('express');
const compression = require('compression');
const path = require('path');

const server = express();
const PORT = 8080 || process.env.PORT;

const DIST_DIR = path.join(__dirname, '../dist');
const HTML_FILE = path.join(DIST_DIR, 'index.html');

server.use(express.static(DIST_DIR));
server.use(compression);

server.get('/', (req, res) => {
  res.sendFile(HTML_FILE);
});

server.listen(PORT, () => {
  console.log(`App running at http://localhost:${PORT}`);
  console.log("Press Ctrl + C to shut the app down");
});

Im very new to deploying with heroku so any advice/help would be greatly appreciated.

Answer 1

Looks like as the above folks said the port binding is the issue as npm start is to start server and on dep you may not need to explicitly mention the port #

Answer 2

It looks like there is an issue with binding your application to the desired port and is instead trying to bind your application to port 8080 which you would use for local development.

2019-08-20T16:05:01.464089+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

Try changing your port logic to the following:

const PORT = process.env.PORT || 8080

Your current code always assumes the port is 8080 but this is dynamically assigned when you deploy an application on Heroku. Your current logic is reversed and with this change your application will work correctly whether you're developing locally or deploying your web application to Heroku.

The logic of this statement is as follows:

For local development the first part of your conditional: where you're dynamically assigned a port would be false so your code will fall back to port 8080. However, when deploying to Heroku this port environment variable will get dynamically assigned, on Heroku's end, so your local port will not be used.

Hopefully that helps!

Answer 3

Heroku will assign you a port to run on, you don't pick it. So the issue here is that you are trying to bind to port 8080 and Heroku isn't letting you, as indicated by line 9 of the log. Remove the 8080 || in the PORT variable, and just bind directly to the $PORT environment variable:

const PORT = process.env.PORT;