← Back to React Course | Chapter 14: Performance & Production Deployment | Lesson 12 of 13

Basic CI/CD for React Apps

CI/CD is like a robot assistant that automatically checks your homework and turns it in the moment you finish, instead of you doing it by hand every time.

In this page:

  1. What CI/CD Automates
  2. A Typical React App Pipeline
  3. Adding Automatic Deployment
Syntax
markup 
name: CI
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build

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

bash 
$ 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

⚠️ Run this in your own terminal or Node.js environment.

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

bash 
$ 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 }}

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

Introduction to Testing React Apps · Deploying to Vercel · SEO Basics for React SPAs · Deploying to Netlify

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Not running the same checks (tests, linting) locally before pushing, discovering failures only after a slow CI run.
  2. Skipping tests in the CI pipeline 'to save time', defeating the whole safety-net purpose of having them there.
  3. Not caching dependencies (like node_modules) between CI runs, making every single run unnecessarily slow.
Chapter Summary
  • Continuous Integration (CI) automatically runs checks (tests, linting, builds) on every code change.
  • Continuous Deployment (CD) automatically deploys code that passes those checks to production.
  • GitHub Actions is a common way to define CI/CD workflows directly alongside a repository.
  • A typical pipeline: install dependencies, run linter, run tests, build, then deploy if all steps succeed.
Browser Support

No React-version restriction — a development/deployment workflow, not a runtime feature.

🔒

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson Deploying to Vercel Next Lesson → SEO Basics for React SPAs

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.