angular-node-express-heroku

Simple Angular 5 + Heroku quickstart application.

Theory

This project is all about the question "how to deploy Angular 5 project using Heroku".

In the root foolder you can find server.js file. This file has one purpose - it provides visitors of deployed application with static pages from dist folder. These files are created as a result of executing ng build command by Heroku.

After static files building, Heroku runs web dyno from Procfile - it launches server.js using Node.js.

When you run your app locally, you can forget about server.js. Project can be started with npm run dev script - it launches Angular live development server, code recompiles every time you make changes and save them.

Getting Started

Clone project to your computer.

$ git clone https://github.com/GitStearis/angular-node-express-heroku.git

Prerequisites

To start with this project, you should have Node installed. Project guaranteed to work with Node ^8.4.0. It already has npm, so your version must be up-to-date.

Install angular-cli globally:

$ npm install -g @angular/cli

Installing

Install packages:

$ npm install

To run client on localhost type npm run dev in root folder. You can configure scripts in package.json.

$ npm run dev

Client is up on port 4200.

Running the tests

Tests are provided by Karma. Tests of this quickstart are autogenerated by angular-cli.

Run tests with browser open:

$ ng test

Without browser...

$ npm tests

...which equals to ng test --watch=false.

Deployment

First, download and install Heroku CLI depending on your OS.

Read official guide page.

Briefly:

$ heroku login
Enter your Heroku credentials.

If you've already created project using Heroku dashboard, connect your repo to it creating remote:

$ heroku git:remote -a app-name

If you want to initialize a Heroku application from CLI:

$ heroku create
Creating app... done, app-name
$ heroku git:remote -a app-name
set git remote heroku to https://git.heroku.com/app-name.git

Deploy changes manually:

$ git push heroku master

Push to Heroku from non-master branch:

$ git push heroku develop:master

... where develop stands for the name of your local branch, master - target Heroku branch.

Ensure the app is running:

heroku ps:scale web=1
heroku open

Some hints:

• Make sure node & npm version are specified in package.json;
• Make sure package.json has heroku-postbuild script;
• Your test script has --watch=false to handle Circle CI infinite testing issue. If you are not going to use Circle CI and want to see your test results in browser window - change test script to "test": "ng test";
• Your project should provide a Procfile. more;
• If you want to auto-deploy to Heroku using Circle CI, add this to your circle.yml:

deployment:
  staging:
    branch: master
    heroku:
      appname: app-name

Built With

• npm - Package manager for JavaScript;
• Node.js - JavaScript runtime for server;
• Angular 5 - Development platform for client application;
• Heroku - Deployment platform.

Author

• George Puisha - GitStearis