Deploy AngularJs + webpack + gulp on Heroku

Question

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:

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!
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   └── [email protected]

   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.

yes, I can start my application with "gulp" and it will run fine locally — Andreas Baaserud
– Andreas Baaserud, Commented Jul 25, 2016 at 12:37
well I'm not sure. in the build log I would expect to see also webpack in the module list. I appended webpack to "dependencies" in package.json, but I still can't see it when heroku starts to build. — Andreas Baaserud
– Andreas Baaserud, Commented Jul 25, 2016 at 12:41
you can also install it manually by using heroku run bash which will give terminal — uzaif
– uzaif, Commented Jul 25, 2016 at 12:46

Community · Accepted Answer · 2017-05-23 12:00:13Z

I just deployed angularjs app on heroku with webpack (without grunt), but the error looks similar. As an alternative, you just need to include webpack as your dependencies, rather than devdependencies in your package.json.

how to deploy angularjs on heroku with webpack only

{
  "name": "",
  "version": "1.0.0",
  "description": "github call",
  "main": "./src/bundle.js",
  "engines": {
    "node": "6.4.0"
  },
  "scripts": {
    "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "deploy:WINDOWS": "set NODE_ENV=production && webpack -p && node ./src/server.js",
    "deploy": "NODE_ENV=production webpack -p && node ./src/server.js",
    "start": "node ./src/server.js",
    "postinstall": "NODE_ENV=production webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.5.8",
    "angular-route": "^1.5.8",
    "angular-sanitize": "^1.5.8",
    "express": "^4.14.0",
    "webpack": "^1.13.2",
    "markdown": "^0.5.0"
  },
  "devDependencies": {
    "babel-angular": "0.0.5",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "css-loader": "^0.25.0",
    "style-loader": "^0.13.1",
    "webpack-dev-server": "^1.16.1"
  }
}

Edit: I included the package.json for your references, thanks for the feedback.

Take note of the list of dependencies. When you put engine follow by the version, you indicate which version of node you wish to install. At the same time, express is required to render you angular app.

postinstall and start are the key commands to deploy for heroku. Heroku will run postinstall first follow by start

webpack is listed as dependencies NOT devDependencies.

uzaif · Accepted Answer · 2016-07-25 13:19:49Z

0

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

edited Jul 25, 2016 at 13:19

answered Jul 25, 2016 at 13:03

uzaif

3,5512 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Deploy AngularJs + webpack + gulp on Heroku

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related