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: