0Pricing
React Academy · Lesson

GitHub Actions CI/CD for React

Automate lint, test, build, and deploy steps in a GitHub Actions workflow on every push.

GitHub Actions CI/CD for React is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is GitHub Actions?

GitHub Actions is a CI/CD platform built into GitHub. Define workflows in YAML files under .github/workflows/ that run on push, pull request, or schedule events.

Basic CI Workflow

A minimal workflow that installs dependencies, runs linting, and runs tests on every push and pull request.

# .github/workflows/ci.yml
name: CI

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

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage

Caching node_modules

Cache ~/.npm (the npm cache, not node_modules) to speed up dependency installation. actions/setup-node handles this with the cache option.

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm' # caches ~/.npm based on package-lock.json hash

Build Step

Add a build step after tests to verify the project compiles without errors.

- name: Build
  run: npm run build

# For Next.js — catch TypeScript errors:
- name: Type Check
  run: npx tsc --noEmit

Deploy to Vercel on Merge

Deploy to Vercel on pushes to main using the Vercel CLI in the workflow.

- name: Deploy to Vercel
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  run: |
    npm install -g vercel
    vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    vercel build --prod --token=$VERCEL_TOKEN
    vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

Deploy to S3 on Merge

Sync the build output to S3 and invalidate CloudFront after a successful build on main.

- name: Deploy to S3
  if: github.ref == 'refs/heads/main'
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 sync dist/ s3://my-bucket/ --delete
    aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

Playwright E2E in CI

Run Playwright E2E tests in CI after building. Install browser binaries with a dedicated step.

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

- name: Run E2E Tests
  run: npx playwright test

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/

Parallel Matrix Jobs

Use a matrix strategy to run tests in parallel across multiple Node.js versions or environments.

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20, 22]
    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

Secrets Management

Store sensitive values (API keys, deploy tokens) as GitHub Secrets (repo → Settings → Secrets). Access them in workflows as ${{ secrets.MY_SECRET }}.

Conditional Steps

Use if: conditions to run steps only on specific branches, PR events, or after previous steps succeed.

- name: Deploy
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  run: npm run deploy

Status Badges

Add a build status badge to your README to show CI status at a glance.

<!-- README.md -->
![CI](https://github.com/myorg/myrepo/actions/workflows/ci.yml/badge.svg)

Quick Check

Which GitHub Actions feature runs the same job across multiple configurations (e.g., different Node.js versions) simultaneously?

Recap

Define CI workflows in .github/workflows/ YAML. Use actions/setup-node with cache: 'npm' for fast installs. Add lint, type-check, test, and build steps. Deploy conditionally on main branch pushes. Store secrets in GitHub Secrets and use matrix builds for multi-version testing.

Frequently asked questions

Is the “GitHub Actions CI/CD for React” lesson free?

Yes — the full text of “GitHub Actions CI/CD for React” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “GitHub Actions CI/CD for React”?

Automate lint, test, build, and deploy steps in a GitHub Actions workflow on every push. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “GitHub Actions CI/CD for React” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Deploying to Vercel: Zero-Config & Preview URLs
  2. Hosting a React SPA on AWS S3 & CloudFront
  3. Dockerizing a React/Next.js App
  4. GitHub Actions CI/CD for React
← Back to React Academy