CI/CD That Catches UX Regressions: How I Wire Nx, GitHub Actions, Firebase, and Quality Gates for AngularUX Demos (Angular 20+)

Why CI with Nx and Quality Gates Matters in 2025

Nx Monorepo Structure That Pays for Itself

Example nx.json and a feature lib executing tests and lint with cache:

Nx Config Snippets

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "extends": "nx/presets/npm.json",
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**"],
    "production": ["default", "!{projectRoot}/**/*.spec.ts"]
  },
  "targetDefaults": {
    "build": { "inputs": ["production"], "cache": true },
    "test": { "inputs": ["default"], "cache": true },
    "lint": { "inputs": ["default"], "cache": true }
  }
}

// libs/state/user-store/project.json
{
  "name": "user-store",
  "sourceRoot": "libs/state/user-store/src",
  "tags": ["type:state", "scope:core"],
  "targets": {
    "test": {
      "executor": "@nx/jest:jest",
      "options": { "passWithNoTests": false }
    },
    "lint": { "executor": "@nx/eslint:lint" }
  }
}

Quality Gates That Stop Bad Builds

// angular.json (budgets excerpt)
{
  "projects": {
    "demo-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "budgets": [
              { "type": "initial", "maximumWarning": "210kb", "maximumError": "230kb" },
              { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "8kb" }
            ]
          }
        }
      }
    }
  }
}

// .lighthouserc.json
{
  "ci": {
    "collect": { "url": ["https://preview.example.app"], "numberOfRuns": 3 },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.90 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:best-practices": ["error", { "minScore": 0.95 }],
        "categories:seo": ["error", { "minScore": 0.90 }]
      }
    }
  }
}

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

describe('A11y', () => {
  it('has no critical accessibility violations', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.configureAxe({ rules: [ { id: 'region', enabled: true } ] });
    cy.checkA11y(undefined, { includedImpacts: ['critical', 'serious'] });
  });
});

GitHub Actions Pipeline with Nx Affected and Previews

name: ci
on:
  pull_request:
    branches: [ main ]
  push:
    branches: [ main ]

jobs:
  build-test:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write # for GCP OIDC
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - name: Install
        run: pnpm install --frozen-lockfile
      - name: Nx Affected - Build
        run: pnpm nx affected -t build --parallel --configuration=production
      - name: Nx Affected - Test
        run: pnpm nx affected -t test --parallel --coverage --ci
      - name: Nx Affected - Lint
        run: pnpm nx affected -t lint --parallel
      - name: Cypress E2E (headless)
        run: pnpm nx e2e demo-app-e2e --configuration=ci

  preview-and-gates:
    needs: build-test
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write
      pull-requests: write
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - name: Install
        run: pnpm install --frozen-lockfile
      - name: Authenticate to Google Cloud (OIDC)
        uses: google-github-actions/auth@v2
        with:
          workload_identity_provider: ${{ secrets.GCP_WIP }}
          service_account: ${{ secrets.GCP_SA }}
      - name: Firebase Preview Channel
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          channelId: pr-${{ github.event.number }}
          projectId: ${{ secrets.FIREBASE_PROJECT }}
          target: demo-app
      - name: Lighthouse CI
        run: npx @lhci/cli autorun --upload.target=temporary-public-storage
      - name: Enforce Coverage Gate
        run: node tools/ci/check-coverage.mjs --minStatements 85 --minBranches 85

Release Flow and Rollback

# Promote the exact preview you tested
firebase hosting:channel:deploy live --project $FIREBASE_PROJECT --only demo-app --expires 7d
# Or rollback to the previous version
firebase hosting:rollback --project $FIREBASE_PROJECT

How an Angular Consultant Structures Nx CI in a Week

When to Hire an Angular Developer for CI/CD and Guardrails

Example: Check for SignalStore and Typed Events

// libs/state/user-store/src/user.store.spec.ts
import { createUserStore } from './user.store';

describe('user store', () => {
  it('updates presence and emits typed event', () => {
    const store = createUserStore();
    store.setOnline(true);
    expect(store.isOnline()).toBe(true);
    // typed event schema captured for telemetry
    expect(store.events()).toEqual([
      { type: 'user/online', payload: { online: true } }
    ]);
  });
});

Outcomes You Can Measure