How to Deploy Angular application on Heroku hosting with Git repository

https://ozenero.com/frontend/angular/angular-deployment/how-to-deploy-angular-application-on-heroku-hosting-with-git-repository

How to Deploy Angular application on Heroku hosting with Git repository

In the tutorial, we show you how to automatically deploy Angular application on Heroku hosting with Git repository.

Related post:
– Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technologies

– Angular
– Git
– Heroku

Goal

We use Heroku Hosting to deploy Angular application ->

– Video guide ->

Practice

Create Heroku App

Login to Heroku, and create an app ozenero-angular-app:

Commit Angular to Git Repository

– Create an Git repository: angularheroku.

– Download sourcecode & unzip:

wget "https://ozenero.com/wp-content/uploads/2018/12/AngularDynamicRoutes-2.zip"
unzip AngularDynamicRoutes-2.zip

– Commit Angular application to Git repository:

git init
git remote add origin https://github.com/ozenero/angularheroku.git
git add .
git commit -m "initial commit"
git push -u origin master

*Note: We don’t push the node_modules, in .gitignore we have:

# dependencies
/node_modules

Integrate Heroku with GitHub

On Heroku ozenero-angular-app, choose GitHub for deployment method.

Then do an authorized ->

Search an GitHub repository, then do a connection:

– Enable Automatic Deploys (select the master branch):

– To push our fresh code to Heroku, under Manual Deploys, click Deploy Branch button:

-> Results:

-> We got Error, need some configure Angular App to deploy properly on Heroku.

Configure for Heroku deployment

Install latest version of Angular CLI & Angular Compiler CLI

Use cmd:

npm install @angular/cli@latest @angular/compiler-cli --save-dev

In package.json file, copy @angular/cli & @angular/compiler-cli from devDependencies to dependencies:

"@angular/cli": "^7.1.2",
"@angular/compiler-cli": "^6.1.10"

Create PostInstall Script

In package.json file, under scripts, add a postinstall command:

"scripts": {
	...
    "postinstall": "ng build --output-path angularapp  --aot --prod"
},

Add Node & NPM Engines

Heroku need Node & NPM engines to run our Angular application, so:

Run cmd $node -v & npm -v -> Output:

$ node -v & npm -v
v8.11.4
5.8.0

Add below element to package.json file:

"engines": {
	"node": "v8.11.4",
	"npm": "5.8.0"
},

Add Typescript

Copy "typescript": "~2.7.2" from devDependencies to dependencies.

Install Express Server

Heroku need an Express server to run our production ready app. -> Install Express server:

npm install express path --save

And create a server.js file in the root of the application with below code:

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the angularapp directory
app.use(express.static(__dirname + '/angularapp'));

app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'/angularapp/index.html'));
});

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

*Note: angularapp is the output-path directory of Angular production building image.

Start Command

In package.json, change start cmd to:

"start": "node server.js"

Full package.json File

After update the change, here is the full package.json file:

{
  "name": "angular-dynamic-routes",
  "version": "0.0.0",
  "engines": {
    "node": "v8.11.4",
    "npm": "5.8.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --output-path angularapp  --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.2",
    "@angular/cli": "^7.1.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "core-js": "^2.5.4",
    "express": "^4.16.4",
    "path": "^0.12.7",
    "rxjs": "^6.0.0",
    "typescript": "~2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.3",
    "@angular/cli": "^7.1.2",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/language-service": "^6.0.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Re-Deployment

Push the change to GitHub:

git add .
git commit -m "updates to deploy to heroku"
git push

-> Wait a minutes for Heroku taking the change from GitHub and automatically re-build the sourcecode.

In the browser, navigate to https://ozenero-angular-app.herokuapp.com. Result:

Sourcecode

AngularDynamicRoutes