Setup Continuous Deployment for Angular App on GitHub Pages using GitHub Actions

This is a comprehensive guide not just to configure your GitHub action but to also understand what happens in each step.

This article will introduce how to have a continuous build-and-deploy workflow for Angular applications. Using the Angular CLI, GitHub Actions and GitHub pages, it has never been easier to deploy your Angular application. With this useful feature called GitHub Actions, there is no excuse not to deploy your applications on GitHub pages in such an easy and fast way. Let’s get started and breeze through this continuous deployment workflow.

Let us perform the following steps in your GitHub repository where you have your application ready for deployment.

Create a new branch and set it as default for GitHub pages in the settings

Create a new branch named “contDeploy” and remove all the files from this branch. See image below

Create a new branch named “contDeploy”

Now to remove all files from this branch, run the following commands one by one in your git CLI for your local repo. Following commands might take a while to complete.

• git fetch origin contDeploy
• git checkout contDeploy
• git rm -rf .
• git add .
• git commit -m “empty branch for deployment”
• git push

Go to the settings tab and select “contDeploy” as branch and folder as /(root) inside the GitHub Pages section

Set “contDeploy” as default for Github Pages

Command to make build for production deployment

Now we have to configure an npm command named “build-prod” in package.json file under scripts, that allows us to perform the prod build step to be used later. Our command should define build mode and the address of the project.

"build-prod": "ng build --prod --baseHref='https://<GITHUB_USERNAME>.github.io/<REPO_NAME>"

My command looks like this in package.json file.

"build-prod": "ng build --prod --baseHref='https://Sarthak-Mittal.github.io/angular-cd/'"

Now, we have all the pre-requisites ready. Let’s understand step-by-step how to configure continuous deployment action. If you have worked previously with .YML/.YAML files, you must already know that you have to be careful with indentation, blank or tabulated spaces because if the file is not perfectly aligned, you will have problems.

This script we will be making can be simplified into 3 sections:

1. name : Name of the action
2. on : The trigger for the action
3. jobs : Defines where and what to do

Here go the first 2 sections:

name : The name of the action to be able to identify it from other actions that we configure.

on : When should this action be triggered? In this example, our action runs whenever we push to the master branch. We can configure this to run for more scenarios like pull requests and for other branches.

jobs : This section defines the tasks that will be carried out in our action. Here, we will run our jobs using a Ubuntu Linux environment

Here we are defining the node version we are using for the angular project. It is like defining a variable named node-version to the value 12.x. You should set the node version here as per your requirement.

From here starts the interesting section of our script called steps. In this, we will define the sequence of steps that we want this script to perform. There, we will define all the tasks from setup to deployment.

Note: GitHub actions allow you to use actions created by a third party. You can simply use them just mentioning it against uses key and parameterizing it as per your third party action.

In the above step, first, we are performing the check-out operation from our GitHub repository. This is in all means similar to the command git checkout to the workspace of our GitHub Actions. In the second step, we are setting up node with the version we have defined previously.

This step is optional, here we are caching the node modules used in our application. Since it is slow to reinstall our packages with each build. This step tracks our package-lock.json for any changes. If no differences are found, it uses npm cache from the previous build. This way we can optimize our build speed.

As the name suggests, we are building our application in prod mode. npm ci (named after Continuous Integration) installs dependencies directly from package-lock.json. The commandnpm run ‘build-prod’runs the build-proddefined in your package.json file which we have already configured above.

This the final step, it deploys the static files built in the previous step to the branch as defined.

Here, we need to configure a token of security to access our repository for deployment. This token is your hashed credentials which GitHub uses to deploy files to GitHub pages. You can paste your <ACCESS_TOKEN> against github_access_token and if you don’t have it yet, follow this to get your <ACCESS_TOKEN>.

Mention name of your repository against ‘base_href’ as “/<REPO_NAME>/”

Mention the name of the branch we created above for deployment, in our case, it is “contDeploy”.

Mention just the folder name where your final build files can be found against ‘angular>dist>build>folder’. Which is defined in angular.json file against “outputPath” under project>architect>build>options.

Mine looks like: “outputPath”: “docs/”

This is the final script, Check out the full working demo repo! Do clap and share if you found this useful.