Deploying angular-seed to Heroku

My AngularJS landing page

AngularJS is a cool framework for enhancing HTML code enabling you to easily build dynamics apps. Some of the coolest features are Two way Binding and Dependency Injection service. Another useful thing Angular Community has is the angular-seed repository, a project skeleton for you to build uppon.

Since I had been studying AngularJS for the last two weeks I decided to try it on my new startup idea. After cloning the angular-seed project on GitHub, I spend some time to get it up and running on Heroku. After figuring it out I decided log the solution for future self and others.

Step by Step

Two important warnings:
→ This step by step process was made on a Mac but it should work on any platform with minor changes.
→ This is in no instance an attempt to find the best way, it’s simply how I did it.

Before starting, make sure you have the Heroku Toolbelt installed and configured.

First create a Procfile, the file that tells Heroku what your application is, with the command:

 $ echo “web: scripts/web-server.js” > Procfile 

After that you should be able to run Foreman and see the web app working on http://localhost:8000/ but for now you will see a directory tree on the browser.

Now you have to mess with the ./scripts/web-server.js file. First, redirect all bad html requests to your index.html. This can be achieved by replacing the code on line 96

 fs.stat(path, function(err, stat) {
   if (err)
     return self.sendMissing_(req, res, path);
   if (stat.isDirectory())
     return self.sendDirectory_(req, res, path);
   return self.sendFile_(req, res, path);
 });

for

fs.stat(path, function(err, stat) {
  if (err){
    return self.sendRedirect_(req,res,”/app/index.html”);
  }
  if (stat.isDirectory()){
    return self.sendRedirect_(req,res,”/app/index.html”);
  }
  return self.sendFile_(req, res, path);
});

The second change to the server script is changing the DEFAULT_PORT variable to the code Heroku uses. Your line 9 should look like:

var DEFAULT_PORT = process.env.PORT;

With this changes, you should be all set. Now just code your web app using AngularJS and deploy it to Heroku.