So many new things happening! Pretty stoked that I managed to get ZURB’s Foundation working on my Node.js application, my next step was to get the app deployed to Heroku. Until this point I’d only ever deployed a project to Heroku by following and mimicking the ‘Getting Started‘ tutorial. My seethisspot project was already very different to that example application so I had my work cut out for me. Here’s how I went about it…

1. Install bower and grunt as NPM dependencies, not just a devDependencies. My packages.json now looks like this…

  "dependencies": {
    "express": "~4.11.0",
    "serve-favicon": "~2.2.0",
    "morgan": "~1.5.0",
    "cookie-parser": "~1.3.3",
    "body-parser": "~1.10.0",
    "debug": "~2.1.0",
    "jade": "~1.9.1",
    "bower": "~1.3.12",
    "grunt": "~0.4.5",
    "grunt-develop": "~0.4.0",
    "grunt-sass": "~0.17.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-cli": "~0.1.13"
  },
  "devDependencies": {}

2. Create a post install script to install all bower components. As you can see in this post, Foundation is installed as a bower component, so how to get this deployed on heroku? Simple really, your bower.json should have a dependecies section already

  "dependencies": {
    "foundation": "zurb/bower-foundation#~5.5.1",
    "font-awesome": "~4.3.0"
  }

All that’s needed to install these components on whatever environment you deploy to is a simple script (mine’s call post_install.sh) in the root directory of your project

#!/bin/bash
./node_modules/bower/bin/bower install

Next, update the scripts section of your packages.npm to call this script using the ‘postinstall’ hook

"scripts": {
    "start": "node ./bin/www",
    "postinstall": "bash ./post_install.sh"
  }

3. Create a grunt task that compiles your SASS into CSS once deployed. Add this in your gruntfile.js, the task must be called ‘heroku:production’ or ‘heroku:development’, although I haven’t played around with both of these yet to work out when & how it determines which to run

  grunt.registerTask('heroku:production', [
    'sass'
  ]);

4. That should be it!Add a remote repository if you haven’t already, and push your project there!

> git push heroku master

And watch the magic unfold.