Update React UI announcement article

docs/en/Community-Articles/2026-03-12-official-react-ui-for-abp-framework/post.md

@@ -0,0 +1,106 @@
+# Official React UI for ABP Framework Is Here
+
+The official React UI for ABP Framework is no longer just something on the way.
+
+With **ABP 10.4.0-rc.1**, the new React UI is available as a beta/preview experience in the modern template system. This RC gives the community an early chance to try it, share feedback, and help us polish the final details before **ABP 10.4 stable**, where we plan to make the React UI generally available.
+
+![abp-studio-project-creation-react](images/abp-studio-project-creation-react.png)
+
+## Why this matters
+
+ABP Framework has always been about helping teams build modern, maintainable, production-ready applications faster. With the official React UI, 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 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, runtime configuration, and deployment.
+
+There is one important detail: the React UI belongs to ABP's **modern template system**. You create it with the `--modern` flag in the ABP CLI or by selecting the modern template flow in ABP Studio. You can find the technical documentation here: [React UI documentation](https://abp.io/docs/10.4/framework/ui/react).
+
+## A quick look at the architecture
+
+The final shape is clearer now: a modern React solution consists of two main parts.
+
+First, there is **your React application**. This is the application-facing SPA that you own and customize. It contains the frontend code you work with every day, including pages, components, routing, API integration, runtime configuration, and authentication setup.
+
+Second, there is the **ABP Admin Console**. The Admin Console is a pre-built React application that provides the standard ABP module management pages. It is delivered through the `Volo.Abp.AdminConsole` NuGet package, so it can evolve with ABP package updates while your own React application stays focused on your product's business features.
+
+For layered and single-layer modern applications, the Admin Console is embedded in the backend and served under `/admin-console/*`. For microservice solutions, it runs as a standalone React app under `apps/react-admin-console/` and is served through the web gateway. In both cases, the main React app can link users into the Admin Console when they need administrative screens.
+
+This split is a practical design choice. Your business UI stays yours, while administration capabilities remain available, consistent, and upgradeable.
+
+## 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 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 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.
+
+The Admin Console covers ABP's standard module administration pages. Your own React application remains intentionally open and direct. That gives teams a good balance: built-in administrative power from ABP, and full ownership of the product-facing frontend.
+
+## Built for AI-driven development
+
+The new React UI is also shaped for the era of **AI-assisted development**.
+
+React, TypeScript, Vite, React Router, Axios, Zod, React Hook Form, and shadcn/ui are technologies that modern coding assistants understand very well. Just as importantly, the generated application contains real frontend code in the solution. That gives AI tools and coding agents concrete project context to read, extend, and refactor.
+
+This direction also fits the broader ABP AI story. ABP Studio already includes an AI assistant experience, and the new **ABP AI Agent** is being introduced to bring code generation, project understanding, issue fixing, and natural-language application evolution directly into the ABP workflow. You can follow that work here: [The Future of ABP Studio: AI Agent + Code Generation](https://abp.io/community/events/community-talks/the-future-of-abp-studio-ai-agent-code-generation-live-fekeoyjr). For the wider toolset, see the [ABP AI Toolkit](https://abp.io/ai/toolkit).
+
+## 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
+- React Router for client-side routing
+- OIDC authentication against the ABP Auth Server
+- Axios-based HTTP client integration
+- Runtime configuration through `dynamic-env.json`
+- Localization and permission-aware behavior integrated with ABP application configuration
+- shadcn/ui components that live in your project and can be customized directly
+- Zod and React Hook Form for form handling and validation
+- Vitest for frontend tests
+- A dedicated Admin Console for ABP module administration
+
+From the source code and the documentation, it is clear that the React UI is being built as a real ABP solution experience, not just a login page plus a few demo screens.
+
+![abp-react-app-screenshot.png](images/abp-react-app-screenshot.png)
+
+## More than a hello world
+
+The generated React app is intentionally small enough to understand, but it is not empty.
+
+Depending on the selected options, it can include a sample Books CRUD page that demonstrates how to build a full create/read/update/delete flow against an ABP backend. It also includes simple reference pages and pre-configured application plumbing such as authentication, HTTP client setup, localization, and permission checks.
+
+The Admin Console provides the standard management experience for ABP modules, including identity management, roles, organization units, settings, audit logs, OpenIddict administration, language management, text templates, GDPR, SaaS and tenant management, and other module pages depending on your solution configuration.
+
+That is the core value: developers get a clean React application to build their product, while ABP continues to provide the administrative capabilities expected from a production-ready application platform.
+
+## Try it with ABP 10.4 RC
+
+During the RC period, you can create a modern React solution with ABP 10.4.0-rc.1:
+
+```bash
+abp new Acme.BookStore --template app --modern --version 10.4.0-rc.1
+```
+
+The React UI is the default UI option when `--modern` is used, but you can also pass it explicitly:
+
+```bash
+abp new Acme.BookStore --template app --modern --ui-framework react --version 10.4.0-rc.1
+```
+
+For a single-layer application:
+
+```bash
+abp new Acme.BookStore --template app-nolayers --modern --version 10.4.0-rc.1
+```
+
+For a microservice solution:
+
+```bash
+abp new Acme.BookStore --template microservice --modern --version 10.4.0-rc.1
+```
+
+Once ABP 10.4 stable is released, the same modern React experience is planned to become generally available without needing to target the RC version explicitly.
+
+## What's next
+
+The React UI is now real in ABP 10.4 RC, and the final polishing work continues toward the stable release. The big story is no longer a roadmap promise. The big story is that **official React support has arrived in ABP Framework**, and it is being prepared for GA with ABP 10.4 stable.
+
+If you have been waiting for an official React path in ABP, this is the right time to try it and share feedback.

docs/en/Community-Articles/2026-03-12-official-react-ui-is-coming-to-abp-framework/post.md

@@ -1,86 +0,0 @@
-# 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.
-
-![abp-studio-project-creation-react](images/abp-studio-project-creation-react.png)
-
-## 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.
-
-![abp-react-app-screenshot.png](images/abp-react-app-screenshot.png)
-
-## 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.