grunt and bower on heroku

Question

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?

Answer 1

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.

Answer 2

Actually, I've tried some methods to make sure what works and what does not for me. I needed to minify my scripts with uglify.

1. First, I added grunt and grunt-contrib-uglify to my devDependencies (as I develop on my machine), and tried the "postinstall" script in package.json:

   "scripts": {
     "start": "node index.js",
     "postinstall": "grunt uglify"
   },
   "devDependencies": {
     "grunt": "~0.4.4",
     "grunt-contrib-uglify": "^0.4.0"
   }
   

   this obviously did not work, because heroku does not install devDependencies.

2. after this, I set up the buildpack, added a heroku task to my Gruntfile.js, removed the postinstall script and tried to push.

   This was also unsuccessful, because the buildpack only installed grunt-cli and grunt, but not grunt-contrib-uglify.

3. next I moved grunt & grunt-contrib-uglify to dependencies from devDependencies. (if I move uglify, why should I not move grunt). This way it worked, but made me feel: why do I need the buildpack, if I have to add grunt to dependencies?

4. I've reverted to the default buildpack

   heroku config:unset BUILDPACK_URL
   

   and added the postinstall script mentioned above. this was not working, because the grunt command was still missing.

5. finally, I also added grunt-cli to dependencies, and it works now, without the buildpack!

Conclusion: you do not need the buildpack - and add your grunt dependencies to "dependencies". Or, the buildpack should fix this issue: https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt/issues/5