Node.js application is deployed to the hero

Question

I have the following file structure for my MEAN application:

root |---> public |----> css |----> js |----> controller |----> app.js |----> views |----> index.html |---> app |----> server.js |---> node_modules |---> bower_components |---> gulpfile.js |---> package.json |---> Procfile 

In this application, 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); }); 

It then communicates with the app using the REST API . This works on the local machine. I uploaded this project to heroku .

My Procfile :

 web: node node_modules/gulp/bin/gulp serve 

But he shows an error. I have the following error in 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 at Advance.

Answer 1

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

When deploying to heroku NODE_ENV=production , therefore gulp never installed. Hence the error ...

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

Just move gulp and all that is required to build your package from devDependencies to dependencies . You can get npm to move it for you with.

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

Repeat this for each developer dependency needed to build your package. Or you can simply copy and paste them all yourself.

---

This is a common problem without an ideal AFAIK solution. NPM expects that you have already prepared your files in production. As it would be if you published them in NPM. However, in heroku and other solutions deployment applications this is not the case.

Answer 2

Charlie Martin is correct regarding dev-dependencies and the --production flag (which Heroku runs correctly). You can see further explanation in the nodejs docs for npm install and package.json - this snippet of the question was developed elsewhere .

However, I would strongly recommend that during deployment you do not run the serve task through gulp and instead define an npm script start to launch the browserSync CLI . That way you can save gulp as a dev dependency .

It probably looks something like this: package.json

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

The Browsersync documentation is pretty good, so you should find what you need. I would play with him locally until npm start and gulp serve did the same, then I would turn around with the hero to see if that worked.