# Ant Design Pro — Enterprise-Class React Admin Framework by Ant Group

> An out-of-the-box React admin solution with TypeScript, UmiJS routing, and the full Ant Design component ecosystem.

## Install

Save as a script file and run:

# Ant Design Pro — Enterprise-Class React Admin Framework by Ant Group

## Quick Use
```bash
npx create-umi my-admin --template ant-design-pro
cd my-admin
npm install
npm start
```

## Introduction
Ant Design Pro is a production-ready React admin framework built on UmiJS and the Ant Design component library. Developed by Ant Group, it provides enterprise-level patterns for permissions, layouts, data flow, and internationalization that power hundreds of internal Alibaba systems.

## What Ant Design Pro Does
- Scaffolds complete admin applications with best-practice project structure
- Provides ProComponents (ProTable, ProForm, ProLayout) for rapid CRUD development
- Implements route-level and component-level access control via policies
- Integrates OpenAPI schema generation for automatic API client code
- Offers built-in mock data and testing infrastructure

## Architecture Overview
Ant Design Pro sits on top of UmiJS, a pluggable React application framework. Data flow uses a lightweight model layer (dva or hooks-based). ProLayout handles the shell (sidebar, header, breadcrumbs) while ProComponents abstract common patterns like searchable tables and multi-step forms into config-driven components.

## Self-Hosting & Configuration
- Use the official CLI or Umi plugin to scaffold a new project
- Define routes and access policies in `config/routes.ts`
- Configure proxy rules in `config/proxy.ts` for dev-time API forwarding
- Set environment variables for API endpoints in `.env` files
- Deploy the production build as static files or serve via Node.js with SSR

## Key Features
- ProComponents reduce boilerplate for tables, forms, and descriptions
- Block system lets you insert pre-built page templates into your project
- Built-in internationalization with automatic locale detection
- TypeScript-first with full type coverage across all layers
- Integrated testing setup with Jest and React Testing Library

## Comparison with Similar Tools
- **vue-element-admin** — Vue 2 equivalent, larger star count but older tech stack
- **react-admin** — Framework-agnostic data layer, less opinionated UI
- **Refine** — Headless approach, supports multiple UI libs beyond Ant Design
- **Next.js Admin Templates** — More flexible routing but less admin-specific tooling
- **AdminJS** — Node.js auto-generated admin, less customizable frontend

## FAQ
**Q: Do I need to use UmiJS?**
A: Ant Design Pro is tightly coupled to UmiJS for routing and plugins. Using it standalone requires significant rewiring.

**Q: Is it compatible with Next.js?**
A: ProComponents can be used in any React project, but the full Pro framework (layouts, permissions) assumes UmiJS.

**Q: How are permissions handled?**
A: Routes define `access` properties, and a central access factory function determines what the current user can see or do.

**Q: Can I upgrade from v4 to v5?**
A: Yes, with breaking changes around the data flow layer (dva to hooks) and layout APIs. Migration guides are provided.

## Sources
- https://github.com/ant-design/ant-design-pro
- https://pro.ant.design/

---
Source: https://tokrepo.com/en/workflows/asset-d1ef9168
Author: Script Depot