Node.js app deploy in heroku

Question

I have the following file structure of my MEAN app:

root
|---> public
      |----> css
      |----> js
              |----> controller
              |----> app.js
      |----> views
      |----> index.html

|---> app
      |----> server.js
|---> node_modules
|---> bower_components
|---> gulpfile.js
|---> package.json
|---> Procfile

In this app, I run public/index.html using gulp,

gulpfile.js:

var gulp = require('gulp');
var browserSync = require('browser-sync');
var server = require('gulp-live-server');

gulp.task('server', function() {
     live = new server('app/server.js');
     live.start();
})
gulp.task('serve', ['server'], function() {
   browserSync.init({
      notify: false,
      port: process.env.PORT || 8080,
      server: {
        baseDir: ['public'],
        routes: {
            '/bower_components': 'bower_components'
        }
      }
   });
    gulp.watch(['public/**/*.*'])
        .on('change', browserSync.reload);
});

Then communicate with app using REST API. This is working in local machine. I have uploaded this project into heroku.

My Procfile:

web: node node_modules/gulp/bin/gulp serve

But It shows error. I have the following error into heroku logs

2017-05-21T16:26:57.305350+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=some-request-id fwd="fwd-ip" dyno= connect= service= status=503 bytes= protocol=https

2017-05-21T15:53:50.942664+00:00 app[web.1]: Error: Cannot find module '/app/node_modules/gulp/bin/gulp'

My package.json file:

 {
    "name": "myapp",
    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "gulp serve"
    },
    "repository": {
        "type": "git",
        "url": ""
    },
    "dependencies": {
        "async": "^2.4.0",
        "body-parser": "^1.17.2",
        "express": "^4.15.3",
        "mongoose": "^4.10.0",
        "morgan": "^1.8.1",
        "multer": "^1.3.0",
        "underscore": "^1.8.3"
    },
    "devDependencies": {
        "browser-sync": "^2.18.11",
        "gulp": "^3.9.1",
        "gulp-live-server": "0.0.30"
    }
}

Any suggestion? Thanks in Advance.

Where is your `package.json` located, and what are its contents? — therobinkim, May 27 '17 at 22:57

Charlie Martin · Accepted Answer · 2017-05-31T17:23:53.367

You probably have gulp defined as a development dependency (under devDepenenies) in your package.json file. NPM only installs devDependencies when NODE_ENV is not set to production.

When you deploy to heroku, NODE_ENV=production, so gulp is never installed. Hence the error...

Error: Cannot find module '/app/node_modules/gulp/bin/gulp'

Just move gulp and whatever else is required for building your bundle from devDependencies to dependencies. You can make npm move it for you with..

npm uninstall --save-dev gulp
npm install --save gulp

Repeat this for each dev dependency required to build your bundle. Or you can just copy and paste them all yourself.

This is a common issue without an ideal solution AFAIK. NPM expects that in production, you will have already pre-built your files. As you would if you were publishing them to NPM. However, in heroku and other push to deploy solutions, this is not the case.

score 0 · Answer 2 · answered May 31 '17 at 19:16

Charlie Martin is correct about dev-dependencies and the --production flag (which Heroku passes, correctly). You can see further explanation in the nodejs docs for npm install and package.json - this piece of the question has been elaborated on elsewhere.

However, I would strongly recommend that on deployment you do not run the serve task via gulp and instead, define your npm script start to run browserSync's CLI. This way, you can keep gulp as a dev dependency.

It would probably look something like this: package.json

{
  ... other properties ...
  "scripts": {
    "start": "browser-sync start --port 8080 -s"
  },
  ... other stuff ...
}

Browsersync's documentation is pretty good so you should find what you need. I'd fiddle with it locally until npm start and gulp serve do the same thing, then I'd deploy with heroku to see if it worked.

Node.js app deploy in heroku

2 Answers2