Deploying Yeoman apps to Heroku

Prerequisites

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
node_modules

Commit our new production repo:

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

Create a Heroku app

$ heroku create <app_name>

Deployment

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: '[email protected]:heroku-app-1985.git',
            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: [
                '.tmp',
                '<%= 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'

Launch

$ 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

micjamking/README.md

Deploying Yeoman apps to Heroku

Prerequisites

Build for Production

Setup for Heroku

Deployment

manishsingh-xyz commented Jan 20, 2015

dainbrain commented Mar 24, 2016