node.js - heroku failed at the build script but heroku local web is fine

Question

I followed instructions, pushed repo to heroku and I find it crashed. I use heroku/nodejs as a buildpack.

Procfile:

web: npm run build && npm run heroku-server

Scripts:

  "scripts": {
    "heroku-server": "cross-env SERVER_PROD_PORT=$PORT SERVER_PROD_HOST=0.0.0.0 npm run server",
    "browser": "cross-env NODE_ENV=development WEBPACK_CONFIG=browser_dev webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors",
    "build-analyze": "cross-env BUNDLE_ANALYZER=1 NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors",
    "build-browser": "cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod webpack --colors",
    "build-run": "npm run build && npm run server",
    "build-static": "cross-env NODE_ENV=production WEBPACK_CONFIG=static webpack --colors",
    "build-static-run": "npm run build-static && npm run static",
    "clean": "rimraf dist",
    "lint": "eslint .",
    "server": "node dist/server",

When I run scripts from Procfile or $ heroku local web everything is builing fine. But pushed repo is throwing the errors in logs:

2018-01-30T22:23:05.780537+00:00 heroku[web.1]: Starting process with command `npm run build && npm run heroku-server`
2018-01-30T22:23:07.502982+00:00 heroku[web.1]: State changed from starting to crashed
2018-01-30T22:23:07.491558+00:00 heroku[web.1]: Process exited with status 1
2018-01-30T22:23:07.292672+00:00 app[web.1]:
2018-01-30T22:23:07.292693+00:00 app[web.1]: > [email protected] build /app
2018-01-30T22:23:07.292694+00:00 app[web.1]: > cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors
2018-01-30T22:23:07.292695+00:00 app[web.1]:
2018-01-30T22:23:07.421065+00:00 app[web.1]: events.js:137
2018-01-30T22:23:07.421068+00:00 app[web.1]:       throw er; // Unhandled 'error' event
2018-01-30T22:23:07.421070+00:00 app[web.1]:       ^
2018-01-30T22:23:07.421071+00:00 app[web.1]:
2018-01-30T22:23:07.421073+00:00 app[web.1]: Error: spawn webpack ENOENT
2018-01-30T22:23:07.421074+00:00 app[web.1]:     at _errnoException (util.js:1003:13)
2018-01-30T22:23:07.421076+00:00 app[web.1]:     at Process.ChildProcess._handle.onexit (internal/child_process.js:201:19)
2018-01-30T22:23:07.421078+00:00 app[web.1]:     at onErrorNT (internal/child_process.js:389:16)
2018-01-30T22:23:07.421080+00:00 app[web.1]:     at process._tickCallback (internal/process/next_tick.js:152:19)
2018-01-30T22:23:07.421081+00:00 app[web.1]:     at Function.Module.runMain (module.js:703:11)
2018-01-30T22:23:07.421083+00:00 app[web.1]:     at startup (bootstrap_node.js:193:16)
2018-01-30T22:23:07.421085+00:00 app[web.1]:     at bootstrap_node.js:617:3
2018-01-30T22:23:07.426513+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-01-30T22:23:07.426855+00:00 app[web.1]: npm ERR! errno 1
2018-01-30T22:23:07.428042+00:00 app[web.1]: npm ERR! [email protected] build: `cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors`

What am I missing?

Answer 1

First of all, don't put your "npm run build" step in your Procfile. Doing so will cause that step to run every time your web dyno restarts, which is not what you want.

Instead, you want to run webpack (or whatever else you need for making sure the dependencies you need are present in your app) during slug compilation.

By virtue of the fact that you are using the heroku/node.js buildpack, it will automatically take care of running "npm install" for you (or yarn install, if you choose to use the yarn package manager instead).

However, if you need more than npm/yarn install (e.g. if you need to run webpack to bundle client dependencies), then you need to provide the slug compiler with additional instructions for those steps. A good way to do that is by using heroku-specific build steps.

So, for example, you might want to run webpack in a heroku-postbuild step in your package.json "scripts", e.g.:

"heroku-postbuid" : "cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors",

However, in addition you need to be aware that by default Heroku won't install any of your package.json devDependencies. So if you have webpack itself listed in devDependencies, you won't be able to use it in a heroku-postbuild step by default.

The way to workaround that is to either move webpack (together with any other build dependencies you need) to "dependencies" (instead of "devDependencies"), or to set config var NPM_CONFIG_PRODUCTION to false:

heroku config:set NPM_CONFIG_PRODUCTION=false   

For more info, see here and here.