How to deploy a Grunt Project on Heroku?

Run a website built with Grunt (and Sass/Compass) on Heroku for free.

You developed a Grunt app and now you want to make it public? This tutorial explains how you can run your static website on a Heroku server for free. You are also using Sass or Compass? No problem.

Sign Up on Heroku

At first create a free Heroku account. Then install the Heroku Toolbelt on your computer. It is the interface between you and Heroku. With this command-line tool you can create and manage apps hosted on Heroku.

After this open the terminal and log in to Heroku:

$ heroku login

Create an app on Heroku

To create an app on Heroku use the heroku create command. The command needs the name of your app and the buildpack you want to use. A buildpack executes your code on the Heroku server. In our case the buildpack should execute node.js and Grunt code.
If you are using Sass or Compass in addition to Grunt you have to use the following buildpack: https://github.com/stephanmelzer/heroku-buildpack-nodejs-grunt-compass.git. Replace the URL from the script below with this URL if you are using Compass or Sass.

$ heroku create myapp --buildpack https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git

This command creates an app named myapp. The name of your app has to be unique on Heroku.

Adapt Your Code

Now change Gruntfile.js. Add a grunt task which prepares the app for launching. It should compress your CSS, minify all images, concat your CSS files and do everything else that is needed for production launch. The task is called after each upload of your code to Heroku and before the website starts. The name of the Grunt task must be heroku.

// change the tasks in the list to your production tasks
grunt.registerTask('heroku',
    ['compass:dist', 'autoprefixer', 'imagemin']);

You need a file which handles all calls and serves the requested resource to the user. For that create the JavaScript file app.js in your project root directory.

var express = require('express');
var port = process.env.PORT || 3000;
var app = express();
app.use(express.static(__dirname + ‘/public’));
app.listen(port);

If for example the file index.html is requested the script returns the file /public/index.html. If css/style.css is requested the file /public/css/style.css is returned and so on.

We are using the node.js framework Express. So we have to install it:

$ npm install express -save

Now create a file named Procfile in your root directory. This file tells Heroku what the dyno should do. The Procfile looks like:

web: node app.js

You can read the file like: The web dyno should execute app.js with node.js.

Push the app to Heroku

Before you can push the app to Heroku, you’ll need to track your app in Git:

$ git init
$ git add .
$ git commit -m "init"

Create a Git remote. Git remotes are references to other repositories. By default, the remote is named heroku.

$ heroku git:remote -a myapp

Then push your code to the Heroku server. This takes a few minutes.

$ git push heroku master

The last step is to add a web dyno.

$ heroku ps:scale web=1

This command sets the number of web dynos to one. One dyno is free. If you are using more than one dyno you have to pay.

Finsished

Now your app should work. Go to http://myapp.herokuapp.com/ and admire your static website. ☺

Every time you change something on your website you have to commit your changes and push them to the server:

$ git add .
$ git commit -m"Describe here your changes"
$ git push heroku master

You like this tutorial? Then click recommend and follow me on Twitter @3runjo.