Question

How can I set up continuous deployment for a React application with GitHub Actions?

I'm trying to set up continuous deployment for a React application using GitHub Actions. Can someone guide me through the process?

Answer 1

1. Prepare Your Repository

Ensure your React application is pushed to a GitHub repository. Use git push to commit the latest changes to the main branch.

2. Create the GitHub Workflow

Add a folder named .github at the root of your repository.

Inside this folder, create another folder called workflows.

In workflows, create a file named deploy.yml.

3. Configure the deploy.yml File

Add the following content to the file:

name: React App CI/CD

on:

  push:

    branches:

      - main

jobs:

  build-and-deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout code

        uses: actions/checkout@v3


      - name: Set up Node.js

        uses: actions/setup-node@v3

        with:

          node-version: '16'


      - name: Install dependencies

        run: npm ci


      - name: Build project

        run: npm run build


      - name: Deploy to GitHub Pages

        uses: peaceiris/actions-gh-pages@v3

        with:

          github_token: ${{ secrets.GITHUB_TOKEN }}

          publish_dir: ./build

4. Set Up GitHub Pages

In your GitHub repository, go to Settings > Pages and configure it to serve from the gh-pages branch.