CI/CD for Angular Universal SSR with GitHub Actions

Lint, test, and build both halves of your Angular SSR app on every push.

Angular Universal (now @angular/ssr) builds a browser bundle plus a Node server bundle so pages render on the server. This recipe validates the app, builds both outputs, and ships the server.

What the pipeline does

install deps with npm ci
lint with ng lint
run unit tests headless with ChromeHeadless
build SSR with ng build
deploy the dist server bundle

The workflow

ng build emits dist/<app>/browser and dist/<app>/server. The server entry runs under Node and serves the prerendered shell plus dynamic routes.

.github/workflows/ci.yml

name: CI
on:
  push:
    branches: [main]
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint --if-present
      - run: npm test -- --watch=false --browsers=ChromeHeadless
      - run: npm run build
      - uses: actions/upload-artifact@v4
        with:
          name: ssr-dist
          path: dist

Caching and speed

cache: npm restores installs and the Angular build cache lives in .angular/cache, which you can persist with actions/cache keyed on package-lock.json. SSR builds are heavy; running them on cheaper managed runners such as Latchkey (around 69% cheaper than GitHub-hosted) keeps PR feedback fast, and their auto-retry shrugs off transient npm registry blips.

Deploying

Run node dist/<app>/server/server.mjs on a VM, container, or platform that supports a Node server (Render, Fly, Cloud Run). Put a CDN in front to cache the static browser assets under dist/<app>/browser.

Key takeaways

ng build emits both a browser bundle and a Node server bundle.
Run Karma tests with --watch=false and ChromeHeadless in CI.
Persist .angular/cache to speed incremental builds.