gulp not found when deploying angular 2 + rails app to heroku - ruby-on-rails

Question

I am currently trying to deploy my angular 2 app with Rails 5 back end to heroku. In order to do this I have been following this tutorial: https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/#comment-39250 .
The tutorial has been going well expect for the last part when deploying to heroku using: git push heroku master. I get the following error:
Counting objects: 254, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (232/232), done.
Writing objects: 100% (254/254), 158.00 KiB | 0 bytes/s, done.
Total 254 (delta 8), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=true
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version (latest stable) via semver.io...
remote: Downloading and installing node 6.9.1...
remote: Using default npm version: 3.10.8
remote:
remote: -----> Restoring cache
remote: Skipping cache restore (new runtime signature)
remote:
remote: -----> Building dependencies
remote: Pruning any extraneous modules
remote: Installing node modules (package.json)
remote:
remote: > angular-seed#0.0.0 postinstall /tmp/build_924023d394206e157329026627746427/client
remote: > gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner
remote:
remote: sh: 1: gulp: not found
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_924023d394206e157329026627746427/client/.heroku/node/bin/node" "/tmp/build_924023d394206e157329026627746427/client/.heroku/node/bin/npm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_924023d394206e157329026627746427/client/.npmrc"
remote: npm ERR! node v6.9.1
remote: npm ERR! npm v3.10.8
remote: npm ERR! file sh
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno ENOENT
remote: npm ERR! syscall spawn
remote: npm ERR! angular-seed#0.0.0 postinstall: `gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner`
remote: npm ERR! spawn ENOENT
remote: npm ERR!
remote: npm ERR! Failed at the angular-seed#0.0.0 postinstall script 'gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner'.
remote: npm ERR! Make sure you have the latest version of node.js and npm installed.
remote: npm ERR! If you do, this is most likely a problem with the angular-seed package,
remote: npm ERR! not with npm itself.
remote: npm ERR! Tell the author that this fails on your system:
remote: npm ERR! gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner
remote: npm ERR! You can get information on how to open an issue for this project with:
remote: npm ERR! npm bugs angular-seed
remote: npm ERR! Or if that isn't available, you can get their info via:
remote: npm ERR! npm owner ls angular-seed
remote: npm ERR! There is likely additional logging output above.
remote:
remote: npm ERR! Please include the following file with any support request:
remote: npm ERR! /tmp/build_924023d394206e157329026627746427/client/npm-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: Some possible problems:
remote:
remote: - Node version not specified in package.json
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote: - Gulp may not be tracked in package.json
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: Verifying deploy....
remote:
remote: ! Push rejected to aqueous-castle-46289.
remote:
To https://git.heroku.com/aqueous-castle-46289.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/aqueous-castle- 46289.git'
Here too is my package.json as done in the tutorial:
{
"name": "angular2-seed",
"version": "0.0.0",
"description": "Seed for Angular 2 apps",
"repository": {
"url": "https://github.com/mgechev/angular2-seed"
},
"scripts": {
"build.dev": "gulp build.dev --color",
"build.dev.watch": "gulp build.dev.watch --color",
"build.e2e": "gulp build.e2e --color",
"build.prod": "gulp build.prod --color",
"build.test": "gulp build.test --color",
"build.test.watch": "gulp build.test.watch --color",
"docs": "npm run gulp -- build.docs --color && npm run gulp -- serve.docs --color",
"e2e": "protractor",
"e2e.live": "protractor --elementExplorer",
"gulp": "gulp",
"karma": "karma",
"karma.start": "karma start",
"postinstall": "typings install && gulp check.versions && npm prune && gulp build.prod",
"reinstall": "npm cache clean && npm install",
"serve.coverage": "remap-istanbul -b src/ -i coverage/coverage-final.json -o coverage -t html && npm run gulp -- serve.coverage --color",
"serve.dev": "gulp serve.dev --color",
"serve.e2e": "gulp serve.e2e --color",
"serve.prod": "gulp serve.prod --color",
"start": "gulp serve.dev --color",
"tasks.list": "gulp --tasks-simple --color",
"test": "gulp test --color",
"webdriver-start": "webdriver-manager start",
"webdriver-update": "webdriver-manager update"
},
"author": "Minko Gechev <mgechev>",
"license": "MIT",
"devDependencies": {
},
"dependencies": {
"angular2": "2.0.0-beta.15",
"es6-module-loader": "^0.17.8",
"es6-promise": "^3.1.2",
"es6-shim": "0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "~0.19.25",
"zone.js": "^0.6.10",
"async": "^1.4.2",
"autoprefixer": "^6.3.3",
"browser-sync": "^2.11.2",
"chalk": "^1.1.3",
"codelyzer": "0.0.12",
"colorguard": "^1.1.1",
"connect": "^3.4.1",
"connect-history-api-fallback": "^1.1.0",
"connect-livereload": "^0.5.3",
"cssnano": "^3.5.2",
"doiuse": "^2.3.0",
"event-stream": "^3.3.2",
"express": "~4.13.1",
"express-history-api-fallback": "^2.0.0",
"extend": "^3.0.0",
"gulp": "^3.9.1",
"gulp-cached": "^1.1.0",
"gulp-concat": "^2.6.0",
"gulp-filter": "^4.0.0",
"gulp-inject": "^4.0.0",
"gulp-inline-ng2-template": "^1.1.2",
"gulp-load-plugins": "^1.2.0",
"gulp-plumber": "~1.1.0",
"gulp-postcss": "^6.1.0",
"gulp-shell": "~0.5.2",
"gulp-sourcemaps": "git+https://github.com/floridoo/gulp-sourcemaps.git#master",
"gulp-template": "^3.1.0",
"gulp-tslint": "^4.3.3",
"gulp-typedoc": "^1.2.1",
"gulp-typescript": "~2.12.1",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"is-ci": "^1.0.8",
"isstream": "^0.1.2",
"jasmine-core": "~2.4.1",
"jasmine-spec-reporter": "^2.4.0",
"karma": "~0.13.22",
"karma-chrome-launcher": "~0.2.2",
"karma-coverage": "^0.5.5",
"karma-ie-launcher": "^0.2.0",
"karma-jasmine": "~0.3.8",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"merge-stream": "^1.0.0",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.1.4",
"postcss-reporter": "^1.3.3",
"protractor": "^3.0.0",
"remap-istanbul": "git+https://github.com/SitePen/remap-istanbul.git#master",
"rimraf": "^2.5.2",
"run-sequence": "^1.1.0",
"semver": "^5.1.0",
"serve-static": "^1.10.2",
"slash": "~1.0.0",
"stream-series": "^0.1.1",
"stylelint": "^5.3.0",
"stylelint-config-standard": "^5.0.0",
"systemjs-builder": "^0.15.14",
"tiny-lr": "^0.2.1",
"traceur": "^0.0.91",
"ts-node": "^0.7.1",
"tslint": "^3.7.0-dev.2",
"tslint-stylish": "2.1.0-beta",
"typedoc": "^0.3.12",
"typescript": "~1.8.10",
"typings": "^0.7.12",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"yargs": "^4.2.0"
}
}
I am sure the problem most likely resides with the package.json and its inability to find 'gulp'.
I have also tried to follow the instructions of the following person: https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/#comment-38286 as it appears that they had a similar problem - however their instructions dont appear to be very clear and whatever I've been able to infer from them hasnt worked. If you know what they mean let me know.
I would appreciate any help that I can get.
Thank you very much!

Answer 1

A bit late, but I've just encountered this error as well doing the same tutorial. If you check the log you see the following error:
Node version not specified in package.json
If you google that you'll find this page
Use the engines section of your package.json to specify the version of Node.js to use on Heroku.
{
"name": "myapp",
"description": "a really cool app",
"version": "1.0.0",
"engines": {
"node": "6.9.4"
}
}
This should get your installation going again.