The CI/CD + Nx Quality Gates Behind AngularUX Demos: GitHub Actions, Firebase Previews, and Non‑Negotiables for Angular 20+

A real scene from my notebook

11:42pm the night before a demo, I push a final tweak. If my pipeline lights up green, we’re on. If it’s red, it’s not shipping. That confidence comes from Nx, CI caching, and a quality gate stack that catches a11y regressions, bloated bundles, and flaky e2e before a VP ever sees the app.

2025 delivery reality

As enterprises plan 2025 Angular roadmaps, the fastest way to evaluate an engineer is to watch them ship. My AngularUX demos are built like real products: Angular 20+, Signals/SignalStore where it fits, PrimeNG components, and Firebase hosting. The pipeline measures what matters: Core Web Vitals, AA accessibility, coverage, and bundle budgets.

• Hiring teams evaluate working software, not decks.

• Demos must mirror prod constraints: performance, a11y, stability.

• Signals/SignalStore apps still need the basics: types, tests, budgets.

Tags and boundaries stop bleed-through

In demos and production, I isolate features with Nx tags and enforce boundaries so changes don’t cascade across the repo. That lets CI run affected-only checks quickly and prevents cross-domain imports that create hidden coupling.

• Domain tags: domain:analytics, domain:kiosk

• Type tags: type:ui, type:data-access, type:feature

• Scope tags: scope:demo, scope:shared

project.json with tags

{
  "$schema": "https://nx.dev/project-schema.json",
  "name": "analytics-dashboard",
  "projectType": "application",
  "sourceRoot": "apps/analytics-dashboard/src",
  "targets": { "build": { "executor": "@angular-devkit/build-angular:browser" } },
  "tags": ["domain:analytics", "type:app", "scope:demo"]
}

nx.json boundaries

{
  "extends": "nx/presets/core.json",
  "namedInputs": { "default": ["{projectRoot}/**/*", "!{projectRoot}/**/*.spec.*"] },
  "targetDefaults": {
    "build": { "cache": true },
    "test": { "cache": true }
  },
  "pluginsConfig": {
    "@nrwl/js": {
      "analyzeSourceFiles": true
    }
  },
  "workspaceLayout": { "appsDir": "apps", "libsDir": "libs" },
  "implicitDependencies": {},
  "nxEnforceProjectGraphRules": true
}

Key moves

This job catches issues early and always produces a preview URL for reviewers, recruiters, and product folks. I use GitHub Actions here, but I’ve shipped the same flow on Jenkins and Azure DevOps.

• Concurrency cancel-in-progress per branch

• Nx Cloud remote cache

• Affected lint → typecheck → test → build → e2e

• Firebase preview per PR with teardown

actions/workflows/ci.yml

name: ci
on:
  pull_request:
  push:
    branches: [ main ]
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
jobs:
  build-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - name: Nx affected - lint
        run: npx nx affected -t lint --parallel=3 --base=origin/main --head=HEAD
      - name: Typecheck
        run: npx tsc -p tsconfig.json --noEmit
      - name: Nx affected - test
        run: npx nx affected -t test --parallel=3 --ci --codeCoverage --base=origin/main --head=HEAD
      - name: Nx affected - build
        run: npx nx affected -t build --parallel=3 --base=origin/main --head=HEAD
      - name: Cypress smoke
        run: npx nx run analytics-dashboard-e2e:e2e --browser chrome --headless
      - name: Lighthouse CI
        run: npx lhci autorun --upload.target=temporary-public-storage
      - name: Pa11y AA
        run: npx pa11y-ci
      - name: Firebase Preview Deploy
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: angularux-demos
          channelId: pr-${{ github.event.number || 'local' }}
        if: always()

ESLint + TypeScript strict

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:@angular-eslint/recommended"],
      "rules": {
        "no-unused-vars": "error",
        "@typescript-eslint/no-explicit-any": "error",
        "rxjs/no-ignored-subscription": "error"
      }
    }
  ]
}

• No unused vars, imports, or implicit any

• rxjs/no-ignored-subscription

• @angular-eslint/template/no-negated-async

Angular bundle budgets

{
  "configurations": {
    "production": {
      "budgets": [
        { "type": "initial", "maximumWarning": "250kb", "maximumError": "300kb" },
        { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" }
      ]
    }
  }
}

• Fail fast when demos bloat

Lighthouse CI perf budgets

{
  "ci": {
    "collect": { "staticDistDir": "dist/apps/analytics-dashboard/browser" },
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "categories:accessibility": ["error", {"minScore": 0.95}],
        "metrics/first-contentful-paint": ["error", {"maxNumericValue": 1800}]
      }
    }
  }
}

• LCP < 2.0s on demo laptop, CLS <= 0.02

Pa11y/axe AA checks

{
  "defaults": { "standard": "WCAG2AA", "threshold": 0 },
  "urls": [
    "http://localhost:4200/",
    "http://localhost:4200/login",
    "http://localhost:4200/report"
  ]
}

• Check critical routes: /, /login, /report

Coverage and e2e smoke

I require 90%+ coverage on shared libs and a Cypress smoke spec to load the app, log in (stubbed), and render the primary dashboard charts without console errors. For Signals/SignalStore stores, I include unit tests for derived selectors and mutators.

• 90%+ coverage on libs; Cypress smoke on top flows

firebase.json for previews

{
  "hosting": {
    "public": "dist/apps/analytics-dashboard/browser",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{"source": "**", "destination": "/index.html"}]
  }
}

Promote with confidence

Previews give each PR a unique URL and auto-delete when merged. When all gates are green, I promote the preview to a production channel with a manual approval step, preserving the exact build I demoed.

• Manual approval to promote a green preview to production

• Audit ready with immutable channel URLs

Measured outcomes I hold myself to

On a telecom analytics demo, this exact stack caught a chart bundle regression (+180kb) before it shipped. On airport kiosk work, preview deploys let QA test offline-tolerant flows on device simulators via Docker before travel days.

• Build reproducibility: 100% via CI cache + lockfiles

• Regression detection: <5 minutes to first failure signal

• Core Web Vitals: LCP < 2.0s, CLS <= 0.02, INP < 200ms

• A11y: ≥95 Lighthouse score on key routes

• Uptime: Firebase previews > 99.9% while active

Signals I look for

Typical engagement: 1 week to stand up Nx + Actions + Firebase previews + baseline gates, then 1-3 weeks to tune budgets, e2e, and coverage around your real flows. If you need a remote Angular developer or an Angular consultant to stabilize delivery, I can start with a 48-hour assessment.

• Red-only pipelines nobody trusts

• Mainline commits without preview deploys

• Unmeasured a11y/performance drift

• Slow PR feedback (>15 min)