How to Set Up CI/CD for a React App Using GitHub Actions

Continuous Integration and Continuous Deployment (CI/CD) is essential for modern web development. With GitHub Actions, you can automate your entire React build and deploy process easily — no external CI servers needed!

In this guide, we’ll walk through how to set up CI/CD for a React project, using GitHub Actions to build and deploy your app directly to GitHub Pages.

Prerequisites

• A React project

• A GitHub repository containing your React project

• Basic knowledge of Git and GitHub

• gh-pages package installed if you're deploying to GitHub Pages (optional but recommended)

Create the GitHub Action Workflow

First, you need to create a workflow file. This is a special .yml file that tells GitHub Actions what steps to execute.

In your project repository:

1. Create a new folder:

    .github/workflows
   

2. Inside workflows/, create a file named something like deploy.yml.

3. Add the following content to the file:

    name: project_name
   
    on: 
      push: 
        branches:
          - main
   
    jobs:
      build-deploy:
        runs-on: ubuntu-latest
   
        steps:
          # Checkout repository
          - name: Checkout code
            uses: actions/checkout@v3
   
          # Setup Node.js
          - name: Setup Node.js
            uses: actions/setup-node@v3
            with:
              node-version: 18
   
          # Install Dependencies
          - name: Install Dependencies
            run: npm install
   
          # Build the project
          - name: Build project
            run: npm run build
   
          # Deploy to GitHub Pages
          - name: Deploy to GitHub Pages
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: dist
   

   Let’s Understand What Each Step Does

   • Trigger (on: push):
     This workflow will run whenever you push code to the main branch.

   • Job Setup (jobs: build-deploy):
     It defines a job that runs on an Ubuntu server (ubuntu-latest).

   • Steps:

     • Checkout Code: Pulls your repository code into the CI server.

     • Setup Node.js: Installs Node.js (version 18) to run your React app.

     • Install Dependencies: Installs all npm packages listed in your package.json.

     • Build Project: Compiles your React project (usually outputs static files in dist/).

     • Deploy: Pushes the built files to GitHub Pages using the peaceiris/actions-gh-pages action.

Additional Configuration for GitHub Pages

If you're deploying to GitHub Pages:

1. Go to your GitHub Repository → Settings → Pages

2. Set the source to Deploy from a branch

3. Choose the branch that peaceiris/actions-gh-pages will push to (often it creates a gh-pages branch)

4. Save the settings

Important: Make sure your homepage field in package.json is set correctly, for example:

        "homepage": "https://<your-username>.github.io/<your-repo-name>/"

Otherwise, your app may not load assets properly after deployment.

• Let’s Push and Watch It Work!

  Now commit your changes and push:

    git add .
    git commit -m "Add GitHub Actions CI/CD workflow"
    git push origin main
  

  Then:

  • Go to your GitHub repository.

  • Click on the Actions tab.

  • You'll see your workflow running automatically!

If it succeeds, your app should be live on GitHub Pages 🎉.

Conclusion

Setting up CI/CD with GitHub Actions for a React app is fast, free, and powerful.
You can extend this basic workflow further with:

• Tests (npm run test)

• Linting

• Deploy to other hosting platforms like Vercel, Netlify, AWS, etc.

Happy coding! 🚀✨