Slow build time makes Heroku deployment to fail

[ranyefet]

Hi Jared,

I just tried to deploy an app I've been working on for the last month to Heroku.
After deploying I got the following errors:

2016-06-08T15:20:14.906386+00:00 app[web.1]: > npm run clean && npm run build && cross-env NODE_ENV=production node ./build/server
2016-06-08T15:20:14.906349+00:00 app[web.1]: 
2016-06-08T15:20:16.312074+00:00 app[web.1]: > rm -rf build
2016-06-08T15:20:16.312075+00:00 app[web.1]: 
2016-06-08T15:20:17.182897+00:00 app[web.1]: > react-production-starter@0.1.0 build /app
2016-06-08T15:20:17.182898+00:00 app[web.1]: > webpack -p --config ./webpack.config.prod.js && webpack -p --config ./webpack.server.config.prod.js
2016-06-08T15:20:17.182899+00:00 app[web.1]: 
2016-06-08T15:21:12.058454+00:00 heroku[web.1]: Stopping process with SIGKILL
2016-06-08T15:21:12.058454+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2016-06-08T15:21:13.159176+00:00 heroku[web.1]: Process exited with status 137
2016-06-08T15:21:13.174340+00:00 heroku[web.1]: State changed from starting to crashed

It looks like the build script takes more then 60 seconds which make Heroku think it failed.
I guess that I could run the build locally and commit the files and skip building altogether but I wonder if there's a better way?

Any suggestions?

Thanks!

[jaredpalmer]

what does your package.json look like?

[kkarkos]

maybe there are dependencies which are not required on the build and could be handled as 'devdependencies'. This might speed up the build.

[ranyefet]

I have the same package.json as in this repository with a few additional modules

{
  "name": "react-production-starter",
  "version": "0.1.0",
  "description": "Isomorphic React Starter with Redux, React Router, Redial, Aphrodite, Express, Webpack.",
  "scripts": {
    "test": "npm run clean && npm run build && cross-env NODE_ENV=test ./node_modules/mocha/bin/mocha --compilers js:babel-core/register --recursive",
    "test:watch": "npm test -- --watch",
    "start": "cross-env NODE_ENV=development node ./src/server",
    "start:prod": "npm run clean && npm run build && cross-env NODE_ENV=production node ./build/server",
    "build": "webpack -p --config ./webpack.config.prod.js && webpack -p --config ./webpack.server.config.prod.js",
    "clean": "rm -rf build"
  },
  "main": "./build/server",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jaredpalmer/react-production-starter.git"
  },
  "keywords": [],
  "author": "jaredpalmer",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/jaredpalmer/react-production-starter/issues"
  },
  "engines": {
    "node": "5.5.0"
  },
  "homepage": "https://github.com/jaredpalmer/react-production-starter#readme",
  "dependencies": {
    "aphrodite": "^0.3.1",
    "assets-webpack-plugin": "^3.3.0",
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-react-constant-elements": "^6.5.0",
    "babel-plugin-transform-react-inline-elements": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.6.5",
    "babel-runtime": "^6.5.0",
    "body-parser": "^1.14.2",
    "chai": "^3.5.0",
    "chai-http": "^2.0.1",
    "compression": "^1.6.2",
    "cookie-parser": "^1.4.1",
    "cross-env": "1.0.7",
    "es6-promise": "^3.2.1",
    "express": "^4.13.4",
    "helmet": "^2.0.0",
    "history": "^2.1.1",
    "hpp": "^0.2.0",
    "humps": "^1.1.0",
    "is-empty-object": "^1.1.1",
    "isomorphic-fetch": "^2.2.1",
    "isparta": "^4.0.0",
    "json-loader": "^0.5.4",
    "lodash": "^3.10.1",
    "mocha": "^2.4.5",
    "morgan": "^1.6.1",
    "normalizr": "^2.1.0",
    "query-string": "^4.1.0",
    "react": "^15.0.2",
    "react-autocomplete": "^1.0.0-rc5",
    "react-dom": "^15.0.2",
    "react-helmet": "^3.1.0",
    "react-linkify": "^0.1.1",
    "react-redux": "^4.4.0",
    "react-router": "^2.4.1",
    "react-router-redux": "^4.0.4",
    "react-simple-dropdown": "^1.1.0",
    "redial": "^0.4.1",
    "redux": "^3.3.1",
    "redux-infinite-scroll": "^1.0.9",
    "redux-logger": "^2.6.1",
    "redux-mock-store": "^1.0.2",
    "redux-thunk": "^2.1.0",
    "relative-date": "^1.1.3",
    "source-map-support": "^0.4.0",
    "webpack": "^1.12.13",
    "webpack-dev-middleware": "^1.5.1",
    "webpack-hot-middleware": "^2.7.1"
  },
  "devDependencies": {
    "babel-eslint": "^6.0.4",
    "eslint": "^2.10.0",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.0",
    "eslint-plugin-jsx-a11y": "^1.2.0",
    "eslint-plugin-react": "^5.1.1"
  }
}

Thanks for the help

[jaredpalmer]

Were you able to solve this?

[jaredpalmer]

Closing this issue. The new version should fix any deployment problems.

[ranyefet]

I wasn't able to resolve the issue yet.
Thanks for the fix! Where can I see the changes?

[ranyefet]

@jaredpalmer I've fixed my issue by generating the "build" locally before deployment, and commit it to git.
Is there a better solution?

[Khodeir]

You could run the "build" step concurrently with "start" rather than before it. That way you bind to the $PORT before your assets are completely built.

You have to be okay with the possibility of someone visiting your app in the minute or so before the assets are ready.

[jaredpalmer]

Other solutions:

• Configure your CI to output build artifact and then use rsync to copy it into your server.
• I recall react-starter-kit used to have a deploy command that would build locally, copy everything to a new empty git repo and push that to heroku.

[Aadmaa]

I get the same R10 error deploying the boilerplate with no changes at all to Heroku. The app runs locally without a problem, and "git push heroku master" works fine. Only when you go to run the app with "heroku open" do you get the problem, where the app crashes in the browser. The app log in Heroku reports the R10 error, "Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch".

There is a discussion of a similar issue here: http://stackoverflow.com/questions/15693192/heroku-node-js-error-web-process-failed-to-bind-to-port-within-60-seconds-of

[Treeeater]

@ranyefet This is a rather old issue, but I just want to add a point in addition to the other solutions suggested here. I ran into this problem lately and weren't able to solve things by specifying listening port to process.env.PORT like most people suggested, or removing packages from build dependencies (I do need all the packages!)

So in the end I figured out by adding the npm run build, or webpack -p, whatever you are using to build the project, into the post-install scripts inside package.json.

for example, this can be your package.json's script field:

"scripts": {
    "start": "babel-node server.js",
    "postinstall": "npm run build",
}

By doing this heroku will attempt to build the project after you have pushed the code to heroku server, but before it enforces the 60 seconds timeout.

You do not need to build things locally, add them to git repo, and push.

[ranyefet]

@Treeeater Thanks for the comment, I actually did the same thing in my project eventually, forgot to update this issue :) Definitely better approach than building locally.

[faceyspacey]

But then your app is accessible with nothing to show. What's the best practice to handle that?

The solution really can't be to use a CI server (or put builds in git). Heroku really should have a build step that can handle long webpack compilations, as everyone is doing that these days.

[ctrlplusb]

I've also struggled with this. My new strategy is to actually prebuild and publish my packages to a private npm repository, and then install/exec those within my target envs. Avoids committing to github and get the added benefit of having quick to target versions.

[faceyspacey]

@ctrlplusb sweet, i actually just found this:

"heroku-postbuild": "npm run build"

https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process

worked like a charm.