Skip to content

Instantly share code, notes, and snippets.

@micjamking
Last active August 23, 2017 16:45
Show Gist options
  • Save micjamking/9539467 to your computer and use it in GitHub Desktop.
Save micjamking/9539467 to your computer and use it in GitHub Desktop.
[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
Copy link

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
Copy link
Author

@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
Copy link

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

@manishsingh-xyz
Copy link

@dainbrain
Copy link

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