CI/CD

What Is CI/CD?

CI/CD stands for Continuous Integration and Continuous Delivery/Deployment — a set of practices that automate how code moves from a developer’s machine into production. Instead of manually building, testing, and deploying, a CI/CD pipeline runs these steps automatically every time you push code.

For a React app, CI/CD means that a git push can trigger an automated workflow that installs dependencies, runs tests, builds the production bundle, and ships it to your hosting provider — with no manual intervention.

Why CI/CD Matters

• Faster feedback — tests and builds run automatically on every change, catching bugs early.
• Consistency — the same automated steps run every time, removing “works on my machine” surprises.
• Fewer manual errors — no forgotten build steps or hand-copied files during deployment.
• Frequent, safe releases — small changes ship often, making each release lower risk.
• Confidence to refactor — a solid pipeline acts as a safety net for larger changes.

Continuous Integration vs Delivery vs Deployment

Continuous Integration (CI)

Developers merge their changes into a shared branch frequently. Each merge triggers an automated build and test run, so integration problems surface immediately rather than piling up.

Continuous Delivery (CD)

Every change that passes CI is automatically prepared and packaged so it is ready to release at any time. The final push to production is still triggered manually — often a single click.

Continuous Deployment (CD)

Goes one step further: every change that passes all automated checks is deployed to production automatically, with no manual approval step.

Anatomy of a Pipeline

A typical CI/CD pipeline for a React project runs these stages in order:

1. Trigger — a push, pull request, or merge starts the workflow.
2. Install — check out the code and install dependencies (npm ci).
3. Lint & type-check — run ESLint and TypeScript to catch issues early.
4. Test — run unit and integration tests (Jest, React Testing Library).
5. Build — produce the optimized production bundle (npm run build).
6. Deploy — publish the build to your hosting provider.

If any stage fails, the pipeline stops and reports the error, preventing broken code from reaching production.

GitHub Actions

GitHub Actions is a popular CI/CD tool built directly into GitHub. Workflows are defined in YAML files placed in the .github/workflows/ directory of your repository.

Here is a minimal workflow that installs, tests, and builds a React app on every push and pull request:

name: CI

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

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Run tests
        run: npm test -- --watchAll=false

      - name: Build
        run: npm run build

Key concepts:

• Workflow — an automated process defined in a YAML file.
• Job — a set of steps that run on the same runner (a virtual machine).
• Step — an individual task, either a shell command (run) or a reusable action (uses).
• Trigger (on) — the events that start the workflow, such as push or pull_request.

Vercel

Vercel is a hosting platform built for frontend frameworks like React and Next.js, with deployment automation included out of the box.

• Git integration — connect your repository and Vercel deploys automatically on every push.
• Preview deployments — every pull request gets its own live URL, so you can review changes before merging.
• Production deployments — merging to your main branch ships to production automatically.
• Zero configuration — Vercel detects your framework and applies sensible build settings.

Similar platforms include Netlify, Cloudflare Pages, and AWS Amplify, all offering Git-based automatic deployments.

Best Practices

• Keep pipelines fast — cache dependencies and run independent jobs in parallel so feedback stays quick.
• Fail early — put fast checks (lint, type-check) before slower ones (tests, build).
• Protect your main branch — require CI to pass before a pull request can merge.
• Use environment secrets — store API keys and tokens in your CI provider’s secret store, never in code.
• Deploy previews for pull requests — review real, running builds before they reach production.
• Automate rollbacks — make it easy to revert to the last known-good deployment if something breaks.

Summary

CI/CD automates the path from code to production, giving you faster feedback, consistent releases, and the confidence to ship often. Continuous Integration catches problems as code merges, while Continuous Delivery/Deployment gets those changes safely into users’ hands. Tools like GitHub Actions define the automated build-and-test pipeline, and platforms like Vercel handle deployment — together forming the backbone of a modern React development workflow.