Continuous Deployment For Angular App Using Heroku And 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 https://cli.angular.io/
• Install Visual Studio code from https://code.visualstudio.com/
• Download and install Node.js from https://nodejs.org/en/

We are going to deploy the Angular application which I have created in my previous articles:

• Reactive Form Validation in Angular
• Template-Driven Form Validation In Angular

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

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.

const express = require('express');
const path = require('path');

const ngApp = express();

ngApp.use(express.static('./dist/angular-forms-validation'));

ngApp.get('/*', function (request, response) {
    response.sendFile(path.join(__dirname, '/dist/angular-forms-validation/index.html'));
});

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

"postinstall": "ng build  --aot --prod"

This command will build the Angular application using Ahead of Time (AOT) compiler in the 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.

"start": "ng serve",

Update this script as shown below.

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

node -v
npm -v

Refer to the image shown below.

Add the following lines of code specifying the versions of Node and NPM.

  "engines": {
    "node": "12.13.0",
    "npm": "6.12.0"
  }

Finally, the package.json file will look like below. You can also refer to the file on GitHub.

{
  "name": "angular-forms-validation",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build  --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "bootstrap": "^4.4.1",
    "express": "^4.17.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "engines": {
    "node": "12.13.0",
    "npm": "6.12.0"
  }
}

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.

git init
git add .
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.

git remote add origin https://github.com/AnkitSharma-007/angular-forms-validation
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 https://www.heroku.com/ and signup for Heroku. Login using your credentials and you will be navigated to your personal dashboard. Click on the New button at the top right corner of the dashboard. Select “Create new app” option. Refer to the image below.

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.

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.

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.

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.

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

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.

You can access the app which we have deployed here at https://ng-forms-validation.herokuapp.com/

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 this article at C# Corner

See Also

• Understanding Angular Animation
• Localization In Angular Using i18n Tools
• Hosting A Blazor Application on Firebase
• Policy-Based Authorization In Angular Using JWT
• Facebook Authentication And Authorization In Server-Side Blazor App