095
LVL 04 — SENIOR-IN-TRAININGSESSION 095DAY 95

CI/CD PIPELINE

🎫 PIXELCRAFT-081
🔧DevOps | 🔴 Expert | Priority: 🔴 Critical

Currently deploying means: run tests locally (sometimes forgotten), build, manually copy files to server. Set up CI/CD: every push triggers automated linting, testing, building, and deployment.
CONCEPTS.UNLOCKED
🔄
CI (Continuous Integration)
Automatically lint and test every push. Every commit is verified before it's merged. Broken code is caught immediately — not discovered in production by a user.
🚀
CD (Continuous Deployment)
Automatically deploy after tests pass. Merge to main → tests run → build → deploy to production. No manual steps. No "I forgot to deploy." Shipping becomes a non-event.
⚙️
GitHub Actions
Workflow files that run on GitHub's servers. YAML files in .github/workflows/ define pipelines. Triggered by push, PR, schedule, or manual dispatch. Free for public repos.
📋
Pipeline Stages
lint → test → build → deploy. Each stage depends on the previous. If linting fails, tests don't run. If tests fail, deployment doesn't happen. Fail fast, fail early.
🔑
Environment Secrets
Store API keys and deploy tokens securely. GitHub encrypts secrets and injects them at runtime. Never in code, never in logs. ${{ secrets.DEPLOY_TOKEN }} — available only during CI runs.
🌍
Staging vs Production
Deploy to staging first, verify, then promote. Staging is a copy of production with test data. Catch configuration issues before real users see them. Two environments, one pipeline.
HANDS-ON.TASKS
01
Create CI/CD Pipeline
# .github/workflows/ci.yml name: PixelCraft CI/CD on: push: branches: [main] pull_request: branches: [main] jobs: lint-and-test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' - name: Install dependencies run: npm ci - name: Lint run: npm run lint - name: Type check run: npm run typecheck - name: Unit & integration tests run: npm test - name: Build run: npm run build
02
E2E Tests Stage
e2e-tests: needs: lint-and-test runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - run: npm ci - name: Install Playwright run: npx playwright install --with-deps - name: Run E2E tests run: npm run test:e2e - uses: actions/upload-artifact@v4 if: failure() with: name: playwright-report path: playwright-report/
03
Deploy Stage
deploy-staging: needs: e2e-tests if: github.ref == 'refs/heads/main' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - run: npm ci - run: npm run build - name: Deploy to staging run: | # Deploy frontend to Vercel # Deploy backend to Railway env: DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
The deploy stage only runs on pushes to main (not on PRs). It depends on e2e-tests passing. If any previous stage fails, deployment is skipped.
04
Pre-Push Hooks with Husky
npm install -D husky npx husky init # .husky/pre-push npm run lint && npm run typecheck # Catches issues BEFORE they reach CI. # Faster feedback loop: fail locally # in seconds instead of waiting 5 min # for CI to tell you the same thing.
05
Branch Protection Rules

GitHub → Settings → Branches → Branch protection rules → main:

✅ Require pull request before merging ✅ Require status checks to pass → lint-and-test → e2e-tests ✅ Require branches to be up to date ✅ Do not allow bypassing // Now: nobody can push directly to main. // Every change goes through a PR. // Every PR must pass CI. // Broken code cannot reach main.
06
Close the Ticket
git switch -c devops/PIXELCRAFT-081-ci-cd git add .github/ .husky/ package.json git commit -m "Add CI/CD pipeline + branch protection (PIXELCRAFT-081)" git push origin devops/PIXELCRAFT-081-ci-cd # PR → Watch CI run → Green ✅ → Merge
CS.DEEP-DIVE

CI/CD is the automation of the software delivery pipeline.

The DevOps philosophy: remove manual steps, automate everything, fail fast. The same principle applies at every level of software engineering.

// Without CI/CD:
  Developer forgets to test
  → Bug ships to production
  → User reports it 3 days later
  → Hard to reproduce, fix takes days

// With CI/CD:
  Developer pushes code
  → CI runs tests in 3 minutes
  → Bug caught immediately
  → Fix while context is fresh

// The pipeline:
lint    → code style (seconds)
typecheck → type errors (seconds)
unit    → logic bugs (seconds)
integration → API bugs (minutes)
e2e     → user flow bugs (minutes)
deploy  → production (minutes)

// Each stage is a safety net.
// Bugs are caught at the cheapest
// possible stage.
"CI/CD Lab"
[A]Add a Lighthouse CI step: run Lighthouse in CI and fail if the performance score drops below 85. Performance regressions are caught before merge, just like test failures.
[B]Add deploy previews: every PR gets its own temporary URL (Vercel does this automatically). Reviewers can test the changes on a real URL before approving the PR.
[C]Research: what is GitOps? Infrastructure as code, declarative config, Git as the single source of truth. How do companies like Netflix deploy 100+ times per day? Write a brief analysis.
REF.MATERIAL
ARTICLE
GitHub
Official Actions guide: workflows, jobs, steps, secrets, matrix builds, caching, and reusable workflows. The standard CI/CD for open-source.
ACTIONSOFFICIALESSENTIAL
VIDEO
Fireship
Quick GitHub Actions setup: YAML syntax, triggers, jobs, secrets, and real-world workflow examples for Node.js projects.
ACTIONSQUICK
ARTICLE
Martin Fowler
The original CI article: what it is, why it matters, and the practices that make it work. The theory behind the practice.
CITHEORYESSENTIAL
ARTICLE
Typicode
Manage Git hooks: pre-commit, pre-push, commit-msg. Enforce linting and type checking before code leaves your machine.
HUSKYHOOKS
VIDEO
TechWorld with Nana
Complete CI/CD pipeline walkthrough: build, test, deploy, monitor. The DevOps lifecycle from code to production.
DEVOPSTUTORIAL
// LEAVE EXCITED BECAUSE
Push code → tests run automatically → deployment happens automatically. Green checkmark means "safe to merge." This is how every professional team ships software.