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




the version you have installed on your machine is probably different



2.  Now open the package.json file and add the lines in bold the "engines" section, which tells Heroku that our application is a Node application in the path C:\Program Files\heroku\client















{
  "name": "bankapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "engines": {
     "node": ">=10.14.1",
     "npm":">=6.4.1"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "express": "~4.14.1",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.2"
  }
}

3.  We can now create the Procfile to tell Heroku how to start the application, the Procfile type in the line

web: npm start

Don't type anything else.  Your application folder should look like the following now

4. Before we push it to Heroku let's test it locally with the Heroku toolbelt by typing in the command heroku local web in the root directory

Now open the browser and type http://localhost:5000

You should see the same thing on your browser

If you get to this stage that means your Heroku setup is correct and you are ready to push your application to the Heroku hosting service.


Posts In The AngularJS SPA Application Series:

1. Setting Up Angular-Seed
2. Preparing Angular-Seed For The Shopping List Application
3. Refactor Code to Not Use Global Variables (Shopping List App)
4. Installing MongoDB
5. Create a MongoDB Configuration FIle
6. Install mongoDB as a Windows Service
7. Installing Express generator
8. Installing ExpressJS Application Server
9. Creating The SPA Project Folder Structure
10. Setup Express To Serve Static Files
11. Setup The Shopping Application For Heroku And Testing It Locally
12. Deploy Shopping List Application To Heroku
13. Install RoboMongo GUI for MongoDB