Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[JavaScript] Deploying Yeoman apps to Heroku | https://medium.com/console-log-yo/launching-apps-with-yeoman-1d0dfa627305

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: 'git@heroku.com: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
@lordoffreaks

This comment has been minimized.

Copy link

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.*",

with

"express": "^3.*",
@micjamking

This comment has been minimized.

Copy link
Owner Author

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?

@WeHateNick

This comment has been minimized.

Copy link

WeHateNick commented Dec 17, 2014

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

@manishsingh-xyz

This comment has been minimized.

@dainbrain

This comment has been minimized.

Copy link

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: https://github.com/yeoman/generator-webapp/blob/master/docs/recipes/node-heroku.md 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
You can’t perform that action at this time.