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.
- 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 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.
- "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.
Update this script as shown below to run the server.js file.
- "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
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
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.
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.
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.
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
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