CI/CD for Frontend

Frontend CI/CD pipeline

Pipeline stages in order

1. 1

   Install and cache

   Run npm ci (or pnpm install --frozen-lockfile). Cache the package store keyed on the lockfile hash so repeated runs skip network I/O. GitHub Actions: use actions/setup-node with cache: 'npm' or actions/cache for pnpm.

2. 2

   Typecheck, lint, and unit tests

   Run tsc --noEmit, then the linter, then jest or vitest. These are fast and catch most logical errors. Run in parallel where the CI runner allows — tsc and lint have no dependency on each other.

3. 3

   Build and bundle-size gate

   Run npm run build, then npx size-limit. size-limit reads .size-limit.json, measures each JS/CSS entry point, and exits non-zero if any exceeds its budget. Catches accidental large imports before they ship.

4. 4

   Preview deploy

   Push the build output to a preview environment (Vercel, Netlify, or your own CDN). Each PR gets a stable URL tied to its head commit. Downstream gates (Lighthouse CI, visual regression) run against this URL so they test production-equivalent serving.

5. 5

   Lighthouse CI and visual regression

   Run lhci autorun against the preview URL to assert performance, a11y, and SEO score thresholds. Run Playwright screenshot tests or Chromatic to detect visual regressions. Lighthouse CI failures block; visual diffs post as PR comments for human review.

6. 6

   Promotion to production

   On merge to the main branch, atomically promote the already-built and already-tested preview artifact to production. No rebuild — the same binary that passed the gates ships. Rollback is a re-promotion of the previous artifact.

GitHub Actions workflow: build + size-limit + Lighthouse CI

name: CI

on:
  pull_request:

jobs:
  build-and-gate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm

      - run: npm ci

      # Typecheck and lint in parallel (separate steps, same job)
      - run: npx tsc --noEmit
      - run: npm run lint

      - run: npm run test -- --run   # vitest --run = non-watch mode

      - run: npm run build

      # Bundle-size gate — fails if any entry exceeds .size-limit.json budget
      - run: npx size-limit

      # Deploy preview (Vercel CLI)
      - name: Deploy preview
        id: deploy
        run: |
          PREVIEW_URL=$(npx vercel --token ${{ secrets.VERCEL_TOKEN }} --yes)
          echo "url=$PREVIEW_URL" >> "$GITHUB_OUTPUT"
        env:
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

      # Lighthouse CI — assert performance ≥ 90, a11y ≥ 90
      - run: npm install -g @lhci/cli
      - run: lhci autorun
        env:
          LHCI_BUILD_CONTEXT__CURRENT_HASH: ${{ github.sha }}
          LHCI_SERVER_BASE_URL: ${{ steps.deploy.outputs.url }}