//[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:

The template also includes ABP-specific NPM packages:

• @volo/abp-app-config
• @volo/abp-oidc-auth
• @volo/abp-react-app-config
• @volo/abp-react-oidc-auth

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 the react/ folder at the solution root.
• Microservice (microservice --modern): the React app lives at apps/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.AdminConsole package, /admin-console/* hosting, module discovery, and optional modules.

See Also

• ABP Studio
• ABP CLI
• Authorization
• Localization