DEV Community

Cover image for I Set Up CI/CD for My React App in 5 Minutes — Here's the Exact YML Config
Sayista Yazdani
Sayista Yazdani

Posted on

I Set Up CI/CD for My React App in 5 Minutes — Here's the Exact YML Config

I used to deploy my React apps manually like a caveman.

npm run build → drag dist/ somewhere → pray nothing breaks.

Then a senior dev looked at me and said: "Bhai, GitHub Actions free hai. Use kar le."

And that changed everything.

Now I just git push origin main and my site is live in 30 seconds. No kidding.

Let me show you the exact setup — no fluff, just copy-paste material.

Step 1: Push Your Code (Obvious, but still) 

git add -A
git commit -m "feat: complete modern React conversion"
git push origin main
Enter fullscreen mode Exit fullscreen mode

Step 2: The Magic Folder

GitHub scans your repo for .github/workflows/. Anything ending in .yml inside this folder becomes an automation script.

That's it. No npm packages to install. No third-party dashboards. Just a folder and a file.

Step 3: The Complete YML File (Line-by-Line Breakdown) 

# Your automation task ka naam — kuch bhi rakh lo
name: Deploy to GitHub Pages

# Trigger: kab chalu hona chahiye?
on:
  push:
    branches:
      - main  # jab bhi main branch pe push hoga, tab chalega

# Permissions: GitHub Pages pe deploy karne ke liye rights chahiye
permissions:
  contents: write

# Actual kaam — GitHub's cloud servers pe kya execute hoga
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest  # GitHub free Linux server allot karta hai

    steps:
      # A: Push kiya hua code clone karo
      - name: Checkout Code
        uses: actions/checkout@v4

      # B: Node.js 20 setup karo
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      # C: Dependencies install karo (npm install se better, cleaner)
      - name: Install Dependencies
        run: npm ci

      # D: React app ko build karo — optimized dist/ folder banega
      - name: Build Application
        run: npm run build

      # E: dist/ folder ko automatically gh-pages branch pe upload kar do
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist
          branch: gh-pages
Enter fullscreen mode Exit fullscreen mode

Step 4: Enable Permissions (One-Time Thing)

Your robot needs permission to write files. Go to:

Repository → Settings → Actions → General → Workflow permissions → Read and write permissions → Save

Step 5: Watch It Happen

  1. Go to the Actions tab in your repo
  2. Yellow spinning circle = build chalu hai
  3. Click karo → real-time logs dikhenge
  4. Green checkmark = done ✅
  5. Go to Settings → Pages → select gh-pages branch → your site is LIVE

Every future push → auto update in ~30 seconds.

My Take

I know CI/CD sounds scary. "DevOps wale cheezein" — but honestly, this is just a config file. That's it.

If you know how to write React, you already know enough to automate your deploys. GitHub is literally giving you free cloud servers to do the boring work.

Stop deploying manually. Your time is worth more than that.

Drop a ❤️ if this helped, or comment if you want me to explain any specific part in more detail!

Top comments (0)