Deploying Angular Applications to GitHub Pages using GitHub Actions

Takahiro Iwasa

Aug 29, 2023

3 min read

GitHub GitHub Actions GitHub Pages

This post describes how to deploy Angular applications to GitHub Pages using GitHub Actions, available for free.

docs.github.com

About billing for GitHub Actions - GitHub Docs

If you want to use GitHub Actions beyond the storage or minutes included in your account, you will be billed for additional usage.

Go to your GitHub Repository, then navigate to Settings and select Pages. Choose Source: GitHub Actions.

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.

docs.github.com

Understanding GitHub Actions - GitHub Docs

Learn the basics of GitHub Actions, including core concepts and essential terminology.

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

docs.github.com

Triggering a workflow - GitHub Docs

How to automatically trigger GitHub Actions workflows

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

Configure the jobs that you want to execute in the workflow.

docs.github.com

Using jobs in a workflow - GitHub Docs

Use workflows to run multiple jobs.

actions/checkout can be used to download the source code from the repository to the workflow execution environment.

github.com

GitHub - actions/checkout: Action for checking out a repo

Action for checking out a repo. Contribute to actions/checkout development by creating an account on GitHub.

- name: Checkout
  uses: actions/checkout@v3

actions/setup-node can be used to set up Node.js in the workflow execution environment.

github.com

GitHub - actions/setup-node: Set up your GitHub Actions workflow with a specific version of node.js

Set up your GitHub Actions workflow with a specific version of node.js - actions/setup-node

- name: Setup Node.js
  uses: actions/setup-node@v3
  with:
    node-version: 18.x.x
    cache: npm

npm ci can be used to install the dependencies declared in package.json.

- name: Install
  run: npm ci

When testing Angular applications with Headless Chrome, npm run test -- --watch=false --browsers=ChromeHeadless can be used.

developer.chrome.com

Getting Started with Headless Chrome  |  Blog  |  Chrome for Developers

Getting started with Headless Chrome

- name: Test
  run: npm run test -- --watch=false --browsers=ChromeHeadless

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>/"

actions/upload-pages-artifact can be used to upload the build artifacts and make them available in the deploy job.

github.com

GitHub - actions/upload-pages-artifact: A composite action for packaging and uploading an artifact that can be deployed to GitHub Pages.

A composite action for packaging and uploading an artifact that can be deployed to GitHub Pages. - actions/upload-pages-artifact

- name: Upload Pages artifact
  uses: actions/upload-pages-artifact@v2
  with:
    path: dist/

Specify needs: build to ensure that the Deploy step is executed after the Build step.

docs.github.com

Workflow syntax for GitHub Actions - GitHub Docs

A workflow is a configurable automated process made up of one or more jobs. You must create a YAML file to define your workflow configuration.

actions/deploy-pages can be used to deploy to GitHub Pages.

github.com

GitHub - actions/deploy-pages: GitHub Action to publish artifacts to GitHub Pages for deployments

GitHub Action to publish artifacts to GitHub Pages for deployments - actions/deploy-pages

steps:
  - name: Deploy to GitHub Pages
    id: deployment
    uses: actions/deploy-pages@v2

When pushing to your main branch, GitHub Actions will be triggered.

You can see your job logs.