Tutorial: Creating an AngularJS app with node.js and Heroku Part I

November 28, 2012 Appirio

As a follow up to this cross-post from the Cloudspokes blog I thought I’d write up a little tutorial on how to get started with AngularJS using node.js on Heroku.  The project will use angular-seed a great open source project for quickly getting started in AngularJS.

In part I we will set up our local development environment for creating the project, and deploy to Heroku.

Setting up your Environment

Installing heroku-toolbet

In order to create Heroku apps and perform various administrative functions from the command line, it is nice to have the heroku-toolbet installed. This can be obtained here: https://toolbelt.heroku.com/.  After installation you can confirm it is working by running 

Now log in to your Heroku account

Installing node.js 

The server we will use for this project is the lightweight javascript server node.js, which can be acquired here: http://nodejs.org/.  If it is properly installed you should have both the npm and node binaries
npm is the package manager for node that we will use at a later point in time for both installing a node package, and generating a package file for Heroku.

Creating Project Directory

Now we need a project directory tracked by git (because Heroku uses git for deployments). So let’s make sure we have git installed by running this command on your command-line: 
If you do not see that, or see something like ‘git: command not found’ you probably need to install git which you can get for your operating system at http://git-scm.com/

Now that we have git installed lets create our project directory and initialize a local git repo.  I am going to call this project herangunode (thats a mashup of Heroku + Angular + Node).
With the project directory created, its time to start creating our first AngularJS app!

Writing the app

Grabbing angular-seed

angular-seed is an open source Angularjs skeleton project that will help you bootstrap your AngularJS project and get started quickly without having to worry about which AngularJS file goes where. 
Let’s clone this project from Github into its own directory and then we’ll copy the parts we need to our project.
Clone:
Copy:
The key parts we have copied over are the /app folder.  This is where all of the application logic including libraries are contained, and where you will do most of your coding.  We ignored the other parts as they all relate to the server and we’re going to roll our own node.js implementation
Now let’s commit these new files.
We now have AngularJS parts of the app we will need, time to create our server.

Installing node-static

We are now going to install node-static, a node package used for serving static content, and since AngularJS is usually entirely static content run on the client side it makes sense to use node-static here.

Creating node.js server

All we need for this project is a simple node.js server for serving the static assets of AngularJS. 
We are going to create a new file in our root directory called web.js, this is our web server
web.js
Let’s commit this file to our git repository

Run the app locally

Now we have everything we need to run the app locally. Lets go to our command line and start the server
And now open a browser to http://localhost:5000 and make sure everything is working as expected

Deploying to Heroku

For Heroku to know how to launch the app after pushing to the server we need to give it some instructions.  Heroku needs to know what prerequisites our app relies on (in this case, node-static) and which file to launch after the push (web.js).  The prereqs are kept in a file called package.json and the executed command is kept in a file called Procfile 

Creating the package.json file

We are going to run the command ‘npm init’ which will walk us through creating this file and then create it at the end. 
Tada! All there is to it.

Creating the Proc file

This one is pretty straight forward as well.  We are going to tell Heroku to run our ‘web.js’ as our webserver after we deploy 
Procfile

Commit both files

Now that we have written the files that will tell Heroku how to create our app, we commit them to our local repo.

Create Heroku app

If you remember way back when we set up the environment we installed and logged into the heroku-toolbet.  Now we can use the Heroku command line tool to create a new app with the command ‘heroku create’.  This will create the app on Heroku servers and add it as a remote repository to our git.

We can confirm it was created by going to the URL provided

Push to Heroku

This is the final step.  We are now going to push our app to Heroku.  Heroku already added the remote git repository so all we need to do is run ‘git push heroku master’ to push to our git repo to our remote master branch on Heroku.

Congrats! You’ve completed your first deployment of your Heroku app.  Let’s go back to Heroku and check it out.

Part II

Now that we have our app environment set up, part two will focus on creating a functional (well more useful at any rate) web app with AngularJS.

Previous Article
Comparing Ruby HTTP Clients

Hiroshi Nakamura (@nahi) As a Technical Architect at Appirio Japan, and also as an OSS developer and enthus...

Next Article
Blogging for CloudSpokes: Getting Started with AngularJS is Now Open Sourced!
Blogging for CloudSpokes: Getting Started with AngularJS is Now Open Sourced!

By Kyle Bowerman  A couple of months ago we engaged with a customer who wanted a custom web app with a supe...