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!
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
You can find a repo of this tutorial project here.
Let’s show your app to the world!
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
We need to create a server file: web.js. We’ll put this in our root directory
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.
This will compile everything, and give you a nice clean dist/ directory ready to be served up. Isn’t grunt fantastic?
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.
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.
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
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:
Let me know in the comments if you’d like me to write more about working with Angular.