ADVERTISEMENT

Deploy Your React App Using GitHub Actions and cPanel

Have you ever wondered how to get your React/Vite app from your local machine to a cPanel server using GitHub Actions? It might sound tricky, but don’t worry, we’ve got you covered. Let’s dive into a simple step-by-step guide that won’t require an extra cup of coffee to get through!

Setting Up Your Vite App

First things first, you need to make sure your React app is ready for deployment. If you’re starting from scratch, you can quickly create a Vite app. Just open your terminal and run:

npm create vite@latest my-vite-app
cd my-vite-app
npm install

This sets up your project. Give it a spin with npm run dev to ensure everything’s working smoothly.

Creating Your GitHub Repository

Time to put your code on GitHub. Head over to GitHub, create a new repository, and push your local project up there. Use the following commands in your terminal from your project directory:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin [your-github-repo-url]
git push -u origin main

Setting Up GitHub Actions

Now, over to the magic of GitHub Actions. Navigate to the Actions tab of your repository and click on Set up a workflow yourself. Replace the template with a script to build your Vite app. Use the following YAML:

name: Deploy Vite App

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to cPanel
        uses: SamKirkland/FTP-Deploy-Action@4.1.0
        with:
          server: ftp://[cpanel-server]
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build
          remote-dir: [public_html]

Make sure you replace placeholders with actual data for your deployment. This will automatically deploy your app once changes are pushed to the main branch.

Preparing Your cPanel

Next, ensure your cPanel is ready. You’ll need your FTP credentials to add as secrets in your GitHub repository settings. Do this under the Secrets tab by adding FTP_USERNAME and FTP_PASSWORD with their respective values.

Wrapping It Up

And there you have it! You’ve just set up a deployment process for your React/Vite app using GitHub Actions and cPanel. If you’re keen on exploring more about deployment setups, check out our guide on Effortless WordPress Deployment with GitHub Actions & FTP.

For additional details and a deeper dive into how GitHub Actions work, you can always refer to the GitHub Actions Wikipedia page.