Skip to content

README.md

Latest commit

 

History

History
303 lines (232 loc) · 6.16 KB

README.md

File metadata and controls

303 lines (232 loc) · 6.16 KB

🧩 Full-Stack Task App — CI/CD with GitHub Actions

📘 Overview

This project is a learning-focused full-stack application built to understand GitHub Actions CI/CD pipelines from scratch — including unit, integration, and end-to-end (E2E) testing with automated deployment.

🛠️ Tech Stack

Layer Technology
Frontend React + Vite
Backend Node.js + Express
Testing Jest, React Testing Library, Supertest, Playwright
CI/CD GitHub Actions
Deployment Frontend Github Pages
Deployment Backend Render

⚙️ Project Structure

fullstack-task-app/
│
├── backend/
│   ├── index.js
│   ├── package.json
│   ├── tests/
│   └── test-results/
│
├── frontend/
│   ├── src/
│   │   └── App.jsx
│   ├── vite.config.js
│   ├── config.js
│   └── tests/
│
├── e2e/
│   ├── playwright.config.js
│   ├── tests/
│   └── test-results/
│
└── .github/
    └── workflows/
        ├── unit-e2e-ci.yml
        ├── frontend-cd.yml
        └── backend-cd.yml

🚀 Local Setup

1. Clone the repository

git clone https://github.com/Indra512/fullstack-task-app.git
cd fullstack-task-app

2. Backend setup

cd backend
npm install

Run locally:

npm run dev

Backend runs by default on:
📡 http://localhost:4000

Environment variables (.env)

PORT=4000
RESET_DB=true

3. Frontend setup

cd frontend
npm install

Environment files

  • .env.development

    VITE_API_URL=http://localhost:4000

  • .env.production

    VITE_API_URL=https://your-backend.onrender.com

Run locally:

npm run dev

Frontend runs on:
🌐 http://localhost:5173

🧪 Testing Strategy

1. Backend Unit & Integration Tests

  • Framework: Jest + Supertest
  • Tests API endpoints (/tasks CRUD)

Run:

cd backend
npm test

2. Frontend Unit Tests

  • Framework: Jest + React Testing Library
  • Tests UI components and user interactions

Run:

cd frontend
npm test

3. End-to-End (E2E) Tests

  • Framework: Playwright
  • Tests full app workflow from UI to API

Run:

cd e2e
npx playwright test

🧹 To ensure a clean DB for E2E tests:

RESET_DB=true npm run dev

⚙️ Continuous Integration (CI)

CI Workflow: .github/workflows/unit-e2e-ci.yml

Runs backend, frontend, and E2E tests automatically.

Trigger:

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

Jobs:

  1. Backend Tests
  2. Frontend Tests
  3. E2E Tests (runs only after both backend + frontend pass)

Key Features:

  • Uploads test artifacts (Jest + Playwright results)
  • Waits for local servers (wait-on)
  • Sets environment vars for Playwright (VITE_API_URL)
  • Uses RESET_DB=true to start with empty DB

✅ Artifacts stored:

  • backend/test-results/**
  • frontend/test-results/**
  • e2e/test-results/playwright/**

🚢 Continuous Deployment (CD)

Goal

Deploy automatically only after all CI jobs pass successfully.

This is done via the workflow_run event.

🧩 Frontend Deployment Workflow: .github/workflows/frontend-cd.yml

name: Deploy Frontend to Github Pages

on:
  workflow_run:
    workflows: ["Unit And E2E Tests"]
    types:
      - completed

env:
    VITE_API_URL: https://fullstack-task-app.onrender.com
    VITE_DEPLOY_ENV: gh-pages

jobs:
  deploy-frontend:
    if: ${{ github.event.workflow_run.conclusion == 'success' }} # ✅ only if CI succeeded
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: npm
          cache-dependency-path: frontend/package-lock.json

      - name: Install dependencies
        run: npm ci

      - name: Build frontend
        run: npm run build

      - name: Deploy to Github Pages
        uses: peaceiris/actions-gh-pages@v4
        with: 
          github_token: ${{ secrets.TOKEN }}
          publish_dir: frontend/dist

🧩 Backend Deployment Workflow: .github/workflows/backend-cd.yml

name: Deploy Backend to Render

on:
  workflow_run:
    workflows: ["Unit And E2E Tests"]
    types:
      - completed

jobs:
  deploy-backend:
    if: ${{ github.event.workflow_run.conclusion == 'success' }} # ✅ only if CI succeeded
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Render deploy
        run: |
          echo "Triggering Render deploy for backend..."
          curl -X POST "https://api.render.com/v1/services/${{ secrets.RENDER_SERVICE_ID }}/deploys" \
            -H "Authorization: Bearer ${{ secrets.RENDER_API_KEY }}" \
            -H "Content-Type: application/json"

🔒 Secrets in GitHub

Set these under:
Repo → Settings → Secrets and variables → Actions

Secret Name Description
RENDER_API_KEY Render API key

🔍 Troubleshooting Log

Issue Cause Fix
CORS error (localhost) Backend missing headers Added app.use(cors())
E2E artifact upload failed Wrong path in upload step Fixed with correct e2e/test-results/playwright/**
CI failing (missing env) VITE_API_URL not set Added env: section in workflow
workflow_run not triggered Special chars in workflow name Renamed to simple CI-Pipeline-Unit-E2E
YAML syntax error Colon : in unquoted string Quoted names properly
White screen on deploy Using local .env values Added correct Render API URL in .env.production

🧭 Future Enhancements

  • ☁️ Add database (MongoDB / PostgreSQL)
  • 🧪 Add visual regression tests (Playwright + Percy)
  • 🔔 Add Slack notifications for build/deploy status

📜 License

MIT License © 2025 — [Indra Prajapati]