Forem

Cover image for Complete CI/CD Setup Guide: Automate SaaS Deployment with GitHub Actions
bobby1974
bobby1974

Posted on

1 1

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

2️⃣ Create backend & frontend directories:

mkdir backend frontend
mkdir frontend/mobile frontend/web
Enter fullscreen mode Exit fullscreen mode

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

touch backend/.gitkeep

touch frontend/mobile/.gitkeep

touch frontend/web/.gitkeep
Enter fullscreen mode Exit fullscreen mode

βœ… 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"
Enter fullscreen mode Exit fullscreen mode

2️⃣ Initialize Git in Frontend-Web

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

3️⃣ Initialize Git in Frontend-Mobile

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

βœ… 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

βœ… 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 }}
Enter fullscreen mode Exit fullscreen mode

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 }}
Enter fullscreen mode Exit fullscreen mode

βœ… 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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay