Vite React Boilerplate

This is a Vite & React Boilerplate project base on pnpm create vite.

Features

• Vite Latest
• React 18.3.1 => 19
• Typescript
• pnpm
• Test
  • vitest
  • react testing library
• Code style/lint
  • husky
  • lint-stage
  • eslint v9
  • prettier
    • use prettier-plugin-sort-imports
  • commitlint
• mock serve
  • msw for mock server and test, refer: Stop mocking fetch
• Tailwindcss
• UI Library: shadcn/ui
• React Router => TanStack Router ?
• Zustand
• Generate Api with type: orval
  • how to assert the response in UI due to the arval mock msw is random base on fake.js
• axios + React Query?
• e2e test: playwright
  • midscenejs using LLM to help testing.
• Docker
• Github actions/CI

TODO

• after gpr, run pnpm install automatically
• Migrate eslint + prettier to https://biomejs.dev/guides/getting-started/ ?
• using import { userEvent } from '@vitest/browser/context' https://cn.vitest.dev/guide/browser/examples.html#examples
• add eslint-plugin-testing-library, add eslint-plugin-jest-dom, @vitest/eslint-plugin

Know issues

Project Guidelines

refer this project: bulletproof-react: React Vite Application

test strategy

• react testing library Example
• 单元测试最佳实践与前端TDD

Getting Started

First, run the development server:

pnpm dev

Open http://localhost:3005 with your browser to see the result.

Learn More

TBD

Reference

• https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts
• https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-react-streaming-ts
• https://github.com/sozonome/vite-react-tailwind-starter
• https://github.com/alan2207/bulletproof-react/tree/master/apps/react-vite
• React 项目文件分层原则

SSR

• https://react.dev/reference/react-dom/server/renderToReadableStream
• https://reactrouter.com/en/main/guides/ssr

---

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})