React UI is available in the modern template flow with ABP Studio v3.0+. Select **React** in the UI Framework list to create the React app and Admin Console integration.
{{ end }}
Here, you see all the possible UI options supported by that startup solution template. Pick the **{{ UI_Value }}**.
@ -194,9 +192,6 @@ You can start the following application(s):
{{ if UI == "NG" }}
{{ if Tiered == "No" }}- `Acme.BookStore.HttpApi.Host`{{ end }}
- `Acme.BookStore.Angular`
{{ else if UI == "React" }}
{{ if Tiered == "No" }}- `Acme.BookStore.HttpApi.Host`{{ end }}
- `react`
{{ else if UI == "Blazor" }}
{{ if Tiered == "No" }}- `Acme.BookStore.HttpApi.Host`{{ end }}
- `Acme.BookStore.Blazor`
@ -212,7 +207,7 @@ You can start the following application(s):
> Notice that the services running in docker-compose are exposed to your localhost. If any service in your localhost is already using the same port(s), you will get an error. In that case, stop your local services first.
{{ end }}
Once the {{ if UI == "React" }}`react`{{ else }}`Acme.BookStore.{{ if UI == "NG" }}Angular{{ else if UI == "BlazorServer" || UI == "Blazor" || UI == "BlazorWebApp" }}Blazor{{ else }}Web{{ end }}`{{ end }} application started, you can right-click it and select the *Browse* command:
Once the `Acme.BookStore.{{ if UI == "NG" }}Angular{{ else if UI == "BlazorServer" || UI == "Blazor" || UI == "BlazorWebApp" }}Blazor{{ else }}Web{{ end }}` application started, you can right-click it and select the *Browse* command:
Right-click the `Acme.BookStore.HttpApi.Host` project and select the *Set as Startup Project* command. You can then hit *F5* or *Ctrl + F5* to run the backend host application. Start the React application from the `react` folder with `npm run dev`, then browse the React UI.
{{ else }}
Right-click the `Acme.BookStore.{{ if UI == "NG" || UI == "Blazor" }}HttpApi.Host{{ else if UI == "BlazorServer" || UI == "BlazorWebApp" }}Blazor{{ else }}Web{{ end }}` project and select the *Set as Startup Project* command. You can then hit *F5* or *Ctrl + F5* to run the web application. It will run and open the application UI in your default browser:
@ -64,8 +64,6 @@ 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:
If you select **React**, the solution includes the main React application and the React Admin Console surface. The Admin Console uses its own OpenIddict client and is served through the Web Gateway with the rest of the solution.
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.
@ -202,7 +200,7 @@ 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 main web application and select the *Browse* command. For React UI solutions, this is the `react` application.
Once all the applications are ready, you can right-click the `Web` application and select the *Browse* command:
React UI is available in the modern template flow with ABP Studio v3.0+. Select **React** in the UI Framework list to create the React app and Admin Console integration.
{{ end }}
Here, you see all the possible UI options supported by that startup solution template. Pick the **{{ UI_Value }}**.
@ -148,9 +146,9 @@ In the Solution Runner section (on the left side) you can see all the runnable a
To start an application, either click the *Play* icon near to the application or right-click and select the *Run* -> *Start* context menu item.
You can start the `Acme.BookStore`{{ if UI == "NG" }} and `Acme.BookStore.Angular`{{ else if UI == "React" }} and `react`{{ end }}.
You can start the `Acme.BookStore`{{ if UI == "NG" }} and `Acme.BookStore.Angular`{{ end }}.
Once the {{ if UI == "React" }}`react`{{ else }}`Acme.BookStore{{ if UI == "NG" }}.Angular{{ end }}`{{ end }} application started, you can right-click it and select the *Browse* command:
Once the `Acme.BookStore{{ if UI == "NG" }}.Angular{{ end }}` application started, you can right-click it and select the *Browse* command:
You can then hit *F5* or *Ctrl + F5* to run the backend host application. Start the React application from the `react` folder with `npm run dev`, then browse the React UI.
{{ else }}
You can then hit *F5* or *Ctrl + F5* to run the web application. It will run and open the application UI in your default browser:
@ -27,7 +27,6 @@ The web applications are the main user interfaces of the solution. They are the
- **MVC / Razor Pages**: This is an ASP.NET Core MVC application. It is a traditional web application that serves HTML pages to users and is suitable for building web applications with server-side rendering.
- **Angular**: This is an Angular application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and is ideal for building modern web applications with rich user interfaces.
- **React UI**: This is a React application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and includes the React-based ABP Admin Console integration.
- **Blazor UI**: A flexible framework for building web applications with .NET. It supports various hosting models:
- **Blazor WebAssembly**: This is a client-side SPA that runs entirely in the user's browser. It communicates with the server using HTTP requests and is suitable for modern web applications with rich interactivity and offline capabilities.
- **Blazor Server**: This is a server-side SPA that runs on the server and communicates with the client in real time using SignalR. It is ideal for applications requiring constant connectivity and rapid server updates.
@ -131,18 +130,6 @@ See the [testing document](https://angular.dev/guide/testing).
* [Chart.js](https://www.chartjs.org/) is used to create widgets.
* [ngx-validate](https://github.com/ng-turkey/ngx-validate) is used for dynamic validation of reactive forms.
## React UI
React UI is a modern SPA option built with React, Vite, TanStack Router, TanStack Query, shadcn/ui-style components, Axios, and Vitest.
When you select the React option in the Layered Solution Template, it generates:
- A React application located under the solution's root folder, typically named `react`.
- An ASP.NET Core application, named `*.HttpApi.Host`, where the server-side HTTP APIs run.
- An embedded React Admin Console hosted by the backend through the `Volo.Abp.AdminConsole` package.
The React application communicates with the server by sending HTTP requests to the `*.HttpApi.Host` application. See the [React UI documentation](../../framework/ui/react/index.md) for details.
## Blazor UI
Blazor is a flexible framework for building web applications with .NET. It supports various hosting models, including Blazor WebAssembly, Blazor Server, Blazor WebApp, and Maui Blazor (Hybrid).
@ -47,7 +47,7 @@ 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, Blazor WASM or React).
* **Authorization code flow** is implemented, if you have selected a SPA UI (Angular or Blazor WASM).
* 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).
@ -105,7 +105,6 @@ The solution comes with a main web application with the following UI Framework o
@ -57,7 +57,6 @@ The following options are provided while [creating the solution](../../get-start
* Angular
* Blazor WebAssembly
* Blazor Server
* React UI
* MAUI Blazor (Hybrid)
The following sections explain each of these UI types.
@ -78,10 +77,6 @@ If you've selected the Blazor WebAssembly UI while creating your solution, `Acme
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.
### React Web Application
If you've selected the React UI while creating your solution, the `react` application is included in the `apps` folder of the solution. The template also includes the React Admin Console surface. Both are served through the Web Gateway and authenticate with the AuthServer using OpenID Connect.
### MAUI Blazor (Hybrid) Web Application
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.
@ -25,7 +25,6 @@ The single-layer solution template includes a web application project that acts
- **MVC / Razor Pages**: This is an ASP.NET Core MVC application. It is a traditional web application that serves HTML pages to users and is suitable for building web applications with server-side rendering.
- **Angular**: This is an Angular application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and is ideal for building modern web applications with rich user interfaces.
- **React UI**: This is a React application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and includes the React-based ABP Admin Console integration.
- **Blazor UI**: A flexible framework for building web applications with .NET. It supports various hosting models:
- **Blazor WebAssembly**: This is a client-side SPA that runs entirely in the user's browser. It communicates with the server using HTTP requests and is suitable for modern web applications with rich interactivity and offline capabilities.
- **Blazor Server**: This is a server-side SPA that runs on the server and communicates with the client in real time using SignalR. It is ideal for applications requiring constant connectivity and rapid server updates.
@ -51,18 +50,6 @@ When you select the Angular option in the single-layer solution template, it gen
The Angular application runs as a client-side SPA in the user's browser and communicates with the server by sending HTTP requests to the ASP.NET Core host application.
## React UI
React UI is a modern SPA option built with React, Vite, TanStack Router, TanStack Query, shadcn/ui-style components, Axios, and Vitest.
When you select the React option in the single-layer solution template, it generates:
- A React application located under the solution's root folder, typically named `react`.
- The ASP.NET Core host application, usually named something like `Acme.BookStore`.
- An embedded React Admin Console hosted by the backend through the `Volo.Abp.AdminConsole` package.
The React application runs as a client-side SPA in the user's browser and communicates with the server by sending HTTP requests to the ASP.NET Core host application. See the [React UI documentation](../../framework/ui/react/index.md) for details.
## Blazor UI
Blazor is a flexible framework for building web applications with .NET. It supports various hosting models, including Blazor WebAssembly, Blazor Server, Blazor WebApp, and Maui Blazor (Hybrid).
Engincan VESKE
2 weeks ago