Hosting Angular App On Heroku With CD From GitHub

Introduction

 
In this article, we will learn how to host an Angular app on Heroku. We will configure Continuous Deployment (CD) for our application using Heroku and GitHub. This will allow our app to be published automatically whenever we push the new code to the GitHub repository.
 
Prerequisites
  • Install the latest version of Angular CLI from here
  • Install Visual Studio code from here
  • Download and install Node.js from here
We are going to deploy the Angular application which I have created in my previous articles mentioned below.
You can get the application source code from GitHub
 

What is Continuous Deployment (CD)?

 
Continuous Deployment is a software development practice that automates the deployment of the application. Once the developer merges their code to the repository, the build process will kick in, which will execute the automated tests and then deploy the application to the production stage. This is a completely autonomous process and does not require any manual intervention.
 

What is Heroku?

 
Heroku is a container-based cloud Platform as a Service (PaaS) that lets companies build, deliver, monitor and scale apps. Developers use Heroku to deploy, manage, and scale modern apps. Heroku claims that their platform is elegant, flexible, and easy to use, offering developers the simplest path to getting their apps to market. It provides support for a variety of languages such as Node, Ruby, Java, PHP, Python, GO, etc. You can read more about Heroku at the official website
 

Install Express server

 
Heroku needs an express server to run our Angular application in production mode. Open a command window in the root folder of the Angular application. Execute the following command to install the express server.
  1. npm install express --save  
Now create a new JavaScript file in the root folder of the application and name it as server.js. Open the server.js file and put the following code into it
  1. const express = require('express');  
  2. const path = require('path');  
  3.   
  4. const ngApp = express();  
  5.   
  6. ngApp.use(express.static('./dist/angular-forms-validation'));  
  7.   
  8. ngApp.get('/*'function (request, response) {  
  9.     response.sendFile(path.join(__dirname, '/dist/angular-forms-validation/index.html'));  
  10. });  
  11.   
  12. ngApp.listen(process.env.PORT || 8080);  
When we build an Angular app in production mode, the build package is created in the dist folder of the application. In the code mentioned above, we are configuring the express server to run the Angular application from the dist folder. The index.html file will be the start point for our application and the app will listen on the port 8080.
 
Note
  • The file server.js must be created in the root folder of the Angular app.
  • The name server.js is not mandatory. You can use any name of your choice.

Configuring the package.json file

 
We will configure the package.json file to make it production ready for Heroku. Follow the steps mentioned below.
 
Step 1 - Add postinstall script
 
Add the following lines of code under the scripts section.
  1. "postinstall": "ng build --aot --prod"  
This command will build the Angular application using Ahead of Time (AOT) compiler in production mode.
 
Step 2 - Update the start script
 
We will update the start script under the scripts section. Currently, the start script looks like the following.
  1. "start": "ng serve",  
Update this script as shown below to run the server.js file.
  1. "start": "node server.js",  
This command will be used by Heroku to run our application in production mode using the express server.
 
Step 3 - Add Node and NPM engines
 
We need to specify the Node and NPM engines which will be used by Heroku to run our application.
 
Get the version of Node and NPM installed in your machine by executing the command shown below
  1. node -v  
  2. npm -v  
Refer to the image shown below.
 
Hosting Angular App On Heroku With CD From GitHub
 
Add the following lines of code specifying the versions of Node and NPM.
  1. "engines": {  
  2. "node""12.13.0",  
  3. "npm""6.12.0"  
  4. }  
Finally, the package.json file will look like below. You can also refer to the file on GitHub
  1. {  
  2.   "name""angular-forms-validation",  
  3.   "version""0.0.0",  
  4.   "scripts": {  
  5.     "ng""ng",  
  6.     "start""node server.js",  
  7.     "build""ng build",  
  8.     "test""ng test",  
  9.     "lint""ng lint",  
  10.     "e2e""ng e2e",  
  11.     "postinstall""ng build  --aot --prod"  
  12.   },  
  13.   "private"true,  
  14.   "dependencies": {  
  15.     "@angular/animations""~8.2.3",  
  16.     "@angular/common""~8.2.3",  
  17.     "@angular/compiler""~8.2.3",  
  18.     "@angular/core""~8.2.3",  
  19.     "@angular/forms""~8.2.3",  
  20.     "@angular/platform-browser""~8.2.3",  
  21.     "@angular/platform-browser-dynamic""~8.2.3",  
  22.     "@angular/router""~8.2.3",  
  23.     "bootstrap""^4.4.1",  
  24.     "express""^4.17.1",  
  25.     "rxjs""~6.4.0",  
  26.     "tslib""^1.10.0",  
  27.     "zone.js""~0.9.1"  
  28.   },  
  29.   "devDependencies": {  
  30.     "@angular-devkit/build-angular""~0.803.0",  
  31.     "@angular/cli""~8.3.0",  
  32.     "@angular/compiler-cli""~8.2.3",  
  33.     "@angular/language-service""~8.2.3",  
  34.     "@types/node""~8.9.4",  
  35.     "@types/jasmine""~3.3.8",  
  36.     "@types/jasminewd2""~2.0.3",  
  37.     "codelyzer""^5.0.0",  
  38.     "jasmine-core""~3.4.0",  
  39.     "jasmine-spec-reporter""~4.2.1",  
  40.     "karma""~4.1.0",  
  41.     "karma-chrome-launcher""~2.2.0",  
  42.     "karma-coverage-istanbul-reporter""~2.0.1",  
  43.     "karma-jasmine""~2.0.1",  
  44.     "karma-jasmine-html-reporter""^1.4.0",  
  45.     "protractor""~5.4.0",  
  46.     "ts-node""~7.0.0",  
  47.     "tslint""~5.15.0",  
  48.     "typescript""~3.5.3"  
  49.   },  
  50.   "engines": {  
  51.     "node""12.13.0",  
  52.     "npm""6.12.0"  
  53.   }  
  54. }  

Pushing the code to GitHub

Create a new repository on GitHub. Here I have created the repository with name angular-forms-validation. Navigate to the application root folder and open a command window. Execute the following set of commands to commit the code to your repository.
  1. git init  
  2. git add .  
  3. git commit -m "configure Heroku build"  
Get the URL of your repository from GitHub. Here the URL is https://github.com/AnkitSharma-007/angular-forms-validation. Now run the following set of commands to push the code to GitHub. Replace the URL with your own repository URL.
  1. git remote add origin https://github.com/AnkitSharma-007/angular-forms-validation  
  2. git push -u origin master  
We have successfully pushed the code to GitHub. Now we will configure the Heroku.
 

Create a new Heroku app

 
Navigate to here and signup for Heroku. Login using your credentials and you will be navigated to your personal dashboard. Click on the New button on the top right corner of the dashboard and select “Create new app”. Refer to the image below.
 
Hosting Angular App On Heroku With CD From GitHub
 
On the next page, put a unique name for your app. Choose a region of your choice and click on “Create app” to create a new Heroku app. Refer to the image below.
 
Hosting Angular App On Heroku With CD From GitHub
Important Note
  • The name of your app should be globally unique. If your app name is already taken, then you will get an “app not available” error message.
  • The maximum length allowed for the app name is 30 characters.

Connect your Heroku app to GitHub

 
Once the Heroku app is created successfully, you will be navigated to the app dashboard page. Under the “Deploy” tab, click on the “GitHub” option under the “Deployment method” section. Then click on the “Connect to GitHub” button at the bottom. Refer to the image shown below.
 
Hosting Angular App On Heroku With CD From GitHub
 
Upon successful connection with GitHub, it will ask you to connect to a repository. Enter the name of your repository and click on search. Once the name of your repository appears, click on the Connect button. Refer to the image shown below.
 
Hosting Angular App On Heroku With CD From GitHub
 

Configure the Heroku app for continuous deployment

 
To enable your Heroku app for CD, select the master branch under the “Automatic deploys” section. Click on the “Enable Automatic Deploys” button. If you have configured any integration service for your repo then select the “Wait for CI to pass before deploy”. Under the Manual deploy section, select the master branch and click on the “Deploy Branch” button. This will deploy the current state of the master branch.
 
Refer to the image shown below.
 
Hosting Angular App On Heroku With CD From GitHub
 
As you click on the “Deploy Branch” button, Heroku will start building and deploying your app. You can see the output build window in the Manual deploy section. Refer to the image shown below.
 
Hosting Angular App On Heroku With CD From GitHub
 
If the deployment is successful, you will get a success message as “Your app was successfully deployed”. Click on the view button to open the app in a new tab. You can see the screen as shown below.
 
Hosting Angular App On Heroku With CD From GitHub
 
You can access the app which we have deployed here at here.
 
The manual deploy is done only while deploying the app for the first time. After the first deployment, whenever we update the code and push it to the GitHub repository, the automatic deployment will kick-off. You can monitor the deployment progress in the “Activity” tab of your app dashboard.
 

Summary

 
We learned how to configure an Angular application for deployment on Heroku. We have also configured continuous deployment for our application on Heroku using GitHub. Continuous deployment is a software development practice that allows automatic deployments whenever a new code is pushed into the repository. This is a completely autonomous process and doesn’t require any manual intervention.
 
You can also read other articles at my blog
 

See Also

Recommended Ebook

Angular 4.0 - A Complete Study Guide

Download Now!
Similar Articles