Setting Up a CI/CD Pipeline for React.js: Automating Build, Test, and Deploy

A Continuous Integration/Continuous Deployment (CI/CD) pipeline is an essential part of modern software development, allowing teams to automate testing and deployment workflows. By setting up a CI/CD pipeline for a React.js application, you can reduce manual errors, improve code quality, and ensure that every change is tested and deployed automatically.

In this guide, we’ll walk through the steps to create a CI/CD pipeline for a React.js application, focusing on GitHub Actions for automation, testing configurations, and deploying to Vercel or Netlify. By the end, you’ll have a streamlined process to build, test, and deploy your React app.

Key Benefits of a CI/CD Pipeline

Automated Testing: Run tests automatically for every code change, ensuring code quality.
Consistent Deployments: Deploy changes automatically, reducing manual effort and errors.
Faster Feedback: Identify issues early with instant feedback from automated tests.
Improved Collaboration: Enable team members to review, test, and deploy changes seamlessly.

Prerequisites

To get started, you’ll need:

A React.js project (created with Create React App or another React setup).
A GitHub repository to store your project.
Accounts on Vercel or Netlify for automated deployment (optional).

Step 1: Setting Up GitHub Actions for CI/CD

GitHub Actions provides a powerful way to automate workflows directly from your GitHub repository. We’ll configure GitHub Actions to install dependencies, run tests, and deploy our React app.

1.1 Create a GitHub Actions Workflow File

In your repository, create a new directory .github/workflows and add a file named ci-cd.yml. This file will define your CI/CD pipeline configuration.

ci-cd.yml

name: CI/CD Pipeline
 
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
 
jobs:
  build-and-test:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
 
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
 
      - name: Install Dependencies
        run: npm install
 
      - name: Run Tests
        run: npm test -- --watchAll=false
 
      - name: Build Project
        run: npm run build

Explanation of Workflow Steps:

on.push and on.pull_request: Trigger the workflow for pushes to the main branch and for pull requests.
jobs.build-and-test: Defines the job for building and testing the application.
Checkout Code: Checks out the repository code.
Set up Node.js: Installs the specified Node.js version.
Install Dependencies: Runs npm install to install project dependencies.
Run Tests: Runs npm test to execute tests.
Build Project: Builds the production-ready version of the app with npm run build.

Best Practice: Enable branch protection on the main branch so that only code that passes CI can be merged.

Step 2: Running Automated Tests

Automated testing helps ensure that each code change is reliable and doesn’t introduce bugs. For a React project, Jest and React Testing Library are commonly used testing frameworks.

Writing Basic Tests

Ensure you have tests written in the __tests__ directory or as *.test.js files in your components. For example, a basic test for an App component might look like this:

App.test.js

import { render, screen } from "@testing-library/react";
import App from "./App";
 
test("renders welcome message", () => {
  render(<App />);
  const linkElement = screen.getByText(/welcome to react/i);
  expect(linkElement).toBeInTheDocument();
});

This test checks if the text “Welcome to React” is rendered in the App component. GitHub Actions will automatically run this test with each code push.

Tip: Keep tests small and focused on individual components to make debugging easier if tests fail in the pipeline.

Step 3: Deploying the React App to Vercel or Netlify

3.1 Deploying to Vercel

Vercel provides an easy way to deploy React applications with automatic CI/CD integration. Here’s how to configure GitHub Actions to deploy to Vercel:

Set Up Vercel Account and Connect GitHub Repo: Log in to Vercel and connect your GitHub repository.

Add Vercel Deployment Action to Workflow:

Update ci-cd.yml to deploy to Vercel.

ci-cd.yml

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
 
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
 
      - name: Install Dependencies
        run: npm install
 
      - name: Run Tests
        run: npm test -- --watchAll=false
 
      - name: Build Project
        run: npm run build
 
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: "--prod"
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

Add Vercel Secrets to GitHub:
- Go to your GitHub repository’s settings.
- Add the following secrets:
  - VERCEL_TOKEN: Obtain this from your Vercel account under Settings > Tokens.
  - VERCEL_ORG_ID and VERCEL_PROJECT_ID: Get these from your Vercel project settings.

Tip: Configure preview deployments in Vercel to create temporary environments for each pull request.

3.2 Deploying to Netlify

Netlify also provides easy CI/CD integration with GitHub. Here’s how to configure it in GitHub Actions:

Create a Netlify Account and Connect GitHub Repo.

Add Netlify Deployment Action to Workflow:

Update ci-cd.yml to deploy to Netlify.

ci-cd.yml

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
 
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
 
      - name: Install Dependencies
        run: npm install
 
      - name: Run Tests
        run: npm test -- --watchAll=false
 
      - name: Build Project
        run: npm run build
 
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.2
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Add Netlify Secrets to GitHub:
- Go to your GitHub repository’s settings.
- Add the following secrets:
  - NETLIFY_AUTH_TOKEN: Obtain this from Netlify’s account settings.
  - NETLIFY_SITE_ID: Get this from your Netlify project settings.

Netlify will now automatically deploy your application on every successful build.

Tip: Enable Netlify’s build plugins for functions like redirect management or build optimizations to enhance the deployment process.

Step 4: Enable Branch Protection for Production Stability

To ensure only tested and reviewed code reaches production, enable branch protection on your main branch. This can include:

Require Status Checks: Require CI tests to pass before merging.
Require Pull Request Reviews: Ensure code is reviewed by team members before merging.

In GitHub:

Go to Settings > Branches > Branch protection rules.
Set rules like “Require status checks to pass before merging” and “Require pull request reviews before merging.”

Best Practice: Limit direct commits to the main branch to maintain code quality and avoid unexpected issues in production.

Summary of CI/CD Pipeline Setup for React.js

Step	Description
GitHub Actions Workflow	Automates build and test processes
Automated Testing	Runs tests on each code push for quality assurance
Vercel/Netlify Deployment	Automatically deploys the app on successful build
Branch Protection	Ensures only approved, tested code reaches production

Conclusion

Setting up a CI/CD pipeline for your React.js application

with GitHub Actions, Vercel, or Netlify enhances development efficiency by automating testing and deployment processes. With a well-configured pipeline, you can deploy confidently, knowing your app has passed automated tests and builds correctly.

As you continue developing and iterating on your app, a CI/CD pipeline allows for faster feedback, streamlined collaboration, and a smooth, reliable path from development to production.