grunt and bower on heroku

bower, gruntjs, heroku, node.js

Solution

Keep your Grunt dependencies in `devDependencies`, where they belong. Use a custom buildpack to allow Heroku to execute your Grunt flow on their platform.

Sample app that shows how to do exactly that

Buildpacks let you fire up the app differently, in this case you'll want to change it from the config settings:

heroku config:set BUILDPACK_URL=https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git

Then it's just a matter of adding a `heroku` task to your Grunt configuration.

Problem

Today I wanted to deploy my `node.js` application to heroku. Locally I am using `bower` and `grunt` for development also and I wanted to still use them. Now, following some advice I found on the web I added `bower` to my `dependencies` and added `"postinstall": "node_modules/.bin/bower install` to my `package.json` `postinstall`. Now I am having some problems with `grunt`. When I move my grunt dependencies to `dependencies` from `devDependencies` `grunt` does not recognize my `tasks`, for example when I have ``` { "name": "js-linkedin-connector", "version": "0.1.0", "dependencies": { "passport": "~0.1.17", "passport-local": "~0.1.6", "passport-linkedin-oauth2": "~1.0.1", "connect": "~2.11.0", "underscore": "~1.5.2", "bower": "1.2.x", "grunt": "~0.4.1", "grunt-cli": "0.1.11", "load-grunt-tasks": "~0.1.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-coffee": "~0.7.0", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-compass": "~0.5.0", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-cssmin": "~0.6.0", "grunt-contrib-connect": "~0.5.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-watch": "~0.5.2", "grunt-autoprefixer": "~0.2.0", "grunt-usemin": "~2.0.0", "grunt-svgmin": "~0.2.0", "grunt-rev": "~0.1.0", "grunt-concurrent": "~0.3.0", "grunt-jasmine-node": "~0.1.0", "grunt-google-cdn": "~0.2.0", "grunt-ngmin": "~0.0.2", "time-grunt": "~0.1.0", "grunt-karma": "~0.6.2", "connect-livereload": "~0.3.0" }, "devDependencies": { "karma-ng-scenario": "~0.1.0", "karma-script-launcher": "~0.1.0", "karma-chrome-launcher": "~0.1.0", "karma-firefox-launcher": "~0.1.0", "karma-html2js-preprocessor": "~0.1.0", "karma-jasmine": "~0.1.3", "karma-requirejs": "~0.1.0", "karma-phantomjs-launcher": "~0.1.0", "karma": "~0.10.4", "karma-ng-html2js-preprocessor": "~0.1.0" }, "engines": { "node": ">=0.8.0", "npm": "1.3.x" }, "scripts": { "test": "grunt test", "postinstall": "node_modules/.bin/bower install;node_modules/.bin/grunt server:dist" } } ``` in my `package.json` when I type `./node_modules/.bin/grunt` I am getting: ``` Warning: Task "jshint" not found. Use --force to continue. Aborted due to warnings. ``` But when I move `grunt` dependencies to `devDependencies`: ``` { "name": "js-linkedin-connector", "version": "0.1.0", "dependencies": { "passport": "~0.1.17", "passport-local": "~0.1.6", "passport-linkedin-oauth2": "~1.0.1", "connect": "~2.11.0", "underscore": "~1.5.2", "bower": "1.2.x" }, "devDependencies": { "grunt": "~0.4.1", "grunt-cli": "0.1.11", "load-grunt-tasks": "~0.1.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-coffee": "~0.7.0", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-compass": "~0.5.0", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-cssmin": "~0.6.0", "grunt-contrib-connect": "~0.5.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-watch": "~0.5.2", "grunt-autoprefixer": "~0.2.0", "grunt-usemin": "~2.0.0", "grunt-svgmin": "~0.2.0", "grunt-rev": "~0.1.0", "grunt-concurrent": "~0.3.0", "grunt-jasmine-node": "~0.1.0", "grunt-google-cdn": "~0.2.0", "grunt-ngmin": "~0.0.2", "time-grunt": "~0.1.0", "grunt-karma": "~0.6.2", "connect-livereload": "~0.3.0", "karma-ng-scenario": "~0.1.0", "karma-script-launcher": "~0.1.0", "karma-chrome-launcher": "~0.1.0", "karma-firefox-launcher": "~0.1.0", "karma-html2js-preprocessor": "~0.1.0", "karma-jasmine": "~0.1.3", "karma-requirejs": "~0.1.0", "karma-phantomjs-launcher": "~0.1.0", "karma": "~0.10.4", "karma-ng-html2js-preprocessor": "~0.1.0" }, "engines": { "node": ">=0.8.0", "npm": "1.3.x" }, "scripts": { "test": "grunt test", "postinstall": "node_modules/.bin/bower install;node_modules/.bin/grunt server:dist" } } ``` everything works fine. What is the problem and how can I resolve it to deploy my `grunt` + `bower` app to heroku?

Original source