Build, Test, Deploy React on AWS Using GitHub Actions CI/CD

Modern web applications demand speed, scalability, and automation. With React at the frontend and AWS handling the cloud infrastructure, integrating GitHub Actions into your Continuous Integration/Continuous Deployment (CI/CD) pipeline ensures rapid and reliable application delivery. This step-by-step guide walks you through the complete process of building, testing, and deploying a React app to AWS using GitHub Actions.

---

Why Use GitHub Actions for React Deployment?

GitHub Actions offers:

• Automated workflows triggered on code changes
  
  

• Seamless integration with AWS via credentials and CLI
  
  

• Customizable jobs for build, test, and deploy phases.
  
  

• Free minutes for public repositories and a generous free tier for private repos
  
  

---

Prerequisites

• A React app repository on GitHub
  
  

• An AWS account with access to S3 and optionally CloudFront
  
  

• AWS IAM user with permissions to deploy to S3
  
  

• AWS CLI configured
  
  

• GitHub Secrets set up for:
  
  

• AWS_ACCESS_KEY_ID
  
  

• AWS_SECRET_ACCESS_KEY
  
  

• (Optional) DISTRIBUTION_ID for CloudFront
  
  

---

Step 1: Build Your React App

Ensure your app can be built with:

npm run build

This command should output your static site to the build/ directory (default in Create React App).

---

Step 2: Create the GitHub Actions Workflow

Create a file in your repo:

.github/workflows/deploy.yml

Sample deploy.yml

name: Build and Deploy React App to AWS

on:

  push:

    branches:

      - main

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

    - name: Checkout Source Code

      uses: actions/checkout@v4

    - name: Set up Node.js

      uses: actions/setup-node@v4

      with:

        node-version: '18'

    - name: Install Dependencies

      run: npm ci

    - name: Run Tests

      run: npm test -- --watchAll=false

    - name: Build React App

      run: npm run build

    - name: Configure AWS Credentials

      uses: aws-actions/configure-aws-credentials@v4

      with:

        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}

        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

        aws-region: us-east-1

    - name: Deploy to S3

      run: |

        aws s3 sync build/ s3://your-s3-bucket-name --delete

    - name: Invalidate CloudFront Cache (optional)

      if: ${{ secrets.DISTRIBUTION_ID }}

      run: |

        aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

---

Step 3: AWS Setup

• S3: Create a bucket to host your React app and enable static website hosting.
  
  

• IAM: Create a user with AmazonS3FullAccess (for demo only; use least privilege in production).
  
  

• CloudFront: (Optional) Use for global CDN delivery and SSL support.
  
  

---

Step 4: Commit and Push

Once you push changes to the main branch, GitHub Actions will:

1. Check out the code
   
   

2. Install dependencies
   
   

3. Run tests
   
   

4. Build the React app
   
   

5. Sync it to your S3 bucket.
   
   

6. (Optionally) Invalidate the CloudFront cache
   
   

You can monitor workflow progress in the "Actions" tab on GitHub.

---

Best Practices

• Use environment-specific configurations via .env.production.
  
  

• Invalidate only necessary paths in CloudFront to save cost.
  
  

• Add Slack or email notifications to the workflow for failed deployments.
  
  

• Configure GitHub environments for staging/production with approval gates.
  
  

---

Conclusion

With this setup, your React app is continuously integrated and deployed whenever you push code. GitHub Actions and AWS empower developers with a robust, scalable, cost-effective CI/CD pipeline.