Deploying angular-seed to Heroku

heroku-LogoAngular-seed is an application skeleton for AngularJS apps. It helps you to quickly bootstrap new applications. I’m currently using it for an app I’m writing and wanted to deploy that to Heroku for testing. Since that wasn’t a very straightforward process, I thought I’d share my experiences here.

If you’re reading this, you’ve probably already cloned the repo from https://github.com/angular/angular-seed and wrote the app. Of course you can also just deploy the sample app that comes with angular-seed, but you’ll need to make a couple of changes to prepare it for Heroku.

bower-logoBower

Angular-seed uses bower (check package.json: it’s already listed there as a devDependency), but in order for Heroku to use it, we’ll need to add it to the dependencies section too:

npm install bower --save

We also need to update the path to bower in package.json:

"postinstall" : "./node_modules/bower/bin/bower install",

Express as a web server

Angular-seed uses http-server as the web server to test your changes, but I didn’t find a way to use that on Heroku. Instead, I just add a simple Express based static files server.

First we’ll add Express as a node module:

npm install express --save

Next create a new file in the root of your project named app.js to serve static files from angular-seed’s app folder:

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/app'));
app.listen(process.env.PORT || 3000);

Define a Procfile

We need to tell Heroku what it needs to do to start your app: create a file named Procfile in the root of your project and add:

web: node app.js

This tells Heroku to launch node using the app.js file.

Heroku

We’re ready to push our app to Heroku. Log in to Heroku and create an app. Install the Heroku toolbelt on your computer so we can call heroku commands from the command line.

To send your project to Heroku, we’ll need to add Heroku as a git remote

heroku git:remote -a <your_app_name>

Next, commit all the changes we’ve made in the local project and send your project to Heroku:

git add .
git commit
git push -u heroku master

In the terminal you’ll see your app being deployed, compiled and started on Heroku. You can now view it using the shortcut command ‘heroku open‘.

Screen Shot 2014-10-07 at 15.55.53

There are probably different ways to do this, but this method worked for me. Please let me know if this worked for you too or if you would do it different!

18 thoughts to “Deploying angular-seed to Heroku”

  1. wow, its works like at charm. Spent hours of trying other tutorials to work. But this one took me 3mins and angularjs is now running. Thanks a bunch!

  2. Only thing is, its not running on localhost. I need to edit package.json and revert back

    “postinstall” : “./node_modules/bower/bin/bower install”
    into
    “postinstall” : “bower install”

    everytime i run localhost.

    1. Good point. The npm startcommand only seems to call npm install and bower install and then start a local http server (using http-server), so how about running bower install manually and start the server the same way Heroku does using node app.js ?

  3. Thanks! I tried multiple things but nothing worked… until I landed on your website. You saved me from my misery 😀

  4. Thank you very very much, after hours of searching the web for a tutorial that would work, I finally found this and it works.

  6. Ah! Thank you so much for this! Finally got my angular-seed project deployed to heroku. Had been struggling for way too long … just could not figure out why it would deploy more or less successfully, but never actually start. Thank you again!

  7. I’ve spent so bloody long trying to get this to work with Angular Js app and this tutorial worked perfectly! Thanks!

  9. Hi Experts
    I have to deploy angular-seed project on Microsoft Azure. I am trying to create web-app on Azure and trying to link with bit bucket but continuously getting deployment fail.
    Can anyone help me with that

  10. Hi Mark.Thanks for your article.I used your approach to deploy to Heroku my little application which uses Angular Seed. Now it opens on heroku domain, however it doesn’t display anything for ng-view directive. Is it how heroku works with angular applications? Probably you could suggest something?
    Thanks in advance!

    1. Hi,

      The page can’t load any of the files from the /bower_components/ folder, so either the dependencies in your bower.json aren’t up to date (maybe some are missing?) or the ‘postinstall’ script that is supposed to install all bower dependencies doesn’t run. If the app runs fine on your local machine (after a ‘bower install’), it’s probably the latter.

      Regards,
      Mark

  11. Hi Mark,

    After spending the last two weekends failing to get a gulp based project to deploy on heroku I finally managed to deploy successfully using your guide. Thank you very much for this guide!

    Paddy

  13. I spent nearly 5 hours trying a different tutorial, and your’s worked within 5 minutes. THANK YOU.

Comments are closed.