Deploy Angular Applications to GitHub Pages with GitHub Actions

Takahiro Iwasa

Aug 29, 2023

3 min read

GitHub GitHub Actions GitHub Pages

This guide will walk you through deploying Angular applications to GitHub Pages using GitHub Actions, a powerful CI/CD tool available for free.

To get started, go to your GitHub Repository:

1. Navigate to Settings > Pages.
2. Select Source: GitHub Actions.

Create a workflow file in your repository at /.github/workflows/deploy.yaml with the following content:

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

• Trigger: This workflow triggers on pushes to the main branch (line 6).
• Node.js Setup: Installs Node.js version 18 with caching for npm (lines 14-18).
• Base URL: Ensure the --base-href parameter matches your GitHub Pages URL (line 24).

Checkout the Repository

Use actions/checkout to download your repository to the workflow environment:

- name: Checkout
  uses: actions/checkout@v3

Set Up Node.js

Set up Node.js in the workflow environment using actions/setup-node:

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

Install Dependencies

Install dependencies using npm ci:

- name: Install
  run: npm ci

Run Tests

Run Angular tests with Headless Chrome:

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

Build the Application

Build the Angular application and include the base URL for GitHub Pages:

- name: Build
  run: npm run build -- -c production --base-href "https://<YOUR_GITHUB_USER_NAME>.github.io/<YOUR_REPOSITORY>/"

Upload Artifacts

Use actions/upload-pages-artifact to make build artifacts available for deployment:

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

Ensure the deploy job waits for the build job to complete by specifying needs: build.

deploy:
    needs: build

Deploy Pages

Use actions/deploy-pages to deploy the Angular application as GitHub Pages.

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

When you push to the main branch, GitHub Actions will trigger automatically. Check your job logs for detailed information.

Deploying Angular applications to GitHub Pages is seamless with GitHub Actions. Automating the deployment process ensures consistency and reduces manual effort. Follow this guide, and enjoy streamlined deployment workflows.

Happy Coding! 🚀