I’ve created a small AngularJS app with Yeoman and want to deploy it to heroku. To server the static files of the Angular app I need a server to serve up the pages.

I’m going to use Node to serve up the static site, so I install the necessary dependencies:

npm install gzippo express --save

Gzippo serves gzipped assets and Express is a simple application framework for Node which makes serving the site quite simple.

Server File

The server file: web.js goes into the 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);


Notice that the /dist directory will be served. To update the /dist folder the app need to be build with

grunt build

/dist

The /dist directory is ignored by git by default because you normally only want the development project and not the compiled app in the to repository. Since Heroku uses git to deploy, /dist needs to be part of the repository for heroku. To include /dist into the repository simply remove it’s entry from .gitignore to make sure it gets committed.
I recommend to create a branch for that – i.e. “dist” (or heroku). This way you can have your master branch without the compiled app to push it to github.

Heroku

Heroku needs a /Procfile in the root to start the app by using NodeJS to run the web.js server file.

web: node web.js

That’s it. With your heroku app created and deployed it’ll server the static angularJS app.