5.6 KiB
//[doc-seo]
{
"Description": "Learn how to build modern web applications with ABP React UI, including runtime configuration, authentication, Admin Console, shadcn/ui components, and testing."
}
React UI
ABP provides a React UI option for building modern, client-side web applications. React UI is part of the modern template system and is available with ABP Studio v3.0+ through the Modern Wizard or with abp new --modern using ABP CLI.
React UI is not available in classic, non-modern templates. Use ABP Studio's modern template flow or Volo.Abp.Studio.Cli to create a React-based solution.
Technology Stack
The React UI template is built with:
| Technology | Purpose |
|---|---|
| Vite | Build tool and dev server |
| React | UI framework |
| TanStack Router | Client-side routing |
| TanStack Query | Server state and API request orchestration |
| shadcn/ui | Source-owned component library built on Radix UI and Tailwind CSS |
| Zod | Schema validation |
| React Hook Form | Form state management |
| Axios | HTTP client |
| Vitest | Unit testing |
| OpenID Connect / OIDC | Authentication against the ABP Auth Server |
The template also includes ABP-specific NPM packages:
React App and Admin Console
A modern React solution contains two UI surfaces:
- Your React application: the developer-owned SPA where you build application-specific pages and features.
- ABP Admin Console: the React-based administration UI for ABP modules.
The Admin Console is provided by the Volo.Abp.AdminConsole NuGet package in layered and single-layer templates. In microservice templates, it is also generated as a separate apps/react-admin-console/ app and served through the Web Gateway.
See Admin Console for hosting, module discovery, and permission details.
Solution Structure
The React app location depends on the modern template type:
- Layered (
app --modern) and single-layer (app-nolayers --modern): the React app lives in thereact/folder at the solution root. - Microservice (
microservice --modern): the React app lives atapps/react/.
Typical structure:
react/
├── dynamic-env.json
├── public/
├── src/
│ ├── components/
│ ├── lib/
│ ├── locales/
│ ├── pages/
│ ├── routes/
│ └── main.tsx
├── package.json
├── vite.config.ts
└── vitest.config.ts
Creating a Solution
Install or update Volo.Abp.Studio.Cli, then create a modern solution:
# Layered app with React UI
abp new Acme.BookStore --template app --modern --ui-framework react
# Single-layer app with React UI
abp new Acme.BookStore --template app-nolayers --modern --ui-framework react
# Microservice solution with React UI
abp new Acme.BookStore --template microservice --modern --ui-framework react
You can also use ABP Studio v3.0+ and select the modern template flow in the New Solution wizard. The wizard preconfigures local ports, runtime configuration, OIDC clients, theme options, and React/Admin Console wiring based on the selected template and modules.
Running the Application
Start the backend from ABP Studio or by running the backend host projects, then start the React development server.
For layered and single-layer templates:
cd react
npm install
npm run dev
For microservice templates:
cd apps/react
npm install
npm run dev
Run tests with:
npm run test
Build for production with:
npm run build
Documentation Map
Use these pages to learn each part of the React UI:
- Environment Variables: runtime configuration,
dynamic-env.json, Vite variables, and Studio-generated defaults. - Authorization: OIDC, Authorization Code flow with PKCE, auth provider, hooks, and route guards.
- Localization: i18next, local JSON resources, ABP localization keys, and request culture.
- Permission Management: fetching granted policies,
usePermissions(), route protection, and conditional UI. - HTTP Requests: Axios setup, interceptors, typed API modules, and TanStack Query usage.
- Customization: changing pages, themes, sidebar items, user menu entries, and shadcn/ui components.
- Components: component architecture, UI primitives, layout components, forms, and routing.
- Unit Testing: Vitest, React Testing Library, examples, and test workflow.
- Admin Console: the
Volo.Abp.AdminConsolepackage,/admin-console/*hosting, module discovery, and optional modules.