How to deploy an angular app on GitHub Pages using GitHub Actions

In this article, I will explain - how to setup GiHub Actions workflow for your angular app.

Initially, I wrote an article about how to deploy an Angular application on GitHub Pages. You can find link here. I have used angular-cli-ghpages to deploy the application on GitHub Pages.

The Problem

Everything is good but whenever I add some features or some changes in my angular app, then every single time, I had to redeploy the corresponding changes to that GitHub Page manually.

Possible Solution

Since GitHub Actions is available now then why not use its functionality and get rid of manual work of deploying the app again and again.

GitHub Actions

GitHub Actions is a new feature to GitHub. It makes easy to automate the software workflow. You can use it to build, test and deploy your code right from GitHub. For more information, you can visit this link https://github.com/features/actions

Steps to Setup

1. Have or Push your angular app in github

It is necessary and you probably know that.

2. Create a GitHub Token

In order to set up workflow, it is necessary to set up a secret for the workflow. For it, you need to create a GitHub Token

1. First login to https://github.com

2. Go to https://github.com/settings/profile

3. Now click on to the Developer settings

4. Click on Personal access tokens and generate a token

Now you have got the access token, copy it and save it somewhere.

3. Create a secret in the your angular repo

Now its time to create a secret in your angular app repository.

1. Go to your repository Settings

2. Click on Secrets

3. Click on Add new secret

4. Put ACCESS_TOKEN for name and your github token that you had copy as value. Now click on Add secret button. A secret with name ACCESS_TOKEN is saved in your repository.

4. Set up your workflow

Now comes the main part - in your repository's Action tab, set up workflow using these code

main.yaml

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 8.15.1
        uses: actions/setup-node@v1
        with:
          node-version: 8.15.1
      - name: Build and Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v2
        env:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages
          FOLDER: dist/ang-website
          BUILD_SCRIPT: npm install && npm run build -- --prod

I am using JamesIves/github-pages-deploy-action app to build and deploy the build to GitHub Pages.

The base branch is master. Any commit push to master branch will start build process. It will deploy the build from dist/ang-website folder to gh-pages branch.

Note: I am using angular version 7, so build of the app is compiled to the dist/ang-website folder. Here ang-website is my angular app name. If you are using angular version 5 or less, then build will be compiled to dist.

You can go to Settings of repository and verify whether it is deployed or not by clicking website url under GitHub Pages section.

That's all.

This is a one-time setup. Whenever a new commit is pushed to the master branch in your angular app repo, the build process will start automatically and deploy the changes to the gh-pages branch and changes will be live within a few seconds.

I hope you like the article.

Keep Learning and Keep building!!!

Updates : You can find demo of this article here https://github.com/uxworks-org/workflows-demo