Angular-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.
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.
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 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‘.
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”
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!
Great to hear! Glad I could help 🙂
Only thing is, its not running on localhost. I need to edit package.json and revert back
“postinstall” : “./node_modules/bower/bin/bower install”
“postinstall” : “bower install”
everytime i run localhost.
Good point. The
npm startcommand only seems to call
bower installand then start a local http server (using http-server), so how about running
bower installmanually and start the server the same way Heroku does using
Thanks! I tried multiple things but nothing worked… until I landed on your website. You saved me from my misery 😀
Thank you very very much, after hours of searching the web for a tutorial that would work, I finally found this and it works.
Thanks! Worked a treat and saved me a headache.
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!
I’ve spent so bloody long trying to get this to work with Angular Js app and this tutorial worked perfectly! Thanks!
Thanks so much for this. Really clear and straightforward.
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
I have absolutely no idea. Maybe you can ask the question on StackOverflow?
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!
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.
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!
You’re welcome. Great to hear this guide is still relevant two years after writing it!
Works like a charm! 🙂
I spent nearly 5 hours trying a different tutorial, and your’s worked within 5 minutes. THANK YOU.
Comments are closed.