Basic CI/CD for React Apps

What CI/CD Automates

Continuous Integration automatically runs your test suite, linter, and build process every time code is pushed, catching problems immediately instead of relying on someone remembering to check manually. Continuous Deployment takes this further, automatically deploying code that passes all checks straight to production.

Note: Even a simple CI setup (just running tests on every push) catches a surprising number of bugs before they reach real users.

Warning: CI/CD pipelines run on a remote service (like GitHub Actions) — they can't be demonstrated running live inside this code preview.

A Typical React App Pipeline

A common pipeline for a React app runs, in order: install dependencies, run the linter (catching style/quality issues), run the test suite (catching functional regressions), then build the production bundle — only proceeding to deployment if every step succeeds.

Note: Running these steps in order (fastest/cheapest checks first, like linting, before slower ones like a full test suite) fails fast and saves CI time.

Warning: A pipeline that skips running tests (to make it 'pass faster') provides false confidence — a green checkmark that doesn't actually mean the code is verified working.

Example: A GitHub Actions CI Pipeline

$ cat .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npm test
      - run: npm run build

Adding Automatic Deployment

Extending a CI pipeline with a deployment step (often triggered only on the main branch, after all checks pass) implements Continuous Deployment — merging to main automatically results in a live, updated production site, without a manual deploy step.

Note: Many hosting platforms (Netlify, Vercel) already provide this automatically once connected to your Git repository, without needing to write custom GitHub Actions deploy steps yourself.

Warning: Automatic deployment on every push to main means a broken (but somehow test-passing) change can reach production quickly — a thorough test suite is what makes this safe.

Example: Adding a Deploy Step to CI

$ cat .github/workflows/ci.yml
      - run: npm run build
      - name: Deploy to Netlify
        if: github.ref == 'refs/heads/main'
        run: npx netlify-cli deploy --prod --dir=dist
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}