How to Deploy Angular application on Heroku hosting with Git repository

deploy-angular-application-on-heroku-hosting---feature-image

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

deploy-angular-application-on-heroku-hosting---deployment-successfully

– Video guide ->

Practice

Create Heroku App

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

deploy-angular-application-on-heroku-hosting-create-app

deploy-angular-application-on-heroku-hosting-create-app-step-2

Commit Angular to Git Repository

– Create an Git repository: angularheroku.

– Download sourcecode & unzip:

– Commit Angular application to Git repository:

deploy-angular-application-on-heroku-hosting---push-sourcecode-to-git

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

Integrate Heroku with GitHub

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

deploy-angular-application-on-heroku-hosting-create-connect-to-github-for-deployment

Then do an authorized ->

deploy-angular-application-on-heroku-hosting-create-connect-to-github-for-deployment-authentication

Search an GitHub repository, then do a connection:

deploy-angular-application-on-heroku-hosting-match-angular-app-with-git-repo-1

deploy-angular-application-on-heroku-hosting-create-connect-to-github-for-deployment-connect-to-git-project

– Enable Automatic Deploys (select the master branch):

deploy-angular-application-on-heroku-hosting-create-connect-to-github-for-enable-automic-deploy

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

deploy-angular-application-on-heroku-hosting-create-connect-to-github-for-deployment-deploy-brand

-> Results:

deploy-angular-application-on-heroku-hosting---deploy-manual-step-build-okie

deploy-angular-application-on-heroku-hosting---error-deployment

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

Create PostInstall Script

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

Add Node & NPM Engines

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

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

Add below element to package.json file:

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:

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

Re-Deployment

Push the change to GitHub:

deploy-angular-application-on-heroku-hosting---re-commit-to-github

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

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

deploy-angular-application-on-heroku-hosting---deployment-successfully

Sourcecode

AngularDynamicRoutes

By grokonez | December 9, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*