Deploy to heroku (gulp not found error)

Question

I've cloned the meanjs repo and deployed to heroku but application won't run and shows the following error: Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.

Checking the logs, it says:

17-04-18T03:16:50.720375+00:00 app[web.1]:
2017-04-18T03:16:50.730925+00:00 app[web.1]: sh: 1: gulp: not found
2017-04-18T03:16:50.742737+00:00 app[web.1]: npm ERR! file sh
2017-04-18T03:16:50.743150+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2017-04-18T03:16:50.743568+00:00 app[web.1]: npm ERR! errno ENOENT

This is my package.json file:

{
  "name": "meanjs",
  "description": "Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js.",
  "version": "0.5.0",
  "meanjs-version": "0.5.0",
  "private": false,
  "author": "https://github.com/meanjs/mean/graphs/contributors",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/meanjs/mean.git"
  },
  "engines": {
    "node": ">=6.3.0",
    "npm": ">=3.10.8"
  },
  "scripts": {
    "update": "npm update && npm prune && bower install --allow-root && bower prune --allow-root",
    "clean": "rm -rf node_modules/ public/lib/",
    "reinstall": "npm cache clean && npm run clean && npm install",
    "start": "gulp",
    "start:prod": "gulp prod",
    "start:debug": "node-debug --web-host 0.0.0.0 server.js & gulp debug",
    "gulp": "gulp",
    "lint": "gulp lint",
    "test": "gulp test",
    "test:server": "gulp test:server",
    "test:server:watch": "gulp test:server:watch",
    "test:client": "gulp test:client",
    "test:e2e": "gulp test:e2e",
    "test:coverage": "gulp test:coverage",
    "postinstall": "bower install --allow-root && bower prune --allow-root",
    "generate-ssl-certs": "scripts/generate-ssl-certs.sh"
  },
  "dependencies": {
    "acl": "~0.4.10",
    "async": "~2.3.0",
    "body-parser": "~1.17.1",
    "bower": "~1.8.0",
    "chalk": "~1.1.3",
    "compression": "~1.6.2",
    "connect-flash": "~0.1.1",
    "connect-mongo": "~1.3.2",
    "cookie-parser": "~1.4.1",
    "crypto": "0.0.3",
    "express": "~4.15.2",
    "express-hbs": "^1.0.4",
    "express-session": "~1.15.2",
    "generate-password": "~1.3.0",
    "glob": "~7.1.1",
    "helmet": "~2.3.0",
    "jasmine-core": "~2.5.2",
    "lodash": "~4.17.4",
    "lusca": "~1.4.1",
    "method-override": "~2.3.8",
    "mocha": "~3.2.0",
    "mongoose": "~4.9.3",
    "morgan": "~1.8.1",
    "multer": "~1.3.0",
    "nodemailer": "~2.6.4",
    "owasp-password-strength-test": "~1.3.0",
    "passport": "~0.3.2",
    "passport-facebook": "~2.1.1",
    "passport-github": "~1.1.0",
    "passport-google-oauth": "~1.0.0",
    "passport-linkedin": "~1.0.0",
    "passport-local": "~1.0.0",
    "passport-paypal-openidconnect": "~0.1.1",
    "passport-twitter": "~1.0.4",
    "serve-favicon": "~2.4.2",
    "socket.io": "^1.7.3",
    "validator": "~7.0.0",
    "winston": "^2.3.1",
    "wiredep": "~4.0.0"
  },
  "devDependencies": {
    "coveralls": "~2.13.0",
    "del": "^2.2.2",
    "eslint": "~2.2.0",
    "eslint-config-airbnb": "~6.0.2",
    "gulp": "~3.9.1",
    "gulp-angular-templatecache": "~2.0.0",
    "gulp-autoprefixer": "~3.1.0",
    "gulp-concat": "~2.6.0",
    "gulp-csslint": "~1.0.0",
    "gulp-csso": "~3.0.0",
    "gulp-eslint": "~3.0.1",
    "gulp-imagemin": "~3.2.0",
    "gulp-istanbul": "~1.1.1",
    "gulp-less": "~3.3.0",
    "gulp-load-plugins": "~1.5.0",
    "gulp-mocha": "~3.0.1",
    "gulp-ng-annotate": "~2.0.0",
    "gulp-nodemon": "~2.2.1",
    "gulp-protractor": "^3.0.0",
    "gulp-refresh": "~1.1.0",
    "gulp-rename": "~1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-sass": "~3.1.0",
    "gulp-uglify": "~2.1.2",
    "gulp-util": "~3.0.7",
    "imagemin-pngquant": "~5.0.0",
    "istanbul": "~0.4.2",
    "karma": "~1.6.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-coverage": "~1.1.1",
    "karma-firefox-launcher": "~1.0.0",
    "karma-jasmine": "~1.1.0",
    "karma-ng-html2js-preprocessor": "~1.0.0",
    "karma-phantomjs-launcher": "~1.0.0",
    "phantomjs-prebuilt": "~2.1.14",
    "lcov-result-merger": "~1.2.0",
    "run-sequence": "~1.2.2",
    "semver": "~5.3.0",
    "should": "~11.2.1",
    "supertest": "~2.0.0"
  }
}

What's wrong?

Answer 1

Heroku will try to detect the kind of application you're deploying.

To determine how to start your app, Heroku first looks for a Procfile. If no Procfile exists for a Node.js app, we will attempt to start a default web process via the start script in your package.json.

I'm assuming there are no Procfile and that Heroku tries to run npm start.

Your start script is just the default gulp task, but because gulp isn't installed since it's not listed in the dependencies, it fails.

Heroku documentation about devDependencies

We set NPM_CONFIG_PRODUCTION to true by default to install production dependencies only. If you would like to install devDependencies, you can disable production mode:

$ heroku config:set NPM_CONFIG_PRODUCTION=false

However, since you usually don’t want all development dependencies in your production builds, it’s preferable to move only the dependencies you actually need for production builds (bower, grunt, gulp, etc) into dependencies.

devDependencies should only contains dependencies that are not required in production at all. Since your app relies on gulp and probably most of the listed plugins, you'd need to move these up into dependencies.

---

As mentioned by Nathan in his answer, if you don't want to move your devDependencies around, you could use the poststart npm script to uninstall the devDependencies.

"scripts": {
    "poststart": "npm prune --production"
    ...
}

Answer 2

I think a cleaner solution than putting certain build tools into your production deployment is to take advantage of npm's postinstall hook. Using that you can load devDependencies for the build process, then remove them before the app is deployed. See my previous post here:

https://stackoverflow.com/a/42237745/673882