The CI/CD + Nx Quality Gate Blueprint Behind AngularUX Demos (Angular 20+, GitHub Actions, Firebase Previews)

The CI/CD + Nx Blueprint Behind AngularUX Demos

As companies plan 2025 Angular roadmaps, this is how to build once, test smart, and preview fast across multiple demos without breaking production.

Why CI/CD + Nx + Quality Gates Matter for Angular 20+ Demos

How an Angular Consultant Wires Nx, CI/CD, and Quality Gates

Below are the exact config snippets I use across NG Wave, gitPlumbers, IntegrityLens, and SageStepper.

Nx Boundaries and Quality Config Snippets

{
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:@nx/typescript"],
      "rules": {
        "@nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              { "sourceTag": "scope:apps", "onlyDependOnLibsWithTags": ["scope:ui","scope:utils"] },
              { "sourceTag": "scope:ui", "onlyDependOnLibsWithTags": ["scope:utils"] },
              { "sourceTag": "type:demo", "onlyDependOnLibsWithTags": ["type:ui","type:util"] }
            ]
          }
        ]
      }
    }
  ]
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "projects": {
    "ng-wave": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximumWarning": "250kb", "maximumError": "300kb" },
                { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" }
              ]
            }
          }
        }
      }
    }
  }
}

{
  "ci": {
    "collect": { "numberOfRuns": 1 },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:best-practices": ["warn", { "minScore": 0.9 }]
      }
    }
  }
}

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

describe('A11y smoke', () => {
  it('loads home and has no critical violations', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y(undefined, { includedImpacts: ['critical'] });
  });
});

Example GitHub Actions Pipeline for AngularUX Demos

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

jobs:
  setup-install:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install
        run: npm ci
      - name: Nx cache
        uses: actions/cache@v4
        with:
          path: .nx/cache
          key: ${{ runner.os }}-nx-${{ hashFiles('**/project.json','**/package-lock.json') }}

  quality:
    needs: setup-install
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - name: Type check
        run: npx tsc -p tsconfig.base.json --noEmit
      - name: Lint
        run: npx nx affected -t lint --parallel=3 --base=origin/main --head=HEAD
      - name: Unit tests (coverage)
        run: npx nx affected -t test --parallel=3 --base=origin/main --head=HEAD --configuration=ci --codeCoverage

  e2e:
    needs: quality
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - name: Build affected apps
        run: npx nx affected -t build --configuration=production --base=origin/main --head=HEAD
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          start: npm run serve:ci
          wait-on: 'http://localhost:4200'

  lighthouse:
    if: github.event_name == 'pull_request'
    needs: e2e
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - name: Deploy Firebase preview
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ANGULARUX }}'
          projectId: angularux
          channelId: pr-${{ github.event.number }}
      - name: Lighthouse CI
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          urls: |
            ${{ steps.deploy.outputs.details_url }}

  deploy-prod:
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    needs: [quality, e2e]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx run-many -t build --all --configuration=production
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ANGULARUX }}'
          projectId: angularux

When to Hire an Angular Developer for CI/CD and Quality Gates

Enterprise Grounding: Examples I Carry Into Demos

Explore the NG Wave component library built with Signals: NG Wave component library. See an AI-powered verification system example at IntegrityLens. For modernization and rescue work, review how I stabilize code at gitPlumbers, and check an adaptive learning system at SageStepper.

Takeaways and Next Steps

If you need a remote Angular developer with Fortune 100 experience to harden your pipeline, I’m available for select projects.

FAQs: CI/CD, Nx, and Quality Gates for Angular Demos