Andreas Baaserud Andreas Baaserud - 1 year ago 260
Node.js Question

Deploy AngularJs + webpack + gulp on Heroku

I have an AngularJs app with webpack and gulp. It is built on top of and I would like to deploy it on 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="/" request_id=x fwd="" 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" request_id=x fwd="" 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

Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)

Resolving node version (latest stable) via
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
Done: 50.8M
Released v12 deployed to Heroku

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download