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:
- Only running the workflow when code was pushed to the
master
branch - Using a newer version of Node, since Node 8 is out of date
This led to two more blog posts:
- Deploy your projects to Github Pages with GitHub Actions by pierresaid, also here on Dev Community.
- 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.
-
Only running the build on
master
branch
on: push: branches: - master
-
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'
-
-
Using
ubuntu-latest
instead of a specific version
build: runs-on: ubuntu-latest
-
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
- Remove the BUILD_SCRIPT parameter and move it to a separate step.
-
Change them to a separate step that accomplishes the following:
- Ensure the Angular CLI is available
- Download all dependencies
-
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.
Top comments (0)