Forem: bobby1974

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

bobby1974 — Wed, 22 Jan 2025 14:19:04 +0000

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 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.

Automating SaaS Deployment: Automating SaaS Deployment: A Solo Developer’s CI/CD Journey

bobby1974 — Wed, 22 Jan 2025 14:14:10 +0000

Automating SaaS Deployment: A Solo Developer’s CI/CD Journey

🚀 The Challenge: The Struggles of Manual Deployment

For a long time, my workflow as a solo developer was completely manual. Every time I updated my project, I had to:

✅ Develop everything on my MacBook
✅ Manually upload backend files via FileZilla
✅ Copy and paste frontend updates into the public_html directory
✅ Worry about accidentally breaking the website
✅ Keep a local backup of my React Native mobile project without versioning

This worked—but it was slow, error-prone, and frustrating.

🔄 Enter Git, GitHub & CI/CD: The Game-Changer

I wanted to move to Continuous Integration and Deployment (CI/CD) but didn’t know where to start. The idea of automating deployments felt complex. Slowly, a structured plan emerged.

✅ Step 1: Structuring the Project for Better Organization

Instead of keeping everything in one place, I created three separate projects:

📂 Backend → Handles API requests & database interactions.
📂 Frontend-Web → React.js SaaS website.
📂 Frontend-Mobile → React Native mobile app.

Each part became its own GitHub repository, so I could update and deploy them independently.

🚀 The Breakthrough: Automating Deployment via GitHub Actions

I wanted my workflow to be as simple as:
✅ Make changes
✅ Push to GitHub
✅ Files automatically deploy to the server

How We Built It:

Set up Git repositories for backend, frontend-web, and frontend-mobile
Configured GitHub Actions to handle FTP deployment
Stored credentials securely using GitHub Secrets
Automated React.js build processes before deployment
Kept the mobile app backed up until it’s ready for the App Store & Play Store

📌 The Final Workflow: Simplicity & Power

Now, every time I push my code, the latest version is automatically deployed. No more manual uploads, no more deployment worries!

✅ Backend updates → Automatically deployed via FTP.
✅ Frontend-web updates → Built, then deployed via FTP.
✅ Frontend-mobile → Temporarily stored for backup until final release.

🚀 What once took 30-45 minutes per update now happens instantly!

💡 A Message to Developers

If you’re struggling with manual deployments, this guide will help you transform your workflow. CI/CD isn’t just for big teams—it’s a lifesaver for solo developers too!

I have also documented the entire step-by-step process of how this CI/CD pipeline was built, including:
✅ Git & GitHub setup
✅ Folder structure for efficient deployment
✅ CI/CD pipeline with GitHub Actions
✅ Automating deployments using FTP

💡 Read the full tutorial here: [Insert Link to the CI/CD Instructions Post]

📌 Helpful Git, GitHub, and CLI Commands for Developers

🔹 Git Commands

Command	Description
`git init`	Initialize a new Git repository
`git clone <repo-url>`	Clone an existing repository
`git branch -M main`	Rename the current branch to `main`
`git add .`	Stage all changes for commit
`git commit -m "message"`	Commit changes with a message
`git push origin main`	Push changes to GitHub
`git pull origin main`	Pull latest changes from GitHub
`git status`	Check the status of your repo
`git log --oneline`	View commit history
`git reset --soft HEAD~1`	Undo last commit but keep changes

🔹 GitHub Commands

Command	Description
`gh repo create <repo-name>`	Create a new repository using GitHub CLI
`gh auth login`	Authenticate GitHub CLI
`gh issue list`	List all issues in a repo
`gh pr create`	Create a pull request
`gh secret set <name> -b"value"`	Add a secret to GitHub Actions

🔹 Useful CLI Commands

Command	Description
`ls -la`	List files with details
`mkdir <folder-name>`	Create a new folder
`rm -rf <folder-name>`	Delete a folder and its contents
`chmod 755 <file>`	Change file permissions
`pm2 restart all`	Restart all Node.js applications
`curl -I <url>`	Check if a website is reachable

🚀 These commands will help streamline your development and deployment process Mahaprabhu!

Forem: bobby1974

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

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

📌 Step 1: Delete Old Files & Start Fresh

1️⃣ Delete Everything Locally

2️⃣ Delete Old Repositories from GitHub

📌 Step 2: Create a Clean Folder Structure

📌 Step 3: Initialize Git in Each Project

1️⃣ Initialize Git in Backend

2️⃣ Initialize Git in Frontend-Web

3️⃣ Initialize Git in Frontend-Mobile

📌 Step 4: Create & Link GitHub Repositories

Connect them to local Git repositories:

For Backend

For Frontend-Web

For Frontend-Mobile

📌 Step 5: Add FTP Secrets to GitHub

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

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

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

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

Automating SaaS Deployment: Automating SaaS Deployment: A Solo Developer’s CI/CD Journey

Automating SaaS Deployment: A Solo Developer’s CI/CD Journey

🚀 The Challenge: The Struggles of Manual Deployment

🔄 Enter Git, GitHub & CI/CD: The Game-Changer

✅ Step 1: Structuring the Project for Better Organization

🚀 The Breakthrough: Automating Deployment via GitHub Actions

How We Built It:

📌 The Final Workflow: Simplicity & Power

💡 A Message to Developers

📌 Helpful Git, GitHub, and CLI Commands for Developers

🔹 Git Commands

🔹 GitHub Commands

🔹 Useful CLI Commands

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

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