Deploying a Yeoman/Angular app to Heroku

Brad Barrow
Tweet

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?

Important
It’s worth noting that the dist/ directory is ignored by git by default (they assume you only want to version control the development project, not the compiled app). Since Heroku uses git to deploy, we’ll need to remove dist/ from .gitignore to make sure it gets committed.

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Bill LaPrise

    Angular is a good topic. Especially integrating with Node.js and some backend db (mysql, mongo..)

  • David Patterson

    I agree also Angular is a good topic. Would be nice to see a push in more articles being published regarding angular

  • Anonymous

    Definitely more angular. maybe some useful directives, some testing, or general angular architecture.

  • RQ

    “Since Heroku uses git to deploy, we’ll need to remove dist/ from .gitignore to make sure it gets committed.”
    Commit the ‘dist’ as part of the project ‘master’ branch? This is plain wrong.