(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@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Dependencies
        run: npm install

      - name: Run Tests
        run: npm test --if-present

      - name: Build Project
        run: npm run build

      - name: Upload Build Artifact
        uses: actions/upload-artifact@v3
        with:
          name: build
          path: dist

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Download Build Artifact
        uses: actions/download-artifact@v3
        with:
          name: build
          path: dist

      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Step 4: Explanation of Workflow Steps

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

• Checkout Code: Checks out your code so it can be accessed by the job.

• Set up Node.js: Sets up a Node.js environment using version 18.

• Install Dependencies: Installs necessary dependencies.

• Run Tests: Runs any tests in the project (npm test --if-present).

• Build Project: Runs npm run build to create the production build.

• Upload Build Artifact: Stores the build files so they can be accessed by other jobs.

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.