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.