Deploying an Angular 8 app to GitHub Pages using Actions

I've been writing my first real Angular application, a personal project, and needed to have it automatically deploy. GitHub Pages was a good free option as the project was already on GitHub.

I had manually deployed my Angular 8 project using the angular-cli-ghpages and learned to use the repository name with the base-href parameter in order for the application to load correctly on GitHub Pages.

The next step was to have it to be automatically deployed, which led me to GitHub Actions.

(If you just want the final result, you can skip to the bottom)

Setting up the initial GitHub Actions workflow

Never having used GitHub Actions before, I sought out a tutorial to assist me. The first one I found was this blog post, How to deploy an angular app on GitHub Pages using GitHub Actions by Amrish Kushwaha.

Follow that excellent introduction first to configure the proper tokens and secrets in Github and create the initial workflow in GitHub Actions.

Updating the workflow

From the initial workflow, I had a couple of other requirements:

1. Only running the workflow when code was pushed to the master branch
2. Using a newer version of Node, since Node 8 is out of date

This led to two more blog posts:

1. Deploy your projects to Github Pages with GitHub Actions by pierresaid, also here on Dev Community.
2. Deploy Angular to Production with Github Actions, a post on KhoPhi's blog.

These posts show how to accomplish both requirements from above as well as a new trick, using ubuntu-latest instead of a specific version.

1. Only running the build on master branch
   

       on:
         push:
           branches:
             - master
   

2. Using a newer version of Node, since Node 8 is out of date

   • Turned about to be as simple as changing the node version. 😂
     

         - uses: actions/setup-node@v1 #this installs node and npm for us
           with:
             node-version: '10.x'
     

3. Using ubuntu-latest instead of a specific version
   

    build:
       runs-on: ubuntu-latest
   

4. I also updated the checkout step to v2, the latest versions, based on the script found in GitHub Marketplace, Deploy to GitHub Pages.
   

       - name: Checkout
         uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
         with:
           persist-credentials: false
   

)

Building the Angular application for deployment

• My first attempt was to modify the BUILD_SCRIPT parameter to run the build with the base-href parameter:
  

      BUILD_SCRIPT: npm install && npm run build -- --prod --base-href=/my-repository-name/`
  

Unfortunately that didn't work 😓

The answer ended up being right in front of my nose, back in the Deploy your projects to Github Pages with GitHub Actions post.

Steps for building an Angular app in GitHub Actions

1. Remove the BUILD_SCRIPT parameter and move it to a separate step.

2. Change them to a separate step that accomplishes the following:

   1. Ensure the Angular CLI is available
   2. Download all dependencies

   3. Do the Angular build with the base-href parameter
      

         - name: Build
           run: |
             npm install -g @angular/cli        
             npm install
             ng build --prod --base-href="/farming-game-calc/"
      

BOOM! 💣 My first successful automated deployment to GitHub pages!

Final Result

Here is the final version of my yaml file (in .github/workflows/)

name: Deploy to GitHub Pages

on:
  push: 
    branches:   
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
      with:
        persist-credentials: false
    - name: Use Node.js 10.x
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'
    - name: Build
      run: |
         npm install -g @angular/cli
         npm install
         ng build --prod --base-href="/farming-game-calc/"
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v2
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BASE_BRANCH: master
        BRANCH: gh-pages
        FOLDER: dist/FarmingGameNetAssetCalculator

You can find the most current version in my GitHub repo.

You can find my simple application, a calculator for the end game of The Farming Game, at [https://blairlierman.github.io/farming-game-calc]

Thank you for reading my very first blog post, all the way to the end no less.
I hope you found it helpful and were able to make it work. Tell me in the comments what you thought or if you have any questions.