diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
index 56079eb813..37f6b402b0 100644
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@@ -2260,6 +2260,10 @@
}
]
},
+ {
+ "text": "Modular Monolith",
+ "path": "solution-templates/modular-monolith"
+ },
{
"text": "Microservice Solution",
"isLazyExpandable": true,
diff --git a/docs/en/framework/ui/index.md b/docs/en/framework/ui/index.md
index ca33ca9ff1..b1b4bcecd0 100644
--- a/docs/en/framework/ui/index.md
+++ b/docs/en/framework/ui/index.md
@@ -7,11 +7,11 @@
# ABP UI Options
-ABP provides several options for building the user interface (UI) in your applications. Here are some of the officially supported UI options you can use with ABP:
+ABP provides several options for building the user interface (UI) in your applications. React is part of the **modern template system**. Here are some of the officially supported UI options you can use with ABP:
* [React](./react/index.md) *(modern template system only)*
* [MVC / Razor Pages](./mvc-razor-pages/overall.md)
* [Blazor](./blazor/overall.md)
* [Angular](./angular/quick-start.md)
* [React Native](./react-native/index.md)
-* [MAUI](./maui/index.md)
\ No newline at end of file
+* [MAUI](./maui/index.md)
diff --git a/docs/en/get-started/index.md b/docs/en/get-started/index.md
index dcc7aa80c3..1522f3f955 100644
--- a/docs/en/get-started/index.md
+++ b/docs/en/get-started/index.md
@@ -20,6 +20,8 @@ Please select one of the following documents best fits for your application:
- [WPF Application](wpf.md)
- [Console Application](console.md)
+If you seek a React-based web UI, use the **modern template system** with ABP Studio or `abp new --modern`. See [UI options](../framework/ui/index.md) for the full list of officially supported UI frameworks.
+
## Which Startup Template is Suitable for Me?
You can see the *[Solution Template Selection Guide](../solution-templates/guide.md)* if you are not sure which solution template is suitable for you.
diff --git a/docs/en/get-started/layered-web-application.md b/docs/en/get-started/layered-web-application.md
index f4a383ff0b..4cc0ce9ce9 100644
--- a/docs/en/get-started/layered-web-application.md
+++ b/docs/en/get-started/layered-web-application.md
@@ -18,6 +18,10 @@
In this quick start guide, you will learn how to create and run a layered (and potentially modular) web application using [ABP Studio](../studio/index.md).
+> This page documents the **classic** layered flow.
+>
+> If you want **React UI**, use the **modern** template flow instead. Modern layered solutions create your application in the `react/` folder and host the ABP Admin Console from the backend at `/admin-console/`. See [React UI](../framework/ui/react/index.md) and the [ABP CLI modern templates](../cli/index.md#modern-templates) section for the correct path.
+
## Setup your development environment
First things first! Let's setup your development environment before creating the first project. The following tools should be installed on your development machine:
@@ -150,7 +154,7 @@ If you uncheck the *Kubernetes Configuration* option, the solution will not incl
On the next screen, you can configure the modularity options for your solution:
-> If you select the *Setup as a modular solution* option, the solution is created more ready for [modular monolith development](../tutorials/modular-crm/index.md) and allows you to add sub-modules during the solution creation phase.
+> If your goal is a new modular monolith, prefer the dedicated **Modular Monolith** architecture in ABP Studio. The modularity option on this screen is the classic-host path for keeping this layered solution modularity-ready and allowing sub-modules during solution creation.
@@ -281,4 +285,4 @@ You can start the following application(s):
## What's next?
- [TODO Application Tutorial with Layered Solution](../tutorials/todo/layered/index.md)
-- [Web Application Development Tutorial](../tutorials/book-store/index.md)
\ No newline at end of file
+- [Web Application Development Tutorial](../tutorials/book-store/index.md)
diff --git a/docs/en/get-started/microservice.md b/docs/en/get-started/microservice.md
index d30e3926fc..ec2d4eb513 100644
--- a/docs/en/get-started/microservice.md
+++ b/docs/en/get-started/microservice.md
@@ -11,6 +11,8 @@
In this quick start guide, you will learn how to create and run a microservice solution using [ABP Studio](../studio/index.md).
+This guide follows the current **modern** microservice template in ABP Studio. When you select a web UI, ABP Studio creates the main application in `apps/react`, the administration UI in `apps/react-admin-console`, and optionally the public website in `apps/react-public-web`.
+
## Setup your development environment
First things first! Let's setup your development environment before creating the first project. The following tools should be installed on your development machine:
@@ -18,7 +20,7 @@ First things first! Let's setup your development environment before creating the
* [Visual Studio 2026](https://visualstudio.microsoft.com/vs/) or another IDE that supports .NET development
* [.NET 10.0+](https://dotnet.microsoft.com/en-us/download/dotnet)
* [Node v22.11+](https://nodejs.org/)
-* [Yarn v1.22+ (not v2+)](https://classic.yarnpkg.com/en/docs/install) or npm v10+ (already installed with Node), **This is required for the Angular applications.**
+* npm v10+ (already installed with Node) or [Yarn v1.22+ (not v2+)](https://classic.yarnpkg.com/en/docs/install) for the React applications
* [Docker Desktop (with Kubernetes enabled)](https://www.docker.com/products/docker-desktop/)
* [Helm](https://helm.sh/docs/intro/install/)
* [NGINX Ingress Controller](https://kubernetes.github.io/ingress-nginx/deploy/)
@@ -62,11 +64,11 @@ On that screen, you can enable multi-tenancy for your solution. After selecting
-Here, you see all the possible UI options supported by that startup solution template. You can pick your favorite one and click the *Next* button for the *Mobile Framework* selection screen:
+For the modern microservice template, the web UI choices are `React` and `No UI`. Select `React` to create `MyCompanyName.MyProjectName.React` in `apps/react` together with the separate `MyCompanyName.MyProjectName.ReactAdminConsole` application in `apps/react-admin-console`. Then click the *Next* button for the *Mobile Framework* selection screen:
-Here, you see all the mobile applications available in that startup solution template. These mobile applications are well-integrated into your solution and can use the same backend with your web application. They are simple (do not have pre-built features as much as the web application) but a very good starting point to build your mobile application.
+For the modern microservice template, the mobile choices are `React Native` and `None`. If you select `React Native`, ABP Studio creates the mobile app under `apps/mobile/react-native` and adds the `MyCompanyName.MyProjectName.MobileGateway` application.
> If you select a mobile application, an additional API Gateway is created that is only used by the mobile application.
@@ -74,7 +76,7 @@ Pick the one best for you, or select the *None* if you don't want a mobile appli
-You can select a public website to be created in your solution. The public website is a simple landing page that can be used to introduce your product, provide documentation, and so on.
+If you enable the public website, ABP Studio creates the `MyCompanyName.MyProjectName.ReactPublicWeb` application under `apps/react-public-web` and the `MyCompanyName.MyProjectName.PublicGateway` application under `gateways/public`.
@@ -136,7 +138,7 @@ Now, we are ready to allow ABP Studio to create our solution. Just click the *Cr
-You can explore the solution, but you need to **wait for background tasks to be completed** before running any application in the solution (it can take up to a few minutes to set up all).
+You can explore the solution, but you need to **wait for background tasks to be completed** before running any application in the solution. ABP Studio uses that time to install the required client-side dependencies and create the Auth Server signing certificate.
> The solution structure can be different in your case based on the options you've selected.
@@ -148,9 +150,13 @@ This **solution** consists of several **modules** shown in the *Solution Explore
-Each leaf item (e.g. `Acme.CloudCrm.IdentityService` or `Acme.CloudCrm.Web`) in the tree above is an ABP Studio module. They are grouped into solution folders (`apps`, `gateways`, and `services`).
+Each leaf item in the tree above is an ABP Studio module. They are grouped into solution folders (`apps`, `gateways`, and `services`):
+
+* `apps`: contains `Acme.CloudCrm.AuthServer`, the main React UI as `Acme.CloudCrm.React`, the separate administration UI as `Acme.CloudCrm.ReactAdminConsole`, and optionally `Acme.CloudCrm.ReactPublicWeb`.
+* `gateways`: contains `Acme.CloudCrm.WebGateway` for the main web UI, and optionally `Acme.CloudCrm.PublicGateway` and `Acme.CloudCrm.MobileGateway`.
+* `services`: contains backend microservices such as `Acme.CloudCrm.AdministrationService`, `Acme.CloudCrm.IdentityService`, and the optional services selected in the wizard.
-Each module has a separate .NET Solution. You can open a module's (or .NET solution's) folder by right-clicking a module in the *Solution Explorer* tree, select *Open with* -> *Explorer* option as shown below:
+The .NET applications in `apps/auth-server`, `gateways/*`, and `services/*` each have their own .NET solutions. The React applications are standard Node projects under `apps/react` and `apps/react-admin-console`, plus `apps/react-public-web` when the public website is enabled. You can open any module's folder by right-clicking it in the *Solution Explorer* tree and selecting *Open with* -> *Explorer* as shown below:
@@ -158,15 +164,15 @@ If we open the `Acme.CloudCrm.IdentityService` module's path in the explorer, we
-This microservice solution is designed to have separate .NET solutions for each service to make it possible to develop independently from the other services and applications.
+This microservice solution is designed so each backend service, gateway, and the Auth Server can be developed independently, while the React applications stay in their own app folders.
-You can open any module's .NET solution in your favorite IDE and make your development. The following figure is a screenshot from the *Identity* microservice opened in Visual Studio:
+You can open any backend module's .NET solution in your favorite IDE and make your development. The following figure is a screenshot from the *Identity* microservice opened in Visual Studio:
-If you explore that .NET solution, you will typically see some configuration code, and you won't see any business code. That's because the solution uses [pre-built application modules](../modules) as NuGet packages, and doesn't contain their source code. In this way, you can easily upgrade these application modules when a new version is available.
+If you explore that .NET solution, you will typically see composition and configuration code, and you won't see the source code of the built-in modules. That's because the solution uses [pre-built application modules](../modules) as NuGet packages. In this way, you can easily upgrade these application modules when a new version is available.
-You will typically add new microservices to the solution and perform your business logic inside these new services (however, you can always want to download the source code of any pre-built application module and include it into your solution to freely customize it).
+You will typically add new microservices to the solution and perform your business logic inside these new services. You can also customize the React applications in `apps/react`, `apps/react-admin-console`, and, if enabled, `apps/react-public-web` when you need UI-specific changes.
## Running the Solution
@@ -184,7 +190,7 @@ In the *Solution Runner* section (on the left side) you can see all the runnable
> A leaf item in the *Solution Runner* is called as an *Application* as it is an executable application, excluding items under `Containers`.
-As shown in the figure above, the executable applications are grouped into folders like `apps`, `gateways`, and `services`. You can start/stop them all, a group (folder) of them, or one by one. The `Containers` branch contains the needed docker containers for the applications.
+As shown in the figure above, the executable applications are grouped into folders like `apps`, `gateways`, and `services`. You can start/stop them all, a group (folder) of them, or one by one. The `Containers` branch contains the needed docker containers for the applications.
Before running the applications, you can run the all application by right-clicking the root item in the *Solution Runner* and select *Build* -> *Build All* action. However, you don't need to do that, because ABP Studio builds the applications before running them by default.
@@ -192,6 +198,19 @@ Before running the applications, you can run the all application by right-clicki
You can click the *Play* button on the root item in *Solution Runner* to start all the applications.
+For the common React-based web flow, the main applications are:
+
+* `Acme.CloudCrm.AuthServer`
+* `Acme.CloudCrm.WebGateway`
+* `Acme.CloudCrm.AdministrationService`
+* `Acme.CloudCrm.IdentityService`
+* `Acme.CloudCrm.React`
+* `Acme.CloudCrm.ReactAdminConsole`
+
+If you enabled optional features, also start the related applications such as `Acme.CloudCrm.ReactPublicWeb`, `Acme.CloudCrm.PublicGateway`, `Acme.CloudCrm.MobileGateway`, `Acme.CloudCrm.SaasService`, `Acme.CloudCrm.AuditLoggingService`, `Acme.CloudCrm.GdprService`, `Acme.CloudCrm.ChatService`, or `Acme.CloudCrm.FileManagementService`.
+
+> ABP Studio runs the React applications as CLI applications by executing `npm run dev` in their app folders.
+
> **About the Docker Containers**
>
> Docker will fetch the docker images before starting the containers in your first run (if they were not fetched before) and that process may take a few minutes depending on your internet connection speed. So, please wait for it to completely start. If the process takes more time than you expect, you can right-click on `Docker-Dependencies` and select the *Logs* command to see what's happening.
@@ -200,29 +219,31 @@ You can click the *Play* button on the root item in *Solution Runner* to start a
>
> Some applications/services may fail on the first run. That may be because of service and database dependencies were not satisfied and an error occurs on the application startup. ABP Studio automatically restarts failing services until it is successfully started. Being completely ready for such a distributed solution may take a while, but it will be eventually started.
-Once all the applications are ready, you can right-click the `Web` application and select the *Browse* command:
+Once all the applications are ready, you can right-click the `Acme.CloudCrm.React` application and select the *Browse* command:
-The *Browse* command opens the web application's UI in the built-in browser of ABP Studio:
+The *Browse* command opens the main React application's UI in the built-in browser of ABP Studio:
-You can browse your application in a full-featured web browser in ABP Studio. Click the *Login* button in the application UI, enter `admin` as username and `1q2w3E*` as password to login to the application.
+You can browse your application in a full-featured web browser in ABP Studio. Click the *Login* button in the application UI, enter `admin` as username and `1q2w3E*` as password to log in to the application.
+
+Use the same *Browse* command on `Acme.CloudCrm.ReactAdminConsole` to open the administration UI. That application runs separately and uses `/admin-console/` as its base path.
> You can also browse the other applications/services (that provides a UI) inside ABP Studio. In this way, you don't need to use an external browser or manually type the application's URL.
## Developing Services Using the Solution Runner
-Solution Runner not only runs a multi-applications system easier, but is also useful while developing your services and applications. In a microservice solution, you typically focus on one or a few services and applications. Assume that you want to make a development in `IdentityService`. You can use the following development flow:
+Solution Runner not only makes a multi-application system easier to run, but is also useful while developing your services and applications. In a microservice solution, you typically focus on one or a few services and applications. Assume that you want to make a development in `IdentityService`. You can use the following development flow:
* Start all the applications/services in the solution and test if everything works as expected.
* Stop the `IdentityService` in the Solution Runner.
-* Open the `IdentityService`'s .NET solution in your favorite IDE (e.g. Visual Studio). As an easy way of opening it, you can use the *Solution Explorer*, find the `Acme.CloudCrm.IdentityService` module, right-click to it and select the *Open with* -> *Visual Studio* command.
+* Open the `IdentityService`'s .NET solution in your favorite IDE (e.g. Visual Studio). As an easy way of opening it, you can use the *Solution Explorer*, find the `Acme.CloudCrm.IdentityService` module, right-click it and select the *Open with* -> *Visual Studio* command.
* Make your development in the `IdentityService`.
* Run (with or without debugging) your service in Visual Studio (or another IDE).
-Once you run the `IdentityService` in Visual Studio, it will be completely integrated into the rest of the system since they all run in your local machine. In addition, the `IdentityService` application will automatically connect to ABP Studio and send runtime data to it as it works in ABP Studio. When you run an application out of ABP Studio, it is shown as *external* in the Solution Runner and you can't stop it in ABP Studio (you should stop where you've started):
+Once you run the `IdentityService` in Visual Studio, it will be completely integrated into the rest of the system since they all run on your local machine. In addition, the `IdentityService` application will automatically connect to ABP Studio and send runtime data to it as it works in ABP Studio. When you run an application out of ABP Studio, it is shown as *external* in the Solution Runner and you can't stop it in ABP Studio (you should stop it where you've started it):
@@ -236,6 +257,8 @@ To enable watching, right-click the application/service you want to watch, selec
Now, you can make your development on the `IdentityService`. Whenever you save a code file, it is automatically rebuilt and restarted by ABP Studio, so any change will be effective on the running solution in a few seconds.
+If you are working on the frontend instead, you can apply the same flow to `Acme.CloudCrm.React` or `Acme.CloudCrm.ReactAdminConsole`, and to `Acme.CloudCrm.ReactPublicWeb` when the public website is enabled, then continue from the related app folder with `npm run dev`.
+
When you enable watch for an application an *eye* icon is added near to the application:
@@ -271,7 +294,7 @@ After building the Docker images, it is ready to install the Helm chart to Kuber
> Installing chart should be fast. However, it may take time for being fully ready in Kubernetes. For example, if an image of a service (e.g. Redis, Rabbit) was not pulled before, it will need to pull image first.
-Once the solution is ready in Kubernetes, you can open a browser and visit the following URL: https://cloudcrm-local-web It will open a web page as shown below:
+Once the solution is ready in Kubernetes, you can open a browser and visit the following URL: `https://cloudcrm-local-web`. It opens the main web application as shown below:
@@ -335,7 +358,7 @@ It will start the interception process, and finally you will see the *intercepti
-From now on, all the traffic coming to the Audit Logging microservice is redirected to your local computer. If you open the Audit Logging page now (`https://cloudcrm-local-web/AuditLogs`), you get an error, because the request is redirected to your local machine but the Audit Logging service is not running on your local machine yet.
+From now on, all the traffic coming to the Audit Logging microservice is redirected to your local computer. If you open the Audit Logging page now (`https://cloudcrm-local-web/admin-console/audit-logs`), you get an error, because the request is redirected to your local machine but the Audit Logging service is not running on your local machine yet.
Open the `Acme.CloudCrm.AuditLoggingService` .NET solution in your IDE (e.g. Visual Studio), set the `Acme.CloudCrm.AuditLoggingService` as startup project and run it (using F5 for debug mode or CTRL+F5 to run it without debugging).
@@ -355,7 +378,7 @@ A typical development flow can be as the following:
* *Connect* to a Kubernetes cluster where the solution is already deployed (as explained in the *Kubernetes Integration: Connecting to the Cluster* section). You can do it yourself as explained in the *Kubernetes Integration: Working with Helm Charts* section.
* *Intercept* a service you want to develop in your local machine.
-* Develop, run, stop, fix, debug, re-run... your service easily in your local environment. You can test your service as integrated to others and visit the application UI in the Kubernetes (you can make it for the Web application as similar).
+* Develop, run, stop, fix, debug, re-run... your service easily in your local environment. You can test your service as integrated to others and visit the application UI in Kubernetes. You can follow a similar flow for the main React application or the Admin Console.
* Once your development is done, you can *Disable* the interception and re-deploy the service to the Kubernetes cluster.
To re-deploy a service to Kubernetes, right-click the service and select *Commands* -> *Redeploy* command:
diff --git a/docs/en/get-started/single-layer-web-application.md b/docs/en/get-started/single-layer-web-application.md
index ef657722b0..ebd4465122 100644
--- a/docs/en/get-started/single-layer-web-application.md
+++ b/docs/en/get-started/single-layer-web-application.md
@@ -17,6 +17,10 @@
In this quick start guide, you will learn how to create and run a single layer web application using [ABP Studio](../studio/index.md).
+> This page documents the **classic** single-layer flow.
+>
+> If you want **React UI**, use the **modern** template flow instead. Modern single-layer solutions create your application in the `react/` folder and host the ABP Admin Console from the backend at `/admin-console/`. See [React UI](../framework/ui/react/index.md) and the [ABP CLI modern templates](../cli/index.md#modern-templates) section for the correct path.
+
## Setup your development environment
First things first! Let's setup your development environment before creating the first project. The following tools should be installed on your development machine:
@@ -116,7 +120,7 @@ You can change these settings later if needed. Then click the *Next* button for
Configure any additional options as needed and click the *Next* button to continue. On the next screen, you can configure the modularity options for your solution:
-> If you select the *Setup as a modular solution* option, the solution is created more ready for [modular monolith development](../tutorials/modular-crm/index.md) and allows you to add sub-modules during the solution creation phase.
+> If your goal is a new modular monolith, prefer the dedicated **Modular Monolith** architecture in ABP Studio. The modularity option on this screen is the classic-host path for keeping this single-layer solution modularity-ready and allowing sub-modules during solution creation.
@@ -188,4 +192,4 @@ You can use `admin` as username and `1q2w3E*` as default password to login to th
## What's next?
-- [TODO Application Tutorial with Single-Layer Solution](../tutorials/todo/single-layer/index.md)
\ No newline at end of file
+- [TODO Application Tutorial with Single-Layer Solution](../tutorials/todo/single-layer/index.md)
diff --git a/docs/en/images/ui-options.png b/docs/en/images/ui-options.png
index 3c30cd16d7..d36efc9fb6 100644
Binary files a/docs/en/images/ui-options.png and b/docs/en/images/ui-options.png differ
diff --git a/docs/en/index.md b/docs/en/index.md
index 86b7104b06..3a23e08d8f 100644
--- a/docs/en/index.md
+++ b/docs/en/index.md
@@ -27,9 +27,9 @@ After getting started, you can read the following documents:
### UI Framework Options
-ABP can work with any UI framework, while the following frameworks are supported and well-integrated out of the box:
+ABP can work with any UI framework, while the following frameworks are supported and well-integrated out of the box. React is available with the modern template system. See the [UI options](./framework/ui/index.md) page for details.
-
+
### Database Provider Options
@@ -84,7 +84,7 @@ ABP Platform provides tooling to help you in your daily development.
#### ABP CLI
-[ABP CLI](cli.md) is a command-line tool to create new solutions and automate the things with your ABP based solutions.
+[ABP CLI](./cli/index.md) is a command-line tool to create new solutions and automate the things with your ABP based solutions.
### Startup Templates
diff --git a/docs/en/solution-templates/application-module/index.md b/docs/en/solution-templates/application-module/index.md
index 19b2294a76..dec38a1cfa 100644
--- a/docs/en/solution-templates/application-module/index.md
+++ b/docs/en/solution-templates/application-module/index.md
@@ -9,6 +9,8 @@
This document explains how to create a **reusable [application module](../../modules)** based on the [module development best practices & conventions](../../framework/architecture/best-practices).
+This page documents creating a **standalone module solution**. If you are using the modern [Modular Monolith solution template](../modular-monolith/index.md), ABP Studio can also scaffold additional modules during solution creation or later from *Solution Explorer*. The generated module structure still follows the same reusable module concepts explained here.
+
> Notice that the application module that is created in this tutorial is not an executable application. To see the module in action, you should install it into an executable application.
>
> It is advised to see the *[Modular Monolith Application Development Tutorial](../../tutorials/modular-crm/index.md)* to learn how to create application modules, install them into an executable web application, run and test the application. That tutorial uses the *Standard* module template, while this document explains the *DDD* module template.
@@ -21,6 +23,8 @@ First, install the ABP Studio if you haven't installed before. You can follow th
### Creating a New Empty Solution
+This empty-solution flow is for a standalone module repository. It is different from the modern modular monolith wizard, where modules are added to a main application solution.
+
Open the ABP Studio and click the `New solution` button in the welcome page or the `File > New Solution` top menu item. Click the `empty solution` link to select the empty solution template.
@@ -143,7 +147,9 @@ You can still create unit tests for your classes which will be harder to write (
### Host Applications
-The solution doesn't have a host application to run your module. However, you can create a [single-layer](../../get-started/single-layer-web-application.md) or [layered](../../get-started/layered-web-application.md) application and [import](../../studio/solution-explorer.md#imports) the created module into the host application.
+The solution doesn't have a host application to run your module. For a new modern ABP Studio solution, the most direct host choice is the [Modular Monolith solution template](../modular-monolith/index.md). ABP Studio can add the module during solution creation or later from *Solution Explorer*.
+
+Classic single-layer and layered host applications are still valid options. You can create a [single-layer](../../get-started/single-layer-web-application.md) or [layered](../../get-started/layered-web-application.md) application and [import](../../studio/solution-explorer.md#imports) the created module into the host application.
You can also see the *[Modular Monolith Application Development Tutorial](../../tutorials/modular-crm/index.md)* to learn how to create application modules, install them into an executable web application, run and test the application
diff --git a/docs/en/solution-templates/guide.md b/docs/en/solution-templates/guide.md
index 944e503c53..3d51d68fad 100644
--- a/docs/en/solution-templates/guide.md
+++ b/docs/en/solution-templates/guide.md
@@ -1,7 +1,7 @@
```json
//[doc-seo]
{
- "Description": "Explore ABP's guide to selecting the right startup template for your project, covering architectures like Microservices, N-Layered, and more."
+ "Description": "Explore ABP's guide to selecting the right classic or modern startup template for your project, covering Single-Layer, Layered, Modular Monolith, and Microservice architectures."
}
```
@@ -9,11 +9,23 @@
ABP provides several [startup templates](index.md) to you. It is important to start with the right startup template that is suitable for your **project** and **team**. This guide aims to lead you to select the most proper startup template for your requirements.
+ABP currently exposes two closely related template families:
+
+* **Classic templates**, documented with the `Single-Layer` and `Layered` names in this section.
+* **Modern solution wizard architectures**, which use the names `Simple Monolith`, `Layered Monolith`, `Modular Monolith`, and `Microservice`.
+
+Throughout this guide:
+
+* **Single-Layer** corresponds to the modern **Simple Monolith** architecture.
+* **N-Layered** corresponds to the modern **Layered Monolith** architecture.
+* **Modular Monolith** has a dedicated modern solution path in ABP Studio.
+* **Microservice** exists in both families, but the current microservice reference pages describe the modern React-based web structure.
+
The following **architectures** will be discussed based on ABP startup templates:
-* **Single-Layer** (non-layered) application
-* **N-Layered** application
-* **Modular** application
+* **Single-Layer / Simple Monolith** application
+* **N-Layered / Layered Monolith** application
+* **Modular Monolith** application
* **Microservice** solution
## What is a Startup Template?
@@ -24,7 +36,7 @@ In the following section, you will understand what a startup template is and wha
A startup solution template is a **pre-architected** structure. For example, the [layered startup template](layered-web-application/index.md) is a great starting point if you want to build a layered application code-base based on [Domain-Driven Design](../framework/architecture/domain-driven-design/index.md) principles and patterns.
-However, starting with any startup template **doesn't limit you** on adding or removing projects, layers, integration packages, and creating other applications/services. You can even start with a [single-layer application template]() and convert it to a microservice solution. However, if you want to build a microservice solution, starting with the [microservice startup template](microservice/index.md) is the best.
+However, starting with any startup template **doesn't limit you** on adding or removing projects, layers, integration packages, and creating other applications/services. You can even start with a [single-layer application template](single-layer-web-application/index.md) and convert it to a microservice solution. However, if you want to build a microservice solution, starting with the [microservice startup template](microservice/index.md) is the best.
So, it is **best to start with the most suitable startup template** for your purpose and then modify the solution to fit your custom requirements.
@@ -52,7 +64,7 @@ Up to this point, it is explained what a startup template is and the features it
### Single-Layer Application Solution Template
-The [single-layer solution template](single-layer-web-application/index.md) is the simplest. It provides a **minimal solution architecture** while starting a new project. Your .NET solution typically contains a **single, or a few .NET projects** depending on your UI and other preferences while creating your solution.
+The [single-layer solution template](single-layer-web-application/index.md) is the simplest classic option. It provides a **minimal solution architecture** while starting a new project. In the modern solution wizard, the comparable architecture is **Simple Monolith**. Your .NET solution typically contains a **single, or a few .NET projects** depending on your UI and other preferences while creating your solution.
The following figure shows a single-project web application that has [MVC (Razor Pages) UI](../framework/ui/mvc-razor-pages/overall.md) and [Entity Framework Core](../framework/data/entity-framework-core/index.md) database provider with the default configuration:
@@ -85,7 +97,7 @@ These options are not implemented to keep the solution structure as simple as po
### Layered Solution Template
-The [layered application startup template](layered-web-application/index.md) is a .NET solution that consists of several projects.
+The [layered application startup template](layered-web-application/index.md) is the classic layered option. In the modern solution wizard, the comparable architecture is **Layered Monolith**. It is a .NET solution that consists of several projects.
Each project represents a layer of the application or has a specific functionality for the solution.
The exact project count in your solution depends on the options you have selected.
@@ -117,9 +129,11 @@ In the following conditions, you may consider to use the layered solution templa
### Modular Monolith Applications
-ABP does not provide a specific modular monolith application startup template. However, it is not needed. Let us explain why.
+ABP Studio's modern solution wizard includes a dedicated [Modular Monolith solution template](modular-monolith/index.md). It creates a main application, enables modularity automatically, and lets you scaffold additional modules while creating the solution. This is the most direct path for new modular ABP Studio solutions.
+
+Classic ABP solutions can still build a modular monolith by combining a host application and reusable application modules.
-The ABP Framework and [ABP Studio](../studio/index.md) are already designed to support modular application development from their beginning. ABP framework provides all the **necessary infrastructure** for [modularity](../framework/architecture/modularity/basics.md) and all other framework features are **compatible with modular solutions**.
+The ABP Framework and [ABP Studio](../studio/index.md) are designed to support modular application development. ABP framework provides all the **necessary infrastructure** for [modularity](../framework/architecture/modularity/basics.md) and all other framework features are **compatible with modular solutions**.
On the other hand, the main purpose of ABP Studio's [Solution Explorer panel](../studio/solution-explorer.md) is to **architect and build modular and complex software solutions**. You can easily create new modules, arrange dependencies between the modules and import/install these modules into a monolith application. While you can do all these manually yourself, ABP Studio makes it extremely easy to do and understand it.
@@ -131,19 +145,20 @@ A **modular monolith** application consists of a **single host** application and
In this example, `MyCrm.Host` is an almost-empty host application that has package references to other modules. Every module consists of two packages: implementation and contract packages.
-You can follow the steps below to create such a modular solution with ABP Studio:
+You can follow one of the paths below to create such a modular solution with ABP Studio:
-* **Create a new application** using either [single-layer](single-layer-web-application/index.md) or [layered](layered-web-application/index.md) application startup template. That application will be the **host application** of your solution.
-* **Create new modules** (right-click to the solution root, select the *Add* -> *New Module* -> ... command).
-* **Import & Install** these **modules** to the host application.
+* **Modern path**: Choose the [Modular Monolith solution template](modular-monolith/index.md), configure the main application, then add extra modules in the *Modularity* step or later from *Solution Explorer*.
+* **Classic composition path**: Create a host application using either the [single-layer](single-layer-web-application/index.md) or [layered](layered-web-application/index.md) template, create new modules, then import and install these modules into the host application.
> You can follow the **[Modular Monolith Application Development Tutorial](../tutorials/modular-crm/index.md)** to learn how to build a modular application step by step.
#### Which Startup Template should be used for a Modular Application?
-So, both [single-layer](single-layer-web-application/index.md) and [layered](layered-web-application/index.md) application startup templates are inherently modular. Just use one of them and start your modular solution. You may wonder which one to start:
+For a new modern ABP Studio solution, use the dedicated [Modular Monolith solution template](modular-monolith/index.md).
+
+If you are composing a modular monolith by using the classic host + module approach, both [single-layer](single-layer-web-application/index.md) and [layered](layered-web-application/index.md) application startup templates are inherently modular. In that case, you may wonder which one to start:
-* Use the **[single-layer startup template](single-layer-web-application/index.md)** for the host application of your modular monolith if you will leave the host application as empty. It will contain some configuration code of course, but it won't contain any actual application code. **This is the suggested approach.**
+* Use the **[single-layer startup template](single-layer-web-application/index.md)** for the host application of your modular monolith if you will leave the host application as empty. It will contain some configuration code of course, but it won't contain any actual application code. **This is the suggested classic host approach.**
* Use the **[layered application startup template](layered-web-application/index.md)** if you will write some application code into the hosting application. You may want to write some code that makes multiple module operations that are not easy to implement in a particular module. In that case, a layered hosting application will be a better way to organize your codebase. However, this approach can quickly move your solution away from a modular system. So, take your own risk.
#### When Should You Start a Modular Monolith Application?
@@ -164,7 +179,7 @@ Even if you are considering building a microservice architecture, it is usually
### Microservice Solution Template
-ABP's [microservice startup template](microservice/index.md) includes multiple services, API gateways and applications that are well integrated into each other and ready to be a great **base solution for your microservice system**.
+ABP's [microservice startup template](microservice/index.md) includes multiple services, API gateways and applications that are well integrated into each other and ready to be a great **base solution for your microservice system**. The current reference pages describe the modern React-based web structure.
In the following picture, you can see an overall diagram that shows the main components of the solution (they vary based on the options while you are creating your solution):
diff --git a/docs/en/solution-templates/index.md b/docs/en/solution-templates/index.md
index c833b8d508..56969fc6ef 100644
--- a/docs/en/solution-templates/index.md
+++ b/docs/en/solution-templates/index.md
@@ -1,7 +1,7 @@
```json
//[doc-seo]
{
- "Description": "Explore ABP's production-ready startup solution templates for Single-Layer, Layered, and Microservice architectures to kickstart your project!"
+ "Description": "Explore ABP's startup solution templates, from classic Single-Layer and Layered solutions to modern Modular Monolith and Microservice architectures."
}
```
@@ -11,11 +11,14 @@ ABP provides pre-architected and production-ready templates to jump start a new
> **You can see the [Solution Template Selection Guide](guide.md) if you are not sure which solution template is suitable for you.**
+The reference pages below cover both classic and modern ABP Studio template families. The Single-Layer and Layered pages document the classic templates. The Modular Monolith and Microservice pages call out the current modern structure where it differs.
+
The following solution templates are provided out of the box:
-* **[Single-Layer Solution](single-layer-web-application/index.md)**: A single-project solution. Recommended for building an application with a **simpler and easy to understand** architecture.
-* **[Layered Solution](layered-web-application/index.md)**: A fully layered (multiple projects) solution based on [Domain Driven Design](../framework/architecture/domain-driven-design) practices. Recommended for long-term projects that need a **maintainable and extensible** codebase.
-* **[Microservice Solution](microservice/index.md)**: A **distributed solution** to build **microservice systems**. It includes pre-built services, API gateways, web and mobile applications, Kubernetes and Helm configuration, and everything you need to start your large-scale microservice solution.
+* **[Single-Layer Solution](single-layer-web-application/index.md)**: The classic single-project solution. In the modern solution wizard, the closest architecture is **Simple Monolith**.
+* **[Layered Solution](layered-web-application/index.md)**: The classic fully layered (multiple projects) solution based on [Domain Driven Design](../framework/architecture/domain-driven-design) practices. In the modern solution wizard, the closest architecture is **Layered Monolith**.
+* **[Modular Monolith](modular-monolith/index.md)**: The dedicated modern ABP Studio path for a main application plus reusable modules deployed as a single unit.
+* **[Microservice Solution](microservice/index.md)**: A **distributed solution** to build **microservice systems**. The current reference pages describe the modern React-based web structure.
* **[Application Module](application-module/index.md)**: A template that can be used to create a **reusable [application module](../modules/index.md)** based on the [module development best practices & conventions](../framework/architecture/best-practices/index.md). It is also suitable for creating **services** (with or without UI).
* **Others**
- [MAUI Application](../get-started/maui.md)
@@ -25,4 +28,4 @@ The following solution templates are provided out of the box:
## See Also
* [Solution Template Selection Guide](guide.md)
-* [Get Started with ABP Platform](../get-started/index.md)
\ No newline at end of file
+* [Get Started with ABP Platform](../get-started/index.md)
diff --git a/docs/en/solution-templates/microservice/authentication.md b/docs/en/solution-templates/microservice/authentication.md
index f079334a24..05721dee24 100644
--- a/docs/en/solution-templates/microservice/authentication.md
+++ b/docs/en/solution-templates/microservice/authentication.md
@@ -45,4 +45,8 @@ The solution has an authentication server (auth-server) application to provide t
## Authentication Flows
-The applications use several flows to authenticate users based on the application type. The MVC UI web application uses the [hybrid flow](https://openid.net/specs/openid-connect-core-1_0.html#HybridFlowAuth) (OpenID Connect Authentication) to authenticate users, while the SPA and Swagger applications use the [authorization code flow](https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowAuth) to authenticate users. After the user logs into the system and receives the token from the authentication server, the applications (microservices) use [JWT Bearer Authentication](https://jwt.io/introduction/) to authorize users.
\ No newline at end of file
+The current modern microservice template generates React-based web clients and, optionally, a React Native mobile client. The generated authentication flows are:
+
+* `react`, `react-admin-console`, and `react-public-web` (when enabled) use the [authorization code flow](https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowAuth) against the `AuthServer`.
+* `react-native` (when enabled) is configured with its own client id and scopes, uses the password grant plus refresh tokens against the `AuthServer`, and sends bearer tokens to backend APIs through the `MobileGateway`.
+* Backend services, gateways, and other protected APIs use [JWT Bearer Authentication](https://jwt.io/introduction/) to validate the tokens issued by the authentication server.
diff --git a/docs/en/solution-templates/microservice/health-check-configuration.md b/docs/en/solution-templates/microservice/health-check-configuration.md
index 37cd515209..c966b25824 100644
--- a/docs/en/solution-templates/microservice/health-check-configuration.md
+++ b/docs/en/solution-templates/microservice/health-check-configuration.md
@@ -12,7 +12,7 @@
Health Check is a feature that allows applications to monitor their health and diagnose potential issues. The Microservice solution template comes with pre-configured Health Check system.
-In the Microservice solution template, Health Check configuration is applied in all the services, gateways and UI applications (except Blazor Wasm & Blazor WebApp applications UI applications).
+In the current modern microservice template, Health Check configuration is applied to the .NET applications in the solution, such as backend services, gateways, and `auth-server`. The generated React frontend applications (`react`, `react-admin-console`, and `react-public-web` when enabled) do not expose these ASP.NET Core health check endpoints.
### Configuration in `HealthChecksBuilderExtensions.cs`
diff --git a/docs/en/solution-templates/microservice/index.md b/docs/en/solution-templates/microservice/index.md
index 9b4ed6b3a3..9ea6c3e0f1 100644
--- a/docs/en/solution-templates/microservice/index.md
+++ b/docs/en/solution-templates/microservice/index.md
@@ -21,6 +21,8 @@
ABP Studio provides pre-architected and production-ready templates to jump start a new solution. One of them is the Microservice solution template. You can use it to build distributed systems with common microservice patterns. It includes multiple services, API gateways and applications that are well integrated to each other and ready to be a great base solution for your microservice system.
+Unless stated otherwise, the pages in this section describe the current modern ABP Studio microservice template, where the web layer is React-based.
+
> **This document explains the Microservice solution template in every details. So, it is a reference document to fully understand the solution and refer when you have trouble.**
>
> **If you just want to quickly create a microservice solution, please refer to *[Quick Start: Creating a Microservice Solution with ABP Studio](../../get-started/microservice.md)* document.**
@@ -61,4 +63,4 @@ ABP Studio provides pre-architected and production-ready templates to jump start
* [Adding new API gateways](adding-new-api-gateways.md)
* [Mono-repo vs multiple repository approaches](mono-repo-vs-multiple-repository-approaches.md)
* [Authoring unit and integration tests](authoring-unit-and-integration-tests.md)
- * [How to use with ABP Suite](how-to-use-with-abp-suite.md)
\ No newline at end of file
+ * [How to use with ABP Suite](how-to-use-with-abp-suite.md)
diff --git a/docs/en/solution-templates/microservice/localization-system.md b/docs/en/solution-templates/microservice/localization-system.md
index ebc710f840..29c887c5f3 100644
--- a/docs/en/solution-templates/microservice/localization-system.md
+++ b/docs/en/solution-templates/microservice/localization-system.md
@@ -1,7 +1,7 @@
```json
//[doc-seo]
{
- "Description": "Learn how the ABP Framework manages localization in microservice solutions, enhancing resource management across applications seamlessly."
+ "Description": "Learn how localization works in ABP Studio's modern microservice solution template across backend services, React apps, and the optional React Native client."
}
```
@@ -25,7 +25,7 @@ Like the other fundamental feature modules ([Permission Management](permission-m
## Language Management
-> If the dynamic localization option is enabled, then the *Language Management Module** will be removed from the optional modules and a new microservice named `LanguageService` will be created. The `LanguageService` uses *Language Management Module* behind the scene.
+> If the dynamic localization option is enabled, then the *Language Management Module* is removed from the optional modules and a new microservice named `LanguageService` is created. `LanguageService` uses the *Language Management Module* behind the scenes.
The *Administration* microservice provides a set of APIs to manage localization. The localization resources are defined in each microservice, and when a microservice starts, it registers its localization resources to the related localization tables automatically. After that, you can see the localization resources from the [language texts](../../modules/language-management.md#language-texts) and manage them.
@@ -39,106 +39,42 @@ When you create a new microservice solution, you can **enable dynamic localizati
-When you enable this option, a new microservice named **LanguageService** will be added (with the language management module integrated) and you can use its `LanguageServiceResource` class to use the localization entries in your UI application. It's already configured in your final host application, so you don't need to make any configuration related to that. To define a new localization entry you can either use the language files in the `LanguageService` or update the already defined localization entries in the UI (on the *Language Texts* page).
-
-After defining localization entries or updating them, you can inject the `IStringLocalizer<>` or `IHtmlLocalizer<>` services and use the localized values in your pages for MVC/Razor Pages UI, for instance:
-
-```html
-@page
-@using Microsoft.Extensions.Localization
-@inject IStringLocalizer L
-
-
-
@L["LongWelcomeMessage"]
-
-```
+When you enable this option, a new microservice named **LanguageService** is added with the language management module integrated. Define new shared localization entries in the `LanguageService` localization files, or update the registered texts from the *Language Texts* UI. The generated React applications can then consume those backend resources through the application configuration and `application-localization` endpoints.
## UI Localizations
-In the microservice architecture, localizations also can be defined in the final host application, if they only need to be defined in the UI. When you create a new microservice solution template, independent from the UI, all configurations are made and you can directly define localization entries and use them in your final UI application.
-
-> **Note:** When you define localization entries in the host application, then you can't make dynamic localization with the language management module! (Because the language management module, would be unaware of the defined localization entries on the UI side)
-
-### MVC/Razor Pages & Blazor UIs
+In the current modern microservice template, UI-only localizations live in the generated React or React Native applications. The template does not generate MVC, Blazor, or Angular hosts for the modern microservice solution structure.
-For MVC & Blazor UIs, you can see the **Localization** directory in your final application, like in the following figure:
+> **Note:** UI-only strings that you keep in frontend locale files are not managed by the Language Management module. Put shared or domain-level texts in backend localization resources if they should participate in dynamic localization.
-
+### `react`
-In this directory, you can see the language files, those are pre-defined for you to directly add localization entries. The related configurations are already made for you, in the module class (inside the `ConfigureLocalization` method) as below:
+The main `react` application initializes `i18next` from `apps/react/src/locales/en.json`. It also:
-```csharp
- private void ConfigureLocalization(IWebHostEnvironment hostingEnvironment)
- {
- //code abbreviated for brevity...
+* persists the selected culture in browser storage
+* sets the document language
+* loads available languages from the application configuration
+* fetches additional cultures from `/api/abp/application-localization` and merges them into `i18next`
- Configure(options =>
- {
- options.Resources
- .Add("en")
- .AddVirtualJson("/Localization/CloudCrmWeb");
+Use the locale files under `apps/react/src/locales` for UI-only strings that belong only to this application.
- options.DefaultResourceType = typeof(CloudCrmWebResource);
- });
- }
-```
+### `react-admin-console`
-You can define new localization entries in the language files under the **Localization** folder and directly use them in your application by using the `IStringLocalizer<>` or `IHtmlLocalizer<>` services:
+The `react-admin-console` application keeps its bundled translations under `apps/react-admin-console/src/locales/*.json` and initializes `i18next` from those files.
-```html
-@page
-@using Microsoft.Extensions.Localization
-@inject IStringLocalizer L
+Its supported language list is controlled by `Volo.Abp.AdminConsole.AbpAdminConsoleOptions.LocalizationLanguages`, which is exposed to the SPA through `/admin-console/api/config`. If no languages are configured, the frontend falls back to `en`.
-
-
@L["LongWelcomeMessage"]
-
-```
+Use the admin console locale files for UI-only texts that are specific to the administration surface. Keep shared module texts in backend localization resources.
-### Angular UI
-
-Angular UI gets the localization resources from the [`application-localization`](../../framework/api-development/standard-apis/localization.md) API's response and merges these resources in the `ConfigStateService` for the localization entries/resources coming from the backend side.
-
-In addition, you may need to define some localization entries and only use them on the UI side. ABP already provides the related configuration for you, so you don't need to make any configurations related to that and instead you can directly define localization entries in the `app.config.ts` file of your angular application as follows:
-
-```ts
-import { provideAbpCore, withOptions } from '@abp/ng.core';
-
-export const appConfig: ApplicationConfig = {
- providers: [
- // ...
- provideAbpCore(
- withOptions({
- environment,
- registerLocaleFn: registerLocale(),
- localizations: [
- {
- culture: 'en',
- resources: [
- {
- resourceName: 'MyProjectName',
- texts: {
- "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information visit"
- }
- }
- ]
- }
- ]
- }),
- ),
- ],
-};
-```
+### `react-native`
-After defining the localization entries, it can be used as below:
+When mobile is enabled, the generated React Native client stores its bundled translations under `apps/mobile/react-native/src/locales`. The `LocalizationService.ts` file:
-{%{
-```html
-{{ 'MyProjectName::LongWelcomePage' | abpLocalization }}
-```
-}%}
+* registers the available locale files
+* exposes the language list used by the app
+* maps the default resource name from `Environment.ts`
-> For more information, please refer to [UI Localization section of the Angular Localization document](../../framework/ui/angular/localization.md).
+Use these locale files for mobile-specific UI strings.
## Creating a New Localization Resource
diff --git a/docs/en/solution-templates/microservice/mobile-applications.md b/docs/en/solution-templates/microservice/mobile-applications.md
index c14895b7b9..224ff906e0 100644
--- a/docs/en/solution-templates/microservice/mobile-applications.md
+++ b/docs/en/solution-templates/microservice/mobile-applications.md
@@ -1,7 +1,7 @@
```json
//[doc-seo]
{
- "Description": "Explore how to integrate mobile applications with ABP's microservice solution, featuring options like MAUI and React Native for seamless development."
+ "Description": "Understand the optional React Native mobile application in ABP Studio's modern microservice solution template."
}
```
@@ -19,162 +19,62 @@
> You must have an ABP Business or a higher license to be able to create a microservice solution.
-The ABP Studio microservice solution template comes with an optional mobile application that is completely integrated to the solution. There are two options for the mobile application:
+The current ABP Studio modern microservice solution template can optionally generate a mobile application under `apps/mobile/react-native`.
-* MAUI
-* React Native
+The modern template does not generate a MAUI mobile application. Its mobile choices are **None** and **React Native**.
-You can select the mobile application type while [creating your solution](../../get-started/microservice.md).
+## The Mobile Gateway
-## Fundamental Structures
+If you enable the mobile application, an API gateway named `MobileGateway` is added under `gateways/mobile`. The React Native client calls backend APIs through this gateway.
-The following sections explain the common structure of the mobile applications (valid for both of MAUI and React Native applications).
+See *[API Gateways](api-gateways.md)* for the shared gateway structure.
-### The Mobile Gateway
+## Authentication
-If you've selected to include the mobile application into your solution, an API Gateway, named `MobileGateway` is also added to the solution. It is located under the `gateways/mobile` in the solution folder.
+The generated React Native app is configured in `Environment.ts` with:
-You can refer to the *[API Gateways](api-gateways.md)* document to understand the structure of the mobile gateway.
+* the `AuthServer` issuer URL
+* the `MobileGateway` base URL
+* the `ReactNative` client id and scopes
-### Authentication
+At runtime, the mobile client uses the password grant to exchange credentials for access and refresh tokens at the `AuthServer` `/connect/token` endpoint, then sends bearer tokens to backend APIs through the `MobileGateway`. Account-related operations such as registration, password reset, profile picture management, and logout use the generated API client under `src/api`.
-Both of the MAUI and React Native applications are installed as native applications to the devices. So, they are using the [OpenID Connect](../../modules/openiddict.md) protocol to authenticate the users. The authentication is done by the `AuthServer` application.
+## Built-in Capabilities
-They don't run on a browser, so they can't use the [Cookie Authentication](../../modules/account.md#cookie-authentication) method. They are using the [JWT Bearer Authentication](../../modules/account.md#jwt-bearer-authentication) method.
+The generated mobile app already includes screens and flows for:
-Best way to communicate with the `AuthServer` application is using the browser. So, the mobile applications are opening a browser window to authenticate the user. Then browser redirects back to the mobile application with the authentication result.
+* sign in, registration, forgot password, and reset password
+* account and profile picture management
+* user-facing settings such as language, theme, and logout
-The following screenshot was taken from the *Login* page of the [Account](../../modules/account.md) module in the mobile application's UI:
+Localization is handled by the bundled locale files under `src/locales` and `src/services/LocalizationService.ts`. Theme handling lives under `src/theme`.
-
+## Solution Structure
+The React Native application is based on [React Native](https://reactnative.dev/) and [Expo](https://expo.dev/). The main files and folders in `apps/mobile/react-native` are:
-### User Management
+* `Environment.ts`: runtime URLs, client id, scopes, and default localization resource name.
+* `src/api`: HTTP clients for token, account, and application configuration calls.
+* `src/components`: reusable UI components.
+* `src/contexts`: shared React contexts, including localization context.
+* `src/hooks`: reusable React hooks.
+* `src/interceptors`: request and response interception for the API client.
+* `src/locales`: bundled UI translations.
+* `src/navigators`: drawer, stack, and tab navigation definitions.
+* `src/screens`: application pages such as login, home, settings, and account flows.
+* `src/services`: cross-cutting services such as localization helpers.
+* `src/store`: Redux actions, listeners, reducers, and selectors.
+* `src/theme`, `src/types`, `src/utils`: shared theming, typings, and helper utilities.
-User Management is implemented in the MAUI Application in the `Acme.CloudCrm.Maui` project with XAML and C# for MAUI and it is implemented in the React Native Application in the react-native project for React Native UI option.
+## Running the Application
-
+The React Native app is not started by the ABP Studio solution runner. Run `AuthServer`, `MobileGateway`, and the required backend services first, then start the mobile app with the standard React Native / Expo toolchain.
-
-### Profile Management
-
-Profile management allows users to view and update their personal profile picture and their passwords. It provides a seamless experience for users to manage their profiles within the mobile application without navigating to the authserver web application.
-
-The following screenshot was taken from the *Profile* page in the MAUI application:
-
-
-
-### Other Features
-
-#### Settings Page
-The settings page allows users to change the language and theme of the application, manage their profiles, change their passwords, and also to logout from the application.
-
-
-
-- **Language**: Applications implements ABP localization logic on the platforms. The language is automatically selected based on the device's language. Users can also change the language manually from the settings page.
-
-- **Dark/Light Theme**: ABP MAUI and React Native applications support both dark and light themes. The theme is automatically selected based on the device's theme. Users can also change the theme manually from the settings page.
-
-## Applications
-
-Following sections explain the structure of MAUI and React Native Applications.
-
-### The MAUI Application
-
-This is the mobile application that is built based on Microsoft's [MAUI framework](https://learn.microsoft.com/en-us/dotnet/maui). It will be in the solution only if you've selected the MAUI as your mobile application option.
-
-#### Project Structure
-Entire MAUI application is built on the AppShell pattern of MAUI. You can find the AppShell class in the `Acme.CloudCrm.Maui` project. It is the entry point of the application. It is responsible for initializing the application and registering the services. You find all the pages and routing information in the `AppShell.xaml` file.
-
-- **Pages**: Pages are located in the `Pages` folder of the project. Each page has a XAML & C# file. XAML file is responsible for the UI and C# file is responsible for the initialization of the page.
-
-- **ViewModels**: ViewModels are located in the `ViewModels` folder of the project. Each ViewModel has a C# file. ViewModels are responsible for the business logic of the pages.
-
-- **Oidc**: Oidc folder contains the logic for the authentication of the application. It contains the `MauiAuthenticationBrowser` class which manages the authentication process of the application.
-
-- **Localization**: Localization folder contains the localization logic of the application. It contains regular ABP Localization logic and the `LocalizationResourceManager` class which is wrapper for the ABP localization logic on MAUI.
-
-- **Messages**: Messages folder contains the message data for the communication inside application. Messages are used to send data between pages and viewmodels. It's designed on the [MVVM Toolkit Messenger](https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/messenger) feature.
-
-- **Storage**: Storage folder contains the storage logic of the application. It contains the `IStorage` class which is wrapper for the [SecureStorage](https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/storage/secure-storage) feature. It is used to store the authentication data of the user and preferences of the application.
-
-_Rest of the folders are MAUI default folders. You can check the [.NET MAUI single project documentatipon](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/single-project?view=net-maui-8.0) for more information._
-
-#### Running the application
-Before running the MAUI Application, rest of the applications in the solution must be running. Such as AuthServer, MobileGateway and the microservices.
-
-Make sure that you prepared devices for debugging. You can check the following documentation for each platform.
-
-- [Android](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/)
-- [iOS](https://learn.microsoft.com/en-us/dotnet/maui/ios/pair-to-mac)
-- [MacCatalyst](https://learn.microsoft.com/en-us/dotnet/maui/mac-catalyst/cli)
-- [Windows](https://learn.microsoft.com/en-us/dotnet/maui/windows/setup)
-
-##### Network
-
-All the platforms including iOS, MacCataylst and Windows, runs the applications in the same network of the host. So, you can use the `localhost` address to connect to the applications.
-
-But in the **Android Emulator**, you need to use the `adb reverse` command to connect to the applications. You can use the following command to connect to the AuthServer application:
+For Android emulators or devices, map the development ports before testing:
```bash
-adb reverse tcp:44300 tcp:44300
+adb reverse tcp: tcp:
+adb reverse tcp: tcp:
```
-> `44300` is an example port. You need to change it based on the port of the AuthServer & MobileGateway application.
-
-> You need to run the command for a running emulator. If you run the emulator after running the command, you need to run the command again.
-
-
-##### Target Framework
-
-Since MAUI Applications have multiple target frameworks, you need to select the target framework before running the application. You can select the target framework from the context menu of the Solution Runner.
-
-
-
-
-##### Running with ABP Studio
-You can start the MAUI application with the solution runner. You can click the start button of the MAUI application in the solution runner tree. It will start the application on the selected target framework. Since they're not running on a process and they're running on a device, you can't see them as running state in the solution runner. After the application is deployed, it'll be opened on the device and it'll be shown as stopped in the solution runner.
-
----
-
-#### Development on MAUI Application
-
-You can follow [Mobile Application Development Tutorial - MAUI](../../tutorials/mobile/maui) to learn how to develop on MAUI Application.
-
-### The React Native Application
-
-This is the mobile application that is built based on Facebook's [React Native framework](https://reactnative.dev/) and [Expo](https://expo.dev/). It will be in the solution only if you've selected React Native as your mobile application option.
-
-#### Project Structure
-- **Environment.ts**: file using for providing application level variables like `apiUrl`, `oAuthConfig` and etc.
-
-- **api**: The `api` folder contains HTTP request files that simplify API management in the React Native starter template
- - `API.ts:` exports **axiosInstance**. It provides axios instance filled api url.
-
-- **components**: In the `components` folder, you can reach built in react native components that you can use in your app. These components **facilitates** your list, select and etc. operations.
-
-- **contexts**: `contexts` folder contains [react context](https://react.dev/reference/react/createContext). You can expots your contexts in this folder. `Localization context provided in here`
-
-- **hocs**: this folder is added to contain higher order components. The purpose is to wrap components with additional features or properties. It initially has a `PermissionHoc.tsx` that wraps a component to check the permission grant status.
-
-- **hooks**: covers the react native hooks where you can get a reference from [the official documentation](https://react.dev/reference/react/hooks).
-
-- **interceptors**: initializes a file called `APIInterceptor.ts` that has a function to manage the http operations in a better way.
-
-- **navigators**: folder contains [react-native stacks](https://reactnavigation.org/docs/stack-navigator/). After creating a new *FeatureName*Navigator we need to provide in `DrawerNavigator.ts` file as `Drawer.Screen`
-
-- **screens**: folder has the content of navigated page. We will pass as component property to [Stack.Screen](https://reactnavigation.org/docs/native-stack-navigator/)
-
-- **store**: folder manages state-management operations. We will define `actions`, `listeners`, `reducers`, and `selectors` here.
-
-- **styles**: folder contains app styles. `system-style.ts` comes built in template we can also add new styles.
-
-- **utils**: folder contains helper functions that we can use in application
-
-#### Running the Application
-
-React Native applications can't be run with the solution runner. You need to run them with the React Native CLI. You can check the [React Native documentation](https://reactnative.dev/docs/environment-setup) to learn how to setup the environment for React Native development.
-
-Before running the React Native application, the rest of the applications in the solution must be running. Such as AuthServer, MobileGateway and the microservices.
-
-Then you can run the React Native application by following this documentation: [Getting Started with the React Native](../../framework/ui/react-native/index.md).
\ No newline at end of file
+Use the ports assigned to `MobileGateway` and `AuthServer` in your generated solution.
diff --git a/docs/en/solution-templates/microservice/overview.md b/docs/en/solution-templates/microservice/overview.md
index fc322565c3..5d1438f22c 100644
--- a/docs/en/solution-templates/microservice/overview.md
+++ b/docs/en/solution-templates/microservice/overview.md
@@ -1,7 +1,7 @@
```json
//[doc-seo]
{
- "Description": "Explore the Microservice solution template for ABP Framework, featuring pre-installed libraries and services for seamless development and production."
+ "Description": "Explore the modern ABP microservice solution template, featuring React-based web apps, API gateways, and pre-installed libraries and services for development and production."
}
```
@@ -21,6 +21,8 @@
In this document, you will learn what the Microservice solution template offers to you.
+This page describes the current modern microservice template. In this template family, the web layer supports `React` or `No UI`.
+
## The Big Picture
@@ -45,9 +47,8 @@ All the following **libraries and services** are **pre-installed** and **configu
The following features are built and pre-configured for you in the solution.
* **Authentication** is fully configured based on best practices;
- * **JWT Bearer Authentication** for microservices and applications.
- * **OpenId Connect Authentication**, if you have selected the MVC UI.
- * **Authorization code flow** is implemented, if you have selected a SPA UI (Angular or Blazor WASM).
+ * **JWT Bearer Authentication** for microservices and gateways.
+ * **OpenId Connect / authorization code flow** for the React web applications (`react`, `react-admin-console`, and `react-public-web` when enabled).
* Other flows (resource owner password, client credentials...) are easy to use when you need them.
* **[Permission](../../framework/fundamentals/authorization/index.md)** (authorization), **[setting](../../framework/infrastructure/settings.md)**, **[feature](../../framework/infrastructure/features.md)** and the **[localization](../../framework/fundamentals/localization.md)** management systems are pre-configured and ready to use.
* **[Background job system](../../framework/infrastructure/background-jobs/index.md)** with [RabbitMQ integrated](../../framework/infrastructure/background-jobs/rabbitmq.md).
@@ -98,21 +99,22 @@ There are two database provider options are provided on a new microservice solut
### UI Frameworks
-The solution comes with a main web application with the following UI Framework options:
+The current modern microservice template supports the following web options:
+
+* **None**: Doesn't include the React web applications.
+* **React**: Creates the web application set for the solution.
+
+When you select **React**, ABP Studio creates:
-* **None** (doesn't include a web application to the solution)
-* **Angular**
-* **MVC / Razor Pages UI**
-* **Blazor WebAssembly**
-* **Blazor Server**
-* **MAUI with Blazor (Hybrid)**
+* `apps/react` as the main SPA behind the `web` gateway.
+* `apps/react-admin-console` as the dedicated administration SPA.
+* `apps/react-public-web` as an additional public site when the *Public Website* option is enabled.
### The Mobile Application
-If you prefer, the solution includes a mobile application with its dedicated API Gateway. The mobile application is fully integrated to the system, implements authentication (login) and other ABP features, and includes a few screens that you can use and take as example. The following options are available:
+If you prefer, the solution includes a mobile application with its dedicated API Gateway. The mobile application is fully integrated to the system, implements authentication (login) and other ABP features, and includes a few screens that you can use and take as example. In the current modern template, the available options are:
* **None** (doesn't include a mobile application to the solution)
-* **MAUI**
* **React Native**
### Multi-Tenancy & SaaS Module
diff --git a/docs/en/solution-templates/microservice/solution-structure.md b/docs/en/solution-templates/microservice/solution-structure.md
index 90fd211136..efca1a2f44 100644
--- a/docs/en/solution-templates/microservice/solution-structure.md
+++ b/docs/en/solution-templates/microservice/solution-structure.md
@@ -1,7 +1,7 @@
```json
//[doc-seo]
{
- "Description": "Explore the folder structure of ABP Studio's microservice solution template, essential for effective project organization and development."
+ "Description": "Explore the folder structure of ABP Studio's modern microservice solution template, including its React apps, gateways, and services."
}
```
@@ -23,15 +23,17 @@ This document explains the solution and folder structure of ABP Studio's [micros
> This document assumes that you've created a new microservice solution by following the *[Quick Start: Creating a Microservice Solution with ABP Studio](../../get-started/microservice.md)* guide.
+The current modern template uses React-based web applications. Older MVC, Angular, Blazor, and MAUI web app layouts are not part of this structure.
+
## Understanding the ABP Solution Structure
When you create a new microservice solution, you will see a tree structure similar to the one below in the *Solution Explorer* panel:
-Each leaf item (e.g. `Acme.CloudCrm.IdentityService`, `Acme.CloudCrm.Web`, `Acme.CloudCrm.WebGateway`...) in the tree above is an **ABP Studio module**. An ABP Studio module can be a web application, an API gateway, a microservice, a console application or whatever .NET allows you to build. They are grouped into **folders** (`apps`, `gateways` and `services`) in that solution.
+Each leaf item in the tree above is an **ABP Studio module**. They are grouped into **folders** (`apps`, `gateways` and `services`) in that solution.
-**Each ABP Studio module has a separate .NET solution**; this allows your team to develop them individually, in keeping with the nature of the microservices architecture.
+The .NET-based modules, such as `auth-server`, gateways, and backend services, keep their own .NET solution structure. Frontend applications such as `react`, `react-admin-console`, and `react-public-web` live in their own frontend folders.
> Refer to the *[Concepts](../../studio/concepts.md)* document for a full definition of ABP Studio solution, module and package terms.
@@ -48,13 +50,21 @@ The root folder of the solution will be similar to the following:
The folder structure basically matches to the solution in ABP Studio's *Solution Explorer*:
* `.abpstudio` folder contains your personal preferences for this solution and it is not added to your source control system (Git ignored). It is created and used by ABP Studio.
-* `app` folder contains the applications that has a UI and typically used by the end users of your system.
+* `apps` folder contains the applications of the solution:
+ * `auth-server` is the authentication server based on OpenIddict.
+ * `react` is the main React SPA when the web UI is enabled.
+ * `react-admin-console` is the dedicated administration SPA when the web UI is enabled.
+ * `react-public-web` is the optional public-facing site.
+ * `mobile/react-native` is the optional mobile application.
* `etc` folder contains some additional files for the solution. It has the following sub-folders:
* `abp-studio` folder contains settings that are managed by ABP Studio. This folder is added to your source control system and shared between developers.
* `docker` folder contains docker-compose configuration to easily run infrastructure dependencies (e.g. RabbitMQ, Redis) of the solution on your local computer.
* `helm` folder contains all the Helm charts and related scripts to deploy the solution to Kubernetes.
- * `k8s` folder contains some additional files to setup *Kubernetes Dashboard* on your local machine.
-* `gateways` folder contains one or more API Gateways (the count depends on if you've selected mobile application or other applications if available). This solution implements the [BFF](https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends) (Backend for frontend pattern), that means it has a dedicated API Gateway for each different UI application.
+ * `scripts` folder contains helper scripts for initializing and running the solution.
+* `gateways` folder contains one or more API Gateways. This solution implements the [BFF](https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends) pattern, so it has a dedicated API Gateway for each different client type:
+ * `web` is the gateway for `react`.
+ * `public` is the gateway for `react-public-web`, when the public website is enabled.
+ * `mobile` is the gateway for the React Native application, when mobile is enabled.
* `services` folder contains the microservices. The microservice count varies based on the options you've selected during the solution creation. However, the following microservices are always included:
- * `administration` microservice is used to manage permissions, languages and other fundamental settings of the system.
- * `identity` microservice is used to manage users, roles and their permissions. It basically serves to the [Identity](../../modules/identity.md) module's UI (and [OpenIddict](../../modules/openiddict.md) module's UI, if selected).
\ No newline at end of file
+ * `administration` microservice manages permissions, settings, features, and other operational capabilities used by the solution.
+ * `identity` microservice manages users, roles, and related identity/OpenIddict endpoints used by the web applications.
diff --git a/docs/en/solution-templates/microservice/web-applications.md b/docs/en/solution-templates/microservice/web-applications.md
index 6c50a7801a..4e9e7eea0c 100644
--- a/docs/en/solution-templates/microservice/web-applications.md
+++ b/docs/en/solution-templates/microservice/web-applications.md
@@ -1,7 +1,7 @@
```json
//[doc-seo]
{
- "Description": "Explore the ABP Framework's microservice solution template, featuring integrated web applications and API gateways for seamless development."
+ "Description": "Explore the web applications in ABP Studio's modern microservice solution template, including react, react-admin-console, react-public-web, and AuthServer."
}
```
@@ -19,15 +19,9 @@
> You must have an ABP Business or a higher license to be able to create a microservice solution.
-The ABP Studio microservice solution template contains a few web applications. These applications are fully integrated to the solution, uses the [microservices](microservices.md) through the [API gateways](api-gateways.md).
+The current ABP Studio microservice solution template uses React-based web applications. These applications are fully integrated to the solution and use the [microservices](microservices.md) through the [API gateways](api-gateways.md).
-The following figure shows the application in the *[Solution Explorer](../../studio/solution-explorer.md)* pane of ABP Studio:
-
-
-
-
-
-Count and types of the web applications depends on the options you've selected while [creating your solution](../../get-started/microservice.md). This document introduces and explains all the pre-built web applications included in the microservice solution template.
+Count and type of the web applications depend on the options you've selected while [creating your solution](../../get-started/microservice.md). This document introduces the pre-built web applications included in the current modern microservice template.
## AuthServer
@@ -35,7 +29,7 @@ Count and types of the web applications depends on the options you've selected w
The `AuthServer` application is also used by microservices as Authority for JWT Bearer Authentication.
-> You normally do not directly browse this application. It is used by the other applications to authenticate the users and applications..
+> You normally do not directly browse this application. It is used by the other applications to authenticate users and applications.
The following screenshot was taken from the *Login* page of the [Account](../../modules/account.md) module in the application's UI:
@@ -43,40 +37,42 @@ The following screenshot was taken from the *Login* page of the [Account](../../
That application is mainly based on the [OpenIddict](../../modules/openiddict.md), the [Identity](../../modules/identity.md), and the [Account](../../modules/account.md) modules. So, it basically has login, register, forgot password, two factor authentication and other authentication related pages.
-## The Main Web Application (optional)
-
-This is the main web application of the solution. It uses the `Acme.CloudCrm.AuthServer` application as the [API gateway](api-gateways.md). It also uses the Authentication Server application to make users login.
+## `react`
-The following screenshot was taken from the *Role Management* page of the [Identity](../../modules/identity.md) module in the web application's UI:
+`apps/react` is the main authenticated React SPA of the solution. It talks to backend services through the `web` [API gateway](api-gateways.md) and uses `AuthServer` for user login.
-
+This application is the main user-facing web UI for the solution. In the generated route configuration, it can also deep-link users to the separate `react-admin-console` application for operational and administration tasks.
-The following options are provided while [creating the solution](../../get-started/microservice.md):
+If you choose `No UI` while creating the solution, ABP Studio doesn't generate `apps/react`.
-* MVC / Razor Pages UI
-* Angular
-* Blazor WebAssembly
-* Blazor Server
-* MAUI Blazor (Hybrid)
+## `react-admin-console`
-The following sections explain each of these UI types.
+`apps/react-admin-console` is the dedicated administration SPA. It uses the `/admin-console/` base path and focuses on back-office and operational capabilities such as:
-### MVC / Razor Pages Web Application
+* account management
+* users, roles, claim types, and organization units
+* tenants and editions
+* OpenIddict applications and scopes
+* settings, audit logs, and optional module UIs
-`Acme.CloudCrm.Web` module is created if you've selected the MVC / Razor Pages UI while creating the solution. It has own .NET solution that is located under the `apps/web` folder of the solution root.
+The route list is filtered by backend permissions and by which backend modules are actually available.
-### Angular Web Application
+## `Volo.Abp.AdminConsole` Backend Role
-If you've selected the Angular UI while creating your solution, a folder named `angular` is included in the `apps` folder of the solution. That folder contains the main web application of the solution that is implemented using Angular.
+`Volo.Abp.AdminConsole` is the backend-side companion for the admin console when you host it from an ASP.NET Core application. It is responsible for:
-### Blazor WebAssembly Web Application
+* serving the admin console under `/admin-console`
+* exposing runtime configuration from `/admin-console/api/config`
+* exposing module discovery from `/admin-console/api/modules`
+* applying branding, theme, localization, and customization settings for the admin console
+* optionally redirecting `/` to `/admin-console`
-If you've selected the Blazor WebAssembly UI while creating your solution, `Acme.CloudCrm.Blazor` project is included in the `apps` folder of the solution. That folder contains the main web application of the solution that is implemented using Blazor WebAssembly.
+The standalone `react-admin-console` app follows the same `/admin-console` route and OIDC conventions, so the frontend and backend pieces stay aligned.
-### Blazor Server Web Application
+## `react-public-web`
-If you've selected the Blazor Server UI while creating your solution, `Acme.CloudCrm.Blazor` project is included in the `apps` folder of the solution. That folder contains the main web application of the solution that is implemented using Blazor Server.
+When you enable the *Public Website* option, ABP Studio creates `apps/react-public-web`. This is a separate public-facing React application behind the `public` gateway.
-### MAUI Blazor (Hybrid) Web Application
+Use this application for anonymous or customer-facing traffic. Keep authenticated operational flows in `react` and `react-admin-console`.
-If you've selected the MAUI Blazor (Hybrid) UI while creating your solution, `Acme.CloudCrm.MauiBlazor` project is included in the `apps` folder of the solution. That folder contains the main desktop application of the solution that is implemented using MAUI Blazor (Hybrid) that uses existing Blazor UI Implementation.
+`react-public-web` can still participate in authentication flows when needed, but its role is different from the back-office applications: it is the public entry point, not the administration surface.
diff --git a/docs/en/solution-templates/modular-monolith/index.md b/docs/en/solution-templates/modular-monolith/index.md
new file mode 100644
index 0000000000..a49a268bc7
--- /dev/null
+++ b/docs/en/solution-templates/modular-monolith/index.md
@@ -0,0 +1,62 @@
+```json
+//[doc-seo]
+{
+ "Description": "Learn how ABP Studio's modern Modular Monolith solution template organizes a main application and reusable modules in a single deployable solution."
+}
+```
+
+# ABP Studio: Modular Monolith Solution Template
+
+````json
+//[doc-nav]
+{
+ "Previous": {
+ "Name": "Layered Solution",
+ "Path": "solution-templates/layered-web-application/index.md"
+ },
+ "Next": {
+ "Name": "Microservice Solution",
+ "Path": "solution-templates/microservice/index.md"
+ }
+}
+````
+
+ABP Studio's modern solution wizard includes a dedicated **Modular Monolith** architecture. Under the hood, it uses the modern no-layers application template for the main application, then enables modularity automatically.
+
+> **This page documents the modern modular monolith path. If you are working with the classic template family, see the [Solution Template Selection Guide](../guide.md) for the host + module composition approach.**
+
+## What ABP Studio Creates
+
+When you choose `Modular Monolith` in the modern solution wizard, ABP Studio:
+
+* creates the main application by using the modern no-layers host template.
+* locks the solution into modular mode.
+* creates a `main` folder in the solution model and moves the main application into it.
+* creates a `modules` folder for reusable module solutions.
+* lets you add additional modules during solution creation and optionally install them into the main application immediately.
+
+## Typical Layout
+
+In ABP Studio's *Solution Explorer*, the solution is organized around these areas:
+
+* `main`: the main application and its host-side assets.
+* `modules`: one module solution per business capability.
+* `etc`: shared infrastructure, run profiles, and deployment files.
+
+Additional modules are generated under the solution's `modules/` directory, while the main application remains the single deployable host.
+
+## How Modules Fit In
+
+The module solutions created for a modular monolith use the same reusable module concepts documented in the [Application Module Template](../application-module/index.md) page.
+
+Use this template when you want:
+
+* clear module boundaries without a distributed deployment model.
+* separate module solutions for teams or business domains.
+* a monolith today, with a cleaner path toward microservices later.
+
+## See Also
+
+* [Solution Template Selection Guide](../guide.md)
+* [Application Module Template](../application-module/index.md)
+* [Modular Monolith Application Development Tutorial](../../tutorials/modular-crm/index.md)