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
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
. 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
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.
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.
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
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
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.
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.