Git Strategies for Frontend Teams: Branching and CI/CD

Git Strategies for Frontend Teams: Branching and CI/CD | DevPrep

main ─────────────────────────────────── (always deployable)
      \\                         /
       feature/new-header ────── (PR + review + merge)

main ─────────────────────────────────── (deploy continuously)
      \\     /    \\     /    \\     /
       short-lived branches (< 1 day)

// Conventional Commits
feat: add user avatar upload
fix: resolve memory leak in dashboard
refactor: simplify auth middleware
docs: update API documentation
test: add unit tests for cart service
chore: update dependencies
perf: optimize image loading pipeline

// With scope
feat(auth): add social login with Google
fix(cart): prevent duplicate item addition

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run lint        # ESLint + Prettier
      - run: npm run typecheck   # TypeScript
      - run: npm run test        # Unit tests
      - run: npm run build       # Build check
      
  preview:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - run: npm run build
      - uses: deploy-preview-action  # Deploy PR preview

# Interactive rebase (clean up commits before merge)
git rebase -i HEAD~3

# Stash changes (switch context quickly)
git stash
git stash pop

# Cherry-pick (grab specific commit)
git cherry-pick abc1234

# Bisect (find which commit introduced a bug)
git bisect start
git bisect bad          # Current commit is bad
git bisect good v1.0    # This version was good
# Git binary searches for the breaking commit

Git Strategies for Frontend Teams: Branching and CI/CD

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Branching Strategies

GitHub Flow (Recommended for most teams)

Trunk-Based Development (Google's approach)

Commit Conventions

PR Best Practices

CI Pipeline

Useful Git Commands