(CI/CD) pipeline for your Vite React app

GitHub actions to GitHub pages Deployment

Step 1: Set Up a Repository

1. Initialize a Git repository for your Vite React app
2. Commit your code:

git init
git add .
git commit -m "first commit"

• 3. Create a remote Git repository (GitHub, GitLab, Bitbucket) and push your code:

git remote add origin <YOUR_REPO_URL>
git branch -M main
git push -u origin main

Step 2: Configure GitHub Actions for CI/CD

GitHub Actions is a way to automate CI/CD for your project. To set it up:

1. In your project root, create a .github directory, then within it, a workflows directory:

mkdir -p .github/workflows

2. Inside the .github/workflows folder, create a file named ci-cd.yml for the GitHub Actions pipeline configuration.

Step 3: Write the GitHub Actions Workflow

In ci-cd.yml, add the following code to automate testing, building, and deployment:

name: GitHub CI/CD Pipeline for Vite React App

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v4 # Use v4 for the latest version

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20 # Use a current Node.js version

      - name: Install Dependencies
        run: |
            cd frontend
            npm ci            
            npm run build
      # npm test --if-present

      - name: Verify build output
        run: ls -la frontend/dist
        
      # If deploying to GitHub Pages, add deployment steps here
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'frontend/dist' # The build output directory for Vite apps

  deploy:
    needs: build
    # Deploy only when pushing to main (optional)
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest

    permissions:
      pages: write      # Required to deploy pages
      id-token: write   # Required to authenticate with GitHub Pages

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Step 4: Explanation of Workflow Steps

1. on Trigger: Runs the pipeline on each push and pull request to the mainbranch.
2. build Job:

3. deploy Job:

• Download Build Artifact: Retrieves the build files created in the build job.
• Deploy to GitHub Pages: Deploys the contents of the dist folder to GitHub Pages using GITHUB_TOKEN for authorization.

Step 5: Commit and Push the Workflow File

Once your ci-cd.yml file is configured, commit and push it to your GitHub repository:

git add .github/workflows/ci-cd.yml
git commit -m "Add CI/CD pipeline for Vite React app"
git push origin main

GitHub Actions will automatically start running this workflow. You can monitor the progress of each job on the Actions tab in your GitHub repository.

Step 6: Verify the Deployment

Once the pipeline completes successfully, check your GitHub Pages to verify the deployment.