AngularJS SPA: Deploy Bank Application To Heroku

The previous blog post we setup our application to work with Heroku locally.  In this post we will deploy our application to the live Heroku platform.

Here are the steps to deploy our application to Heroku:

1.  First we need to check in our code into a local Git repository to add our code to Git is easy first type git init

AngularJS SPA: Setup The Banking Application For Heroku And Testing It Locally

In this blog post we will setup our AngularJS SPA application for Heroku and testing it locally to make sure we got all our ducks in a row if you need a refresher for how to setup Heroku you can visit this post.  By deploying to Heroku we can access our application online making our application live.

Here are the steps to deploying the AngularJS shopping application to Heroku:

1.  Find out the node and npm version you have installed on your machine by typing in the following command

node --version
npm --version

AngularJS SPA: Setup Express To Serve Static Files

In the previous blog we setup the folder structure to use the Jade view engine just to make sure Express is working correctly.  In this blog post we are going to tell Express to serve file static files as well in our app folder.  In the previous part when we browse to http://localhost:3000 we get the "Express" index page.  Using a view engine is a preference that some people have, but I feel more comfortable developing in HTML.

AngularJS SPA: Creating The SPA Project Folder Structure

Now that we have express installed let's do a little clean up and organization by creating some folders that we need.  First of all create the models and controllers folder inside the app folder your folder should look like the following

AngularJS SPA: Installing ExpressJS Application Server

In our AngularJS SPA application we will be using the Express web server to serve up our web application.  In the previous blog post we installed the Express-generator globally.  Now we can install Express in the root folder of our SPA application.

Here are the steps to create an Express application:

1.  Open the command line prompt at the root folder of the SPA application

AngularJS SPA : Installing Express generator

In order to install the Express web server on the fly on your machine you need to install the Express generator.  Fortunately with NodeJS it is as easy as typing in a command in the command line.  This step used to install Express globally so that it will be easy for development.

Here are the steps to install Express generator globally:

1.  Open up the command line and type in the following command
     npm install -g express-generator