Andreas Baaserud Andreas Baaserud - 2 months ago 53
Node.js Question

Deploy AngularJs + webpack + gulp on Heroku

I have an AngularJs app with webpack and gulp. It is built on top of https://github.com/AngularClass/NG6-starter and I would like to deploy it on Heroku.com. From the build log it looks like everything is fine, when I try to access the web application I receive the following message:
enter image description here

From Heroku application log:

2016-07-25T11:48:27.455165+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:

2016-07-25T11:48:27.455164+00:00 app[web.1]: npm ERR! npm bugs ng6-starter

2016-07-25T11:48:27.462393+00:00 app[web.1]:

2016-07-25T11:48:27.462658+00:00 app[web.1]: npm ERR! Please include the following file with any support request:

2016-07-25T11:48:27.455166+00:00 app[web.1]: npm ERR! npm owner ls ng6-starter

2016-07-25T11:48:27.455163+00:00 app[web.1]: npm ERR! gulp serve

2016-07-25T11:50:18.830449+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=someapp.herokuapp.com request_id=x fwd="0.0.0.0" dyno= connect= service= status=503 bytes=

2016-07-25T11:50:19.372880+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=someapp.herokuapp.com request_id=x fwd="0.0.0.0" dyno= connect= service= status=503 bytes=

In my package.json file I have added

"scripts": {
"test": "karma start",
"build": "gulp webpack",
"start": "gulp"
}


From Heroku build log:

Node.js app detected
Creating runtime environment

NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_ENV=production
NODE_MODULES_CACHE=true
Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)

Resolving node version (latest stable) via semver.io...
Downloading and installing node 5.11.1...
Using default npm version: 3.8.6
Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
Building dependencies
Installing node modules (package.json)
Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
Build succeeded!
├── angular@1.5.8
├── angular-animate@1.5.8
├── angular-aria@1.5.8
├── angular-file-upload@2.3.4
├── angular-material@1.1.0-rc.5
├── angular-messages@1.5.8
├── angular-sanitize@1.5.8
├── angular-translate@2.11.1
├── angular-ui-router@0.2.18
├── gulp@3.9.1
├── json-loader@0.5.4
├── lodash@3.10.1
├── material-design-icons@2.2.3
├── moment@2.14.1
├── node-uuid@1.4.7
├── normalize.css@3.0.3
├── objectpath@1.2.1
├── promise-polyfill@5.2.1
└── tv4@1.2.7

Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
Compressing...
Done: 50.8M
Launching...
Released v12
https://someapp.herokuapp.com/ deployed to Heroku


I am kind of lost here, any help is greatly appriciated.

Answer

In this case you have not installed webpack module,it was missing dependencies which is not allow to run gulp webpack build script

so you need to manually install dependencies on heroku it will give terminal with below command

heroku run bash

npm install webpack 

which will add webpack module and try to run you application