Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
[JavaScript] Deploying Yeoman apps to Heroku |

Deploying Yeoman apps to Heroku


This assumes you already have a Yeoman app and are ready for publishing

Build for Production

Create production directory & assets

$ grunt build

Setup for Heroku

Create a new package.json in the ‘dist’ directory:

$ cd app && npm init

Install Express & Gzippo for server:

$ npm install express gzippo --save

Create a index.js file and add the following to the file:

var express = require('express');
var http = require('http');
var gzippo = require('gzippo');

var app = express();
app.use(gzippo.staticGzip('' + __dirname));
app.use('/*', function(req, res){
  res.sendfile(__dirname + '/index.html');

var server = http.createServer(app);
server.listen(process.env.PORT || 5000);

Create a Procfile file and add the following to the file:

web: node index.js

Create a .gitignore file and add the following to the file:

# Ignore pattern for Production

Commit our new production repo:

$ git init
$ git add -A
$ git commit -m ‘Initial Commit’

Create a Heroku app

$ heroku create <app_name>


Install grunt-build-control in our main app directory:

$ cd ../ && npm install grunt-build-control --save-dev

Configure grunt-build-control inside of our Gruntfile.js file.

buildcontrol: {
    options: {
        dir: 'dist',
        commit: true,
        push: true,
        message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
    heroku: {
        options: {
            remote: '',
            branch: 'master'

Optionally, create a shortcut for the task:

grunt.registerTask('deploy', ['buildcontrol']);

Reconfigure clean task to ignore the new files created in production directory:

// Empties folders to start fresh
clean: {
    dist: {
        files: [{
            dot: true,
            src: [
                '<%= yeoman.dist %>/*',
                '!<%= yeoman.dist %>/.git{,*/}*',
                '!<%= yeoman.dist %>/Procfile',
                '!<%= yeoman.dist %>/package.json',
                '!<%= yeoman.dist %>/web.js',
                '!<%= yeoman.dist %>/node_modules'
    server: '.tmp'

Commit changes to your Gruntfile.js and package.json

git commit -m 'Updated Gruntfile.js and package.json'


$ grunt deploy

Depending on your app, you may need to scale up a web worker on Heroku for it to run:

$ heroku ps:scale web=1

Now open your app and revel in all its glory:

$ cd dist && heroku open

This comment has been minimized.

Copy link

@lordoffreaks lordoffreaks commented Nov 27, 2014

Great job!!! Thanks for sharing, just a little issue, currently the latest version of express is 4 and the steps in this guide are not going to work, just replace in your package.json:

"express": "^4.*",


"express": "^3.*",

This comment has been minimized.

Copy link
Owner Author

@micjamking micjamking commented Dec 3, 2014

@lordoffreaks: Thanks for the heads up! What do I need to do to make the above steps work with express 4.0? What kind of errors/issues are you hitting?


This comment has been minimized.

Copy link

@WeHateNick WeHateNick commented Dec 17, 2014

I just deployed a new Yeoman scaffold successfully using Express 4.0.


This comment has been minimized.


This comment has been minimized.

Copy link

@dainbrain dainbrain commented Mar 24, 2016

Used this article to help me deploy a site with grunt, but my latest project I used the updated yeoman webapp generator with gulp. Their documentation here: is incomplete, as it doesnt mention creating a local git repo, a Procfile, etc... I'm guessing I still need to do those things, have you had any experience with that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment