Complete CI/CD Setup Guide: Automate SaaS Deployment with GitHub Actions

This guide provides a step-by-step walkthrough of setting up Git, GitHub, and CI/CD deployment via FTP to automate deployments from your MacBook to a cPanel server.

---

📌 Step 1: Delete Old Files & Start Fresh

1️⃣ Delete Everything Locally

rm -rf ~/Development/master_saas_cbm

2️⃣ Delete Old Repositories from GitHub

• Go to GitHub → Your repositories → Delete the old repos (master_saas_cbm_*).
• Confirm deletion.

✅ Now we have a clean slate!

---

📌 Step 2: Create a Clean Folder Structure

1️⃣ Create the new project folder:

cd ~/Development
mkdir master_saas_cbm
cd master_saas_cbm

2️⃣ Create backend & frontend directories:

mkdir backend frontend
mkdir frontend/mobile frontend/web

3️⃣ Add .gitkeep files so Git can track these empty directories:

touch backend/.gitkeep

touch frontend/mobile/.gitkeep

touch frontend/web/.gitkeep

✅ Folder structure is ready!

---

📌 Step 3: Initialize Git in Each Project

Each part of the project will be a separate Git repository.

1️⃣ Initialize Git in Backend

cd backend
git init
git branch -M main
git add .
git commit -m "Initial commit - Backend"

2️⃣ Initialize Git in Frontend-Web

cd ../frontend/web
git init
git branch -M main
git add .
git commit -m "Initial commit - Frontend Web"

3️⃣ Initialize Git in Frontend-Mobile

cd ../mobile
git init
git branch -M main
git add .
git commit -m "Initial commit - Frontend Mobile"

✅ Git is now set up for all three parts!

---

📌 Step 4: Create & Link GitHub Repositories

Now, create 3 separate repositories on GitHub:

• master_saas_cbm_backend
• master_saas_cbm_frontend_web
• master_saas_cbm_frontend_mobile

Connect them to local Git repositories:

For Backend

cd ~/Development/master_saas_cbm/backend
git remote add origin [e-mail]:YourUsername/master_saas_cbm_backend.git
git pull origin main --allow-unrelated-histories --rebase
git push -u origin main

For Frontend-Web

cd ../frontend/web
git remote add origin [e-mail]:YourUsername/master_saas_cbm_frontend_web.git
git pull origin main --allow-unrelated-histories --rebase
git push -u origin main

For Frontend-Mobile

cd ../mobile
git remote add origin [e-mail]:YourUsername/master_saas_cbm_frontend_mobile.git
git pull origin main --allow-unrelated-histories --rebase
git push -u origin main

✅ All three projects are now linked to GitHub!

---

📌 Step 5: Add FTP Secrets to GitHub

Go to GitHub → Your Repository → Settings → Secrets and Variables → Actions

For each repository (backend, frontend-web, frontend-mobile), add the following Repository Secrets:

Secret Name	Value
FTP_HOSTNAME	yourserver.com
FTP_PORT	21 (for FTP) or 22 (for SFTP)
FTP_USERNAME	Your cPanel FTP username
FTP_PASSWORD	Your FTP password
FTP_SERVER_DIR_BACKEND	/public_html/backend/
FTP_SERVER_DIR_WEB	/public_html/frontend_web/
FTP_SERVER_DIR_MOBILE	/public_html/frontend_mobile/

✅ Now, GitHub Actions can securely deploy your files via FTP.

---

📌 Step 6: Set Up CI/CD for Backend, Frontend-Web & Mobile

1️⃣ Backend (backend/.github/workflows/deploy.yml)

name: 🚀 Deploy Backend via FTP

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Deploy Backend via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_HOSTNAME }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          port: ${{ secrets.FTP_PORT }}
          local-dir: ./
          server-dir: ${{ secrets.FTP_SERVER_DIR_BACKEND }}

2️⃣ Frontend-Web (frontend-web/.github/workflows/deploy.yml)

name: 🚀 Deploy Frontend-Web via FTP

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Install Dependencies
        run: npm install

      - name: Build React.js App
        run: npm run build

      - name: Deploy Web App via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_HOSTNAME }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          port: ${{ secrets.FTP_PORT }}
          local-dir: ./build/
          server-dir: ${{ secrets.FTP_SERVER_DIR_WEB }}

✅ Now, backend, frontend-web, and frontend-mobile deploy separately!

---

🚀 Your CI/CD pipeline is now fully automated! Every time you push to GitHub, your latest code is deployed instantly.