React CI/CD Starter

Overview

React-CI-CD is a production-ready React + TypeScript + Vite starter focused on shipping with confidence: strict typing, lint + format enforcement, unit/integration tests with coverage, E2E tests against the production preview build, and fully automated CI + GitHub Pages deployment.

What it demonstrates

• Opinionated frontend “quality gates” (lint, typecheck, tests, build)
• Unit/integration testing with Vitest + React Testing Library (+ coverage)
• E2E testing with Playwright against the production preview server
• Conventional Commits + git hooks (Husky + lint-staged + Commitlint)
• CI pipeline + CD workflow with GitHub Actions (deploy to Pages)

Key features

• Strict TypeScript (extra safety options enabled)
• ESLint rules for TypeScript + hooks + refresh + accessibility
• Prettier formatting integrated with lint-staged/Husky
• Conventional Commits enforced (commit-msg hook + PR title checks)
• CI workflow runs:
  • lint
  • typecheck
  • unit/integration tests + coverage
  • build
  • Playwright E2E
• CD workflow deploys dist/ to GitHub Pages with the correct base path
• Dependabot weekly updates for npm dependencies

Live demo

• Open React-CI-CD

Quickstart

git clone https://github.com/casaisdev/React-CI-CD.git

See the README on GitHub for install, scripts, and workflow details.

Notes

• Playwright runs against npm run preview (built dist/) so E2E validates the production bundle, not dev mode.
• GitHub Pages deploy uses the correct base path for routing under /<repo>/.
• Hooks + CI are aligned so “green checks” ≈ “safe to merge”.

Next steps

If I were to evolve this starter further:

• Add visual regression testing (Playwright screenshots)
• Add a release flow (tags + changelog + semantic versioning)
• Add a template mode (scaffold generator / cookiecutter-style)
• Add optional Docker-based CI for closer prod parity