Tech Junkie Blog: AngularJS SPA Part 11: Setup The Shopping 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.
  • 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

    {
      “name”: “shoppingspa”,
      “version”: “0.0.0”,
      “private”: true,
      “scripts”: {
        “start”: “node .

  • 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 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:

    Setting Up Angular-Seed
    Preparing Angular-Seed For The Shopping List Application
    Refactor Code to Not Use Global Variables (Shopping List App)
    Installing MongoDB
    Create a MongoDB Configuration FIle
    Install mongoDB as a Windows Service
    Installing Express generator
    Installing ExpressJS Application Server
    Creating The SPA Project Folder Structure
    Setup Express To Serve Static Files
    Setup The Shopping Application For Heroku And Testing It Locally
    Deploy Shopping List Application To Heroku
    Install RoboMongo GUI for MongoDB


@techjunkiejh: #AngularJS SPA Pt 11: Setup The Shopping 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

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

  “name”: “shoppingspa”,

  “version”: “0.0.0”,

  “private”: true,

  “scripts”: {

    “start”: “node ./bin/www”

  “engines”: {

      “node”: “~5.11.0”,

  “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

Tech Junkie Blog: AngularJS SPA Part 11: Setup The Shopping Application For Heroku And Testing It Locally

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.