Deploying a Yeoman/Angular app to Heroku

So you’ve used Yeoman to Kickstart your AngularJS app and now you’re ready to show it to the world?

Well you can, by deploying it to Heroku!

Prerequisites

To get the most out of this tutorial we recommend you have the following skills and resources available:

• A terminal and basic knowledge of the command line
• NodeJS and NPM installed
• A Heroku account and the Heroku Toolbelt
• An existing Yeoman generated static app

Files

You can find a repo of this tutorial project here.

Let’s show your app to the world!

Node Packages

Since our Yeoman site is just a set of static pages, we can’t just stick it up on Heroku and expect it to work. Heroku needs a server to serve up the pages for us.

We’re going to use Node to serve up our static site with only a few files and changes. First, let’s install the necessary dependencies to deploy to Heroku.

npm install gzippo express --save

Gzippo lets us serve gzipped assets and Express is a simple application framework for Node which will make serving our site a little easier

Server File

We need to create a server file: web.js. We’ll put this in our root directory

/web.js

var gzippo = require('gzippo');
  var express = require('express');
  var app = express();
 
  app.use(express.logger('dev'));
  app.use(gzippo.staticGzip("" + __dirname + "/dist"));
  app.listen(process.env.PORT || 5000);

That’s all we need to serve up our site.

The dist directory

Notice that our server is serving up the /dist directory. If you can’t see the /dist directory it’s because we haven’t built our app yet.

grunt build

This will compile everything, and give you a nice clean dist/ directory ready to be served up. Isn’t grunt fantastic?

Heroku

Now let’s add a Procfile, also in root. The Procfile tells Heroku how to kickstart our app. In this case we’re telling it to use NodeJS to run our web.js server file.

/Procfile

web: node web.js

Right! It’s the moment of truth! Let’s deploy to Heroku! First let’s turn our project directory into a git repo

git init

Assuming you have a Heroku account and have the Heroku Toolbelt installed, just run:

heroku create <your_app_name>

Now commit your code and deploy it by pushing to Heroku!

git add .
  git commit -m "Initial Commit"
  git push heroku master

You may need to scale up your web workers to at least one:

heroku ps:scale web=1

To open your app on Heroku and marvel at your accomplishments, run:

heroku open

Let me know in the comments if you’d like me to write more about working with Angular.