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.

Answer 1

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.