Auto update the react application using github actions

About

This code snippets auto updates a react project on commit using git actions.

Steps

First goto Project > Settings > Security > Secrets and variables > Actions and add the following secret keys in New Repository secret.

Then create a yaml file .github/workflows/deploy.yml. A sample file has been given below. Make changes as required.

name: Build and Deploy

on:
  push:
    branches:
      - main  # Change this to your target branch

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '22'  # Specify your Node.js version

      - name: Install Dependencies
        run: npm install

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

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

The app should now auto update on each new commits.

Note

• The ssh user public key should be added to the .ssh/authorized_keys for this to work.