Deploying Angular Applications to GitHub Pages using GitHub Actions
This post describes how to deploy Angular applications to GitHub Pages using GitHub Actions, available for free.
GitHub Repository Settings
Go to your GitHub Repository, then navigate to Settings and select Pages. Choose Source: GitHub Actions.
Workflow Configuration
Add /.github/workflows/deploy.yaml to your repository like the following content. The filename can be anything else. For more information on Workflows, please refer to the official documentation.
Workflow triggers are configured in lines from 3 to 6. This post uses main branch as the trigger. For more information on Workflow Triggers, please refer to the official documentation
name: Deploy Angular application
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-22.04
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x.x
cache: npm
- name: Install
run: npm ci
- name: Test
run: npm run test -- --watch=false --browsers=ChromeHeadless
- name: Build
run: npm run build -- -c production --base-href "https://<YOUR_GITHUB_USER_NAME>.github.io/<YOUR_REPOSITORY>/"
- name: Upload Pages artifact
uses: actions/upload-pages-artifact@v2
with:
path: dist/
deploy:
needs: build
permissions:
repository-projects: read
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-22.04
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
Jobs Configuration
Configure the jobs that you want to execute in the workflow.
Build Job Configuration
Checkout
actions/checkout can be used to download the source code from the repository to the workflow execution environment.
- name: Checkout
uses: actions/checkout@v3
Setting up Node.js
actions/setup-node can be used to set up Node.js in the workflow execution environment.
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x.x
cache: npm
Installing Dependencies
npm ci can be used to install the dependencies declared in package.json.
- name: Install
run: npm ci
Testing Angular Applications
When testing Angular applications with Headless Chrome, npm run test -- --watch=false --browsers=ChromeHeadless can be used.
- name: Test
run: npm run test -- --watch=false --browsers=ChromeHeadless
Building Angular Applications
When building Angular applications, npm run build can be used. Please make sure to include your GitHub Pages URL by --base-href parameter.
- name: Build
run: npm run build -- -c production --base-href "https://<YOUR_GITHUB_USER_NAME>.github.io/<YOUR_REPOSITORY>/"
Uploading Build Artifact
actions/upload-pages-artifact can be used to upload the build artifacts and make them available in the deploy job.
- name: Upload Pages artifact
uses: actions/upload-pages-artifact@v2
with:
path: dist/
Deploy Job Configuration
Waiting for Build Job Completion
Specify needs: build to ensure that the Deploy step is executed after the Build step.
Deploy Configuration
actions/deploy-pages can be used to deploy to GitHub Pages.
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
Deploying
When pushing to your main branch, GitHub Actions will be triggered.
You can see your job logs.
