@trapar-waves/react-antd-pro

April 27, 2026 · View on GitHub

npm version npm dm License GitHub last commit GitHub Actions Workflow Status Renovate

中文 | 日本語 | Русский язык

An enterprise application development template based on React 19 and Ant Design Pro 5, integrating TanStack toolchain (Router/Query), Rsbuild build tool, and Tailwind CSS styling solution, focusing on efficient development and type safety.

✨ Features

  • Modern Framework: Built on React 19, supporting component-based development and hooks pattern.
  • Enterprise UI: Integrates Ant Design 5 basic components + Ant Design Pro business components (including ProTable/ProForm, etc.).
  • Type Safety: Full TypeScript development with complete type systems covering API type definitions and state type checks.
  • Rapid Build: Uses Rsbuild instead of traditional webpack, achieving cold start of development server in 2 seconds.
  • Intelligent Routing: File-based routing with TanStack Router, auto-generating route configurations (supports nested routes).
  • State Management: Adopts lightweight Zustand instead of complex Redux, providing composable atomic state solutions.
  • Data Fetching: Wrapped Axios instance + TanStack Query (v5) for automatic request caching/retry/pagination.
  • Styling Solution: Integrated Tailwind CSS v4 + CSS Modules, supporting theme configuration and responsive design.
  • Debugging Tools: Built-in TanStack DevTools (Query/Router) and Rsbuild build analysis panel.
  • Animation Enhancement: Implements transition animations (e.g., route switching, component show/hide) via Motion library.

GitHub Pages

Pushing a version tag matching v* runs .github/workflows/pages.yml, which builds with BASE_PATH=/<repository-name>/ and PUBLIC_STATIC_API=true (in-browser mock for /api/login and /api/table, same behavior as the dev-server mock), copies dist/index.html to dist/404.html for SPA routing, and deploys to GitHub Pages. In the repository Settings → Pages, set Source to GitHub Actions once.

Local preview matching the Pages bundle (subpath + static API):

BASE_PATH=/react-antd-pro/ PUBLIC_STATIC_API=true pnpm run build && pnpm preview

PowerShell:

$env:BASE_PATH="/react-antd-pro/"; $env:PUBLIC_STATIC_API="true"; pnpm run build; pnpm preview

Deploys with a real backend should not set PUBLIC_STATIC_API; keep the default axios baseURL as \<BASE_URL>api and point your reverse proxy or server.proxy at your API.

💻 Tech Stack

  • Base Framework: React: Core for component-based development.
  • UI Component Library: Ant Design & Ant Design Pro: Enterprise-level basic components & Business component library (ProTable/ProForm).
  • State Management: Zustand: Lightweight state management solution.
  • Routing: TanStack Router: File-based routing + type-safe config.
  • Data Fetching: Axios & TanStack Query: HTTP client wrapper & Server state management (auto-cache/retry).
  • Build Tool: Rsbuild: Modern build tool based on webpack.
  • Styling Solution: Tailwind CSS & CSS Modules: Atomic CSS framework & Local scoped component styles.
  • Type System: TypeScript: Static type checking.
  • Debugging Tools: TanStack DevTools: Query/Router debugging panel.
  • Animation: Motion: Declarative animation library (route/component transitions).

See the package.json for a full list of dependencies.

🚀 Getting Started

Follow these instructions to get the project running locally.

Prerequisites

Ensure you have the following installed:

  • Node.js (>= 18.x recommended)
  • Package manager (npm, yarn, or pnpm)
node -v
npm -v

Installation

Run script

pnpm create trapar-waves

Install dependencies

npm install
yarn install
pnpm install

Development

Start the development server:

npm run dev
yarn dev
pnpm dev

Build for production:

npm run build
yarn build
pnpm build

Preview the production build:

npm run preview
yarn preview
pnpm preview

Lint the code:

npm run lint
yarn lint
pnpm lint

🤝 Contributing

Contributions are welcome and greatly appreciated! Please follow these steps to contribute:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

👤 Author