run: npm install
- name: Run frontend tests
working-directory: client
run: npm test
test-backend:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
- name: Install backend dependencies
working-directory: server
run: npm install
- name: Run backend tests
working-directory: server
run: npm test
Enter fullscreen mode Exit fullscreen mode
* * *
## [](#cd-pipeline-deployment)🚀 CD Pipeline (Deployment)
Now we deploy when everything passes.
### [](#example-deploy-backend-frontend)Example: Deploy backend + frontend
\`\`\`yaml id="cd5678"
name: Deploy Pipeline
on:
push:
branches: \[ main \]
jobs:
deploy-backend:
runs-on: ubuntu-latest
```
steps:
- uses: actions/checkout@v4
- name: Install backend
working-directory: server
run: npm install
- name: Build backend
working-directory: server
run: npm run build
- name: Deploy backend to Render
run: |
curl -X POST ${{ secrets.RENDER_DEPLOY_HOOK }}
```
Enter fullscreen mode Exit fullscreen mode
deploy-frontend:
runs-on: ubuntu-latest
```
steps:
- uses: actions/checkout@v4
- name: Install frontend
working-directory: client
run: npm install
- name: Build React app
working-directory: client
run: npm run build
- name: Deploy to Vercel
run: |
npx vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
```
Enter fullscreen mode Exit fullscreen mode
🔐 GitHub Secrets (IMPORTANT)
You must store sensitive keys in:
👉 GitHub Repo → Settings → Secrets and Variables
Example secrets:
VERCEL_TOKEN=your-vercel-token
RENDER_DEPLOY_HOOK=https://api.render.com/deploy/xxx
Enter fullscreen mode Exit fullscreen mode
🧪 What happens when you push code?
Example flow:
```plaintext id="flow123"
- You push code to GitHub
- GitHub Actions starts CI
- Runs:
- React tests
- Node API tests
- If ALL pass:
- Builds frontend
- Builds backend
- CD triggers:
- Deploy backend (Render/AWS)
- Deploy frontend (Vercel) ```
🧠 What real companies add on top
🔥 1. Linting
```yaml id="lint1"
run: npm run lint
---
### 🔥 Code formatting check
```yaml id="fmt1"
run: npm run format:check
Enter fullscreen mode Exit fullscreen mode
🔥 Caching (faster builds)
```yaml id="cache1"
uses: actions/cache@v4
---
### 🔥 Database migrations (backend)
```yaml id="db1"
run: npm run migrate
Enter fullscreen mode Exit fullscreen mode
🔥 Parallel jobs
Frontend + backend run at the same time (already shown above)
🚀 Real-world deployment options
Frontend
- Vercel (most common)
- Netlify
- AWS S3 + CloudFront
Backend
- Render
- Railway
- AWS EC2 / ECS
- DigitalOcean
⚠️ Common mistakes in CI/CD
❌ No environment variables
→ app works locally but fails in CI
❌ Missing build step
→ deployment breaks
❌ Not separating frontend/backend
→ messy pipeline
❌ No test stage
→ broken code gets deployed
🧭 Production-grade CI/CD flow
```plaintext id="prod1"
Push → CI Tests → Build → Approval (optional) → Deploy → Monitor
---
# 💡 Final Summary
A real CI/CD pipeline:
* Tests frontend + backend automatically
* Builds apps only if tests pass
* Deploys without manual work
* Prevents broken code from reaching users
Enter fullscreen mode Exit fullscreen mode
