-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Add blog post: Official React UI for ABP #25073
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft
enisn
wants to merge
5
commits into
rel-10.3
Choose a base branch
from
react-announcement
base: rel-10.3
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
198b5c8
Add blog post: Official React UI for ABP
enisn 4014134
Optimised images with calibre/image-actions
github-actions[bot] 678ac62
Update post.md
enisn e175e36
Merge branch 'react-announcement' of https://github.com/abpframework/…
enisn 613773b
Optimised images with calibre/image-actions
github-actions[bot] File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file added
BIN
+42 KB
...fficial-react-ui-is-coming-to-abp-framework/images/abp-react-app-screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+36.6 KB
...eact-ui-is-coming-to-abp-framework/images/abp-studio-project-creation-react.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+161 KB
...ticles/2026-03-12-official-react-ui-is-coming-to-abp-framework/images/cover.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 86 additions & 0 deletions
86
...munity-Articles/2026-03-12-official-react-ui-is-coming-to-abp-framework/post.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| # Something Big Is Happening: Official React UI Is Coming to ABP Framework | ||
|
|
||
| Something big is happening in the ABP ecosystem. | ||
|
|
||
| We are working on an **official React UI template** for ABP Framework, and we wanted to share an early look at the direction. It is still under active development, so some details may evolve before the release, but the foundation is already exciting: a modern React experience that feels naturally integrated with the ABP way of building applications. | ||
|
|
||
|  | ||
|
|
||
| ## Why this matters | ||
|
|
||
| ABP Framework has always been about helping teams build modern, maintainable, production-ready applications faster. With the upcoming React template, we are extending that same vision to teams who want ABP on the backend and React on the frontend without losing the built-in application features that make ABP productive from day one. | ||
|
|
||
| This is not just about creating another empty starter. The goal is a **first-class UI option** that fits into the ABP application startup experience and works naturally with familiar ABP concepts such as authentication, authorization, localization, multi-tenancy, modularity, and deployability. | ||
|
|
||
| ## A quick look at the architecture | ||
|
|
||
| The current implementation shows a clear and practical direction. | ||
|
|
||
| On the backend side, the familiar ABP application structure stays in place. The React app lives as a dedicated frontend application in the solution and communicates with the ABP backend through HTTP APIs. For local development, the frontend uses a development proxy so the developer experience stays smooth. For deployment scenarios, the template is also prepared for runtime configuration and container-based environments. | ||
|
|
||
| The frontend bootstrapping flow is also designed with ABP integration in mind. Before the app renders, it loads runtime configuration and initializes OpenID Connect authentication. After that, the application starts with providers for theming, authentication, routing, and server-state management. In practice, this means the React template is being built as a real application shell, not just a static UI layer. | ||
|
|
||
| Another nice touch is how the API communication is organized. Instead of scattering raw fetch calls across the app, the template uses a dedicated API layer with typed modules. That layer is wired with ABP-aware behavior such as bearer token handling, tenant context, localization headers, and authorization redirects. It creates a strong base for building real business applications. | ||
|
|
||
| ## A different frontend philosophy | ||
|
|
||
| One of the most important things to understand is that this React UI is **not** being shaped with exactly the same architecture as some of the previous UI options. | ||
|
|
||
| We are not trying to ship the whole frontend experience as a closed set of page implementations coming from npm packages. Instead, the goal is to give developers much more direct control over the generated application, its design system, and the frontend code they work with every day. | ||
|
|
||
| In practice, the generated solution includes the actual page code inside the app itself. You can open it, understand it, refactor it, redesign it, and adapt it without fighting against a packaged black box. We provide the foundations and reusable components, while the page layer stays in the hands of the application developer. | ||
|
|
||
| ## Built for AI-Driven Development | ||
|
|
||
| The new React template is also being shaped for the era of **AI-assisted development**. We intentionally picked common, modern technologies that AI tools and coding agents already understand and work with very well. | ||
|
|
||
| Just as importantly, the generated app contains the real frontend and page code inside the solution. That makes it much easier for AI to read the codebase, learn the project patterns, and help generate, customize, and refactor features without running into a packaged black box. | ||
|
|
||
| ## What the React experience looks like | ||
|
|
||
| The current template already points to the kind of experience React developers expect from a modern application: | ||
|
|
||
| - A Vite-powered React + TypeScript frontend | ||
| - Structured routing with route guards and permission-aware navigation | ||
| - A clean application layout with separate account and app areas | ||
| - Typed API modules for common ABP features | ||
| - Included page implementations for account flows and administration scenarios, directly in the generated app | ||
| - A deployment story that considers Docker, Helm, and runtime environment configuration | ||
|
|
||
| From the source code, it is already clear that the template is being shaped as a real ABP solution experience, not just a login page plus a few demo screens. | ||
|
|
||
| > Image placeholder: A composite screenshot showing the React template in action, such as the login page, the main application shell, and one management page like Users, Roles, or Tenants. | ||
|
|
||
| ## Technologies currently in the mix | ||
|
|
||
| Because this work is still in progress, we do not want to over-promise on every implementation detail. Still, the current template already gives a strong signal about the overall stack and direction. | ||
|
|
||
| At the moment, the React UI is built around: | ||
|
|
||
| - **React** and **TypeScript** | ||
| - **Vite** for the frontend development experience | ||
| - **TanStack Router** for application routing | ||
| - **TanStack Query** for server-state and data-fetching workflows | ||
| - **Axios** for the API layer | ||
| - **Tailwind CSS** with a component approach based on modern UI primitives | ||
| - **React Hook Form** and **Zod** for form handling and validation | ||
| - **i18next** for localization | ||
| - ABP-specific React packages for **OIDC authentication**, **application configuration**, and **permission-aware behavior** | ||
|
|
||
| This combination gives the template a very modern feel while still keeping the focus on enterprise application needs. | ||
|
|
||
| ## More than a hello world | ||
|
|
||
| One of the most exciting parts is that the template is already going beyond the basics. | ||
|
|
||
| The current source shows support for account-related flows such as login, registration, password recovery, profile management, and session management. It also includes administrative areas such as identity management and settings, and it is being prepared to light up additional ABP modules depending on the solution configuration, including areas like SaaS management, audit logging, OpenIddict administration, GDPR-related pages, and AI Management. | ||
|
|
||
| That is a strong sign of where this is heading: **an official React experience that aims to feel genuinely at home in the ABP ecosystem**. | ||
|
|
||
| ## We are just getting started | ||
|
|
||
| There is still work ahead, and some pieces may change before the final release. That is exactly why we are sharing this as an early overview rather than a deep technical walkthrough. The big story is not one specific library choice or one page implementation. The big story is that **official React support is becoming real inside ABP Framework**. | ||
|
|
||
| If you have been waiting for a more official React path in ABP, this is the moment to get excited. | ||
|
|
||
| More details will come as we move closer to release. | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.