A production-ready React application built with Vite, TypeScript, and modern tooling.
- ⚡ Vite - Next generation frontend tooling
- ⚛️ React 19 - Latest React with React Compiler
- 📘 TypeScript - Type-safe development
- 🧪 Vitest - Fast unit testing framework
- 🎨 Prettier - Code formatting
- 🔍 ESLint - Code linting with Prettier integration
- 🪝 Husky - Git hooks for quality assurance
- 📝 Commitlint - Conventional commit messages
- 🚀 Production-ready - Optimized build and development setup
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
- Node.js 18+
- pnpm (recommended) or npm/yarn
pnpm installpnpm devpnpm buildpnpm preview# Check for linting errors
pnpm lint
# Auto-fix linting errors
pnpm lint:fix# Format all files
pnpm format
# Check formatting without making changes
pnpm format:check# Run tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Run tests with coverage
pnpm test:coverage
# Run tests with UI
pnpm test:ui
# Run tests in CI mode
pnpm test:ciThis project uses Husky to enforce code quality:
- pre-commit: Runs lint-staged to format and lint staged files
- commit-msg: Validates commit messages using conventional commits
- pre-push: Runs tests before allowing push
This project follows Conventional Commits:
<type>(<scope>): <subject>
<body>
<footer>
Types: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert
The React Compiler is enabled on this template. See this documentation for more information.
Note: This will impact Vite dev & build performances.
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x';
import reactDom from 'eslint-plugin-react-dom';
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);