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

AI-Generated Content Notice

Some code examples and technical explanations in this article were generated with AI assistance. The content has been reviewed for accuracy, but please test any code snippets in your development environment before using them.

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

  1. Automated Testing: Run tests automatically for every code change, ensuring code quality.
  2. Consistent Deployments: Deploy changes automatically, reducing manual effort and errors.
  3. Faster Feedback: Identify issues early with instant feedback from automated tests.
  4. 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:

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

  2. 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 }}

  3. 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:

  1. Create a Netlify Account and Connect GitHub Repo.

  2. 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 }}

  3. 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:

  1. Go to Settings > Branches > Branch protection rules.
  2. 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

StepDescription
GitHub Actions WorkflowAutomates build and test processes
Automated TestingRuns tests on each code push for quality assurance
Vercel/Netlify DeploymentAutomatically deploys the app on successful build
Branch ProtectionEnsures 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.