Deploying an Angular 8 app to GitHub Pages using Actions
Tags: angular, github, devops
Published: 2020-02-21 16:07:56

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](https://github.com/angular-schule/angular-cli-ghpages) and learned to use the repository name with the [base-href](https://github.com/angular-schule/angular-cli-ghpages#--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](#final-result))

### 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](https://uxworks.org/how-to-deploy-angular-app-on-github-pages-using-github-actions) by [Amrish Kushwaha](https://uxworks.org/author/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](https://dev.to/pierresaid/deploy-node-projects-to-github-pages-with-github-actions-4jco) by [pierresaid](https://dev.to/pierresaid), also here on Dev Community.
2. [Deploy Angular to Production with Github Actions](https://blog.khophi.co/deploy-angular-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
    ``` yaml
        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. :joy:
        ``` yaml
            - 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
    ``` yaml
     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](https://github.com/marketplace/actions/deploy-to-github-pages).
    ``` yaml
        - 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:
    ``` yaml
        BUILD_SCRIPT: npm install && npm run build -- --prod --base-href=/my-repository-name/`
    ```

Unfortunately that didn't work :sweat: 

The answer ended up being right in front of my nose, back in the [Deploy your projects to Github Pages with GitHub Actions](https://dev.to/pierresaid/deploy-node-projects-to-github-pages-with-github-actions-4jco) 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
  1. Download all dependencies
  2. Do the Angular build with the base-href parameter 
        ``` yaml
           - name: Build
             run: |
               npm install -g @angular/cli        
               npm install
               ng build --prod --base-href="/farming-game-calc/"
        ```

BOOM! :bomb: My first successful automated deployment to GitHub pages!

###Final Result <a name="final-result"></a>

Here is the final version of my yaml file (in .github/workflows/)
``` yaml
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](https://github.com/blairlierman/farming-game-calc/blob/master/.github/workflows/main.yml).

You can find my simple application, a calculator for the end game of [The Farming Game](http://farmgame.com/product/woo-single-2/), 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.