Deploy React app via GitHub Actions

Setup app on VPS

1. Login to root account.
2. Run the script and follow the instructions:

read -p "Enter app name: " APP && curl -sSL https://gitlab.com/subrat-lima/kb/-/raw/main/src/scripts/setup_app.sh | sudo sh -s -- "$APP"

Add Secret keys

1. Open the GitHub repo page.
2. Goto Project > Settings > Security > Secrets and variables > Actions.
3. Add the following secret keys in New Repository secret.

Create the GitHub workflow

Create the workflow file .github/workflows/deploy.yml.

name: Build and Deploy

on:
  push:
    branches: [main]                            # branch name

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v6

      - name: Install pnpm
        uses: pnpm/action-setup@v4

      - name: Set up Node.js
        uses: actions/setup-node@v6
        with:
          node-version-file: 'package.json'
          cache: 'pnpm'

      - name: Install Dependencies
        run: pnpm install --frozen-lockfile

      - name: Build Project
        run: pnpm run build                     # This generates the dist folder

      - name: Copy Dist to VPS
        uses: appleboy/scp-action@master
        with:
          port: 22                              # SSH port
          source: "dist/*"                      # Path to the dist files
          host: ${{ secrets.VPS_IP }}           # Your VPS IP
          username: ${{ secrets.VPS_USERNAME }} # Your VPS username
          key: ${{ secrets.VPS_PRIVATE_KEY }}   # Your SSH private key
          target: ${{ secrets.VPS_APP_DIR }}    # Destination on your VPS
          strip_components: 1

Push changes to GitHub

Add the workflow, commit and push to GitHub. Your app should now auto deploy the updates.