This content originally appeared on DEV Community and was authored by bobby1974
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_backendmaster_saas_cbm_frontend_webmaster_saas_cbm_frontend_mobile
Connect them to local Git repositories:
For Backend
cd ~/Development/master_saas_cbm/backend
git remote add origin git@github.com: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 git@github.com: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 git@github.com: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.
This content originally appeared on DEV Community and was authored by bobby1974
bobby1974 | Sciencx (2025-01-22T14:19:04+00:00) Complete CI/CD Setup Guide: Automate SaaS Deployment with GitHub Actions. Retrieved from https://www.scien.cx/2025/01/22/complete-ci-cd-setup-guide-automate-saas-deployment-with-github-actions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.