Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Deploy React app via GitHub Actions

Setup app on VPS

  1. Login to root account.
  2. Download the script.
curl -sSL https://kb.subratlima.com/scripts/vps/setup_app -o setup_app
chmod +x setup_app
  1. Run the script, example given below.
./setup_app "kb"
# where
#   kb  : app/user name

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.
namesecret
VPS_IPserver ip
VPS_USERNAMEserver login username
VPS_PRIVATE_KEYserver user ssh private key
VPS_APP_DIRserver application dir

Create the GitHub workflow

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

React App workflow 
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.

Add website to caddy on VPS

  1. Login again to root account.
  2. Download the script.
curl -sSL https://kb.subratlima.com/scripts/vps/caddy_static -o caddy_static
chmod +x caddy_static
  1. Run the script, example given below.
./caddy_static "kb.subratlima.com" "kb"
# where
#   kb.subratlima.com   : domain name
#   kb                  : app/user name

Your app should now auto deploy the updates.