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

What spins up automatically

The pipeline is opinionated and fast. For AngularUX demos, median PR validation is under 7 minutes thanks to Nx caching and parallelization. Reviewers never pull code locally to evaluate UX—I give them a shareable preview URL, audit results, and coverage artifacts right in the PR.

• Nx affected graph scopes work to touched apps/libs.

• Parallel jobs run unit tests, lint, type-check, and builds.

• Firebase Hosting creates a per-PR preview URL.

• Cypress e2e hits the preview URL with seeded data.

• Lighthouse CI and Pa11y/axe run against critical pages.

Non‑negotiables that block merges

These gates aren’t theoretical. They’ve caught real regressions—like a stray PrimeNG chart import that ballooned the main bundle by 90KB and an ARIA regression that broke screen reader announcements for error summaries.

• Unit tests green with ≥80% lines coverage.

• No critical a11y violations (axe/Pa11y).

• Lighthouse thresholds: Perf ≥ 90, A11y ≥ 95, SEO ≥ 95, PWA ≥ 90.

• Angular budgets respected (main ≤ 250KB gz).

• TypeScript strict and ESLint clean.

Signals-era stability

Angular 20+ with Signals is fast, but performance wins vanish if regressions ship. CI must measure Core Web Vitals and render stability every PR, not just post-release.

• Signals and SignalStore reduce change detection noise but need guardrails.

• Typed event schemas and store contracts belong in tests.

Measurable outcomes for leads and recruiters

If you need to hire an Angular developer or justify budget, nothing beats green gates and better Lighthouse scores in a PR thread. It’s the same proof I use in interviews and executive updates.

• Preview links speed stakeholder sign-off.

• Automated audits prove improvements objectively.

Targets I standardize

Each app/library defines clear targets. Libraries with SignalStore state include store-specific unit tests to validate selectors, effects, and typed events.

• build: production build with Vite

• test: Karma/Jasmine or Jest with coverage

• lint: ESLint with Angular and rxjs rules

• e2e: Cypress headed/headless against preview

• preview: Firebase channel deploy (per PR)

Example project.json for app

{
  "name": "demo-app",
  "sourceRoot": "apps/demo-app/src",
  "targets": {
    "build": {"executor": "@angular-devkit/build-angular:browser", "options": {"outputPath": "dist/apps/demo-app"}},
    "test": {"executor": "@angular-devkit/build-angular:karma", "options": {"codeCoverage": true}},
    "lint": {"executor": "@nx/eslint:lint"},
    "e2e": {"executor": "@nx/cypress:cypress", "options": {"cypressConfig": "apps/demo-app-e2e/cypress.config.ts"}},
    "preview": {"executor": "nx:run-commands", "options": {"command": "firebase hosting:channel:deploy $GITHUB_HEAD_REF --project=$FIREBASE_PROJECT --json"}}
  }
}

Workflow highlights

Below is a simplified workflow used on AngularUX demos. It’s production-grade but copyable to most teams in under a day.

• pnpm + Node 20

• Nx affected targets with SHAs

• Matrix jobs for test/lint/build

• Firebase preview + Cypress

• Lighthouse CI + Pa11y/axe

• Required status checks block merges

actions yaml

name: ci
on:
  pull_request:
    branches: [ main ]
concurrency:
  group: ci-${{ github.ref }}
  cancel-in-progress: true
jobs:
  setup:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - name: Nx cache
        uses: actions/cache@v4
        with:
          path: .nx/cache
          key: nx-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ github.sha }}
          restore-keys: |
            nx-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-
      - id: base
        run: echo "BASE_SHA=$(git merge-base origin/main HEAD)" >> $GITHUB_OUTPUT

  test_lint_build:
    needs: setup
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: |
          pnpm nx affected --base=${{ needs.setup.outputs.BASE_SHA }} --head=HEAD -t lint,test,build --parallel=3 --configuration=production

  firebase_preview:
    needs: test_lint_build
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SA }}'
          projectId: ${{ vars.FIREBASE_PROJECT }}
          channelId: pr-${{ github.event.number }}
          target: demo-app
        id: deploy
      - name: Comment preview URL
        run: gh pr comment $PR -b "Preview: ${{ steps.deploy.outputs.details_url }}"
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PR: ${{ github.event.number }}

  audits:
    needs: firebase_preview
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pnpm dlx @lhci/cli autorun --upload.target=filesystem --collect.url=${{ needs.firebase_preview.outputs.details_url }}
      - run: pnpm dlx pa11y-ci --sitemap ${GITHUB_WORKSPACE}/apps/demo-app/pa11y-sitemap.xml --json > pa11y.json
      - uses: actions/upload-artifact@v4
        with: { name: audits, path: "./**/{lhr.html,pa11y.json}" }

Why Firebase Hosting previews

AngularUX demos use Firebase because it’s blazing fast to preview and easy to secure. The same pattern ports to S3/CloudFront, Azure Static Web Apps, or Cloud Run if you prefer other clouds.

• Instant per-PR URLs with SSL

• Custom headers for caching and CSP

• Ties neatly into GitHub PR comments

Controlled test data

When a demo uses Signals/SignalStore, I expose a feature flag service so Cypress can flip states deterministically during tests.

• Seeded Firestore/JSON fixtures for predictable e2e

• Feature flags to toggle experimental flows

Lighthouse CI thresholds

Config lives in .lighthouserc.json and pins tested routes to avoid flaky navigations.

• Performance ≥ 90

• Accessibility ≥ 95

• Best Practices ≥ 95

• SEO ≥ 95

• PWA ≥ 90

Sample .lighthouserc.json

{
  "ci": {
    "collect": {
      "staticDistDir": "dist/apps/demo-app",
      "url": ["/", "/dashboard", "/account/login"],
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.90}],
        "categories:accessibility": ["error", {"minScore": 0.95}],
        "categories:seo": ["error", {"minScore": 0.95}]
      }
    }
  }
}

Accessibility gate (Pa11y/axe)

Signals power dynamic error summaries and reduced motion toggles. I assert screen reader announcements with Cypress + axe, then run Pa11y in CI for breadth.

• Block on serious/critical only

• Whitelist known 3rd‑party false positives

• Check live regions and focus order for forms

Angular bundle budgets

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "demo-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                {"type": "initial", "maximumError": "250kb"},
                {"type": "anyComponentStyle", "maximumError": "8kb"}
              ]
            }
          }
        }
      }
    }
  }
}

Coverage and type safety

SignalStore units validate selectors and reducers with typed event schemas so regressions show up as compile errors or failing tests—before reviewers ever open the preview.

• Min 80% lines coverage on apps and critical libs

• TypeScript strict true; noImplicitOverride; noUncheckedIndexedAccess

The issue

Cypress still passed—functionally fine—but Lighthouse CI failed the Perf gate. The PR was blocked.

• PrimeNG chart imported from root entrypoint

• Main bundle +92KB gz, Perf dropped to 82

The fix

// Before
import { ChartModule } from 'primeng/primeng';
// After
import { ChartModule } from 'primeng/chart';

Perf went back to 95+, and the gate passed. This is why automated audits belong in CI, not just in local devtools.

• Use scoped import for the single module

• Tree-shake properly with Vite builder

Good signals you’re ready

If this is you, an Angular consultant can stand up Nx + CI + gates in 1–2 weeks for a small monorepo, 3–4 weeks for larger multi-app portfolios with canary deploys.

• Frequent regressions after merges

• Manual QA cycles slowing delivery

• Stakeholders ask for proof (Lighthouse, a11y)

• Multiple teams stepping on each other’s toes

What I deliver

If you need a remote Angular developer with Fortune 100 experience to stabilize delivery, I’m available for hire. I’ve led similar rollouts for media, telecom, and aviation platforms—no drama, measurable wins.

• Nx workspace with enforced targets and docs

• GitHub Actions/Jenkins/Azure DevOps pipeline

• Firebase/S3/Azure previews + protected main

• Quality gates with thresholds and artifacts

• Team training and a handoff playbook

Cypress integration

// cypress/e2e/accessibility.cy.ts
import 'cypress-axe';

it('announces form errors via live region', () => {
  cy.visit(Cypress.env('BASE_URL') + '/register');
  cy.injectAxe();
  cy.findByRole('button', { name: /submit/i }).click();
  cy.checkA11y(undefined, { includedImpacts: ['serious', 'critical'] });
});

• Runs against preview URL with seeded data

• Screenshots/videos uploaded as artifacts

• Axe assertions for critical flows

Telemetry hooks for Signals/SignalStore

On analytics-heavy demos (charts, virtualization), I validate event contracts with unit tests and run a smoke against the preview to ensure telemetry endpoints respond without console errors.

• Typed event schemas for dashboard interactions

• WebSocket retries with exponential backoff

• GA4 custom events gated in CI smoke tests

What to instrument next

CI/CD + Nx gates make demos production-ready and keep them there. If you want this discipline on your team, I’m happy to review your repo and map a plan. See how I stabilize chaotic codebases with gitPlumbers or how IntegrityLens and SageStepper run with 99.98% uptime and measurable UX improvements.

• INP/LCP tracking per route in GA4

• Flame charts in Angular DevTools for hotspots

• Feature flag canary tests for risky changes