docs/en/solution-templates/layered-web-application/web-applications.md
//[doc-seo]
{
"Description": "Explore the Layered Solution for Web Applications, including MVC/Razor Pages, to enhance user interaction with your ABP Framework projects."
}
//[doc-nav]
{
"Previous": {
"Name": "Main Components",
"Path": "solution-templates/layered-web-application/main-components"
},
"Next": {
"Name": "Db Migrator",
"Path": "solution-templates/layered-web-application/db-migrator"
}
}
Some of the features mentioned in this document may not be available in the free version. We're using the * symbol to indicate that a feature is available in the Team and Higher licenses.
The web applications are the main user interfaces of the solution. They are the entry points for users to interact with the system. The Layered Solution Template supports the following web applications:
You can select the web application type that fits your requirements during the solution creation process in the UI Framework step. The Layered Solution Template generates the selected web applications with the necessary configurations and integrations.
MVC (Model-View-Controller) is a design pattern commonly used for building web applications. Razor Pages, on the other hand, is a page-based programming model designed to make building web applications simpler and more productive.
When you select the MVC / Razor Pages option in the Layered Solution Template, it generates an ASP.NET Core MVC application named something like Acme.BookStore.Web. This application serves as the web interface for your solution, using server-side rendering to deliver dynamic HTML pages to users.
Angular is a popular front-end framework for building single-page applications (SPAs). It offers a rich set of features for creating modern web applications with dynamic and interactive user interfaces.
When you select the Angular option in the Layered Solution Template, it generates:
angular.Acme.Bookstore.HttpApi.Host.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 *.HttpApi.Host application.
Each of ABP module is an NPM package. Some ABP modules are added as a dependency in package.json. These modules are installed with their dependencies. To see all ABP packages, you can run the following command in the angular folder:
yarn list --pattern abp
Angular application structure:
Application config is the root configuration of the application. Some of the ABP modules and some essential providers are imported to appConfig.
ABP Config modules have also been provided in appConfig for initial requirements of the lazy-loadable ABP modules.
There are lazy-loadable ABP modules in the APP_ROUTES as routes.
Paths of ABP Modules should not be changed.
You should add routes property in the data object to add a link on the menu to redirect to your custom pages.
{
path: 'dashboard',
loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent),
canActivate: [authGuard, permissionGuard],
data: {
routes: {
name: 'ProjectName::Menu:Dashboard',
order: 2,
iconClass: 'fa fa-dashboard',
requiredPolicy: 'ProjectName.Dashboard.Host'
} as ABP.Route
}
}
In the above example;
requiredPolicy property of the routes object. If the user is not authorized to access the page, the 403 page appears.name property of routes is the menu link label. A localization key can be defined.iconClass property of the routes object is the menu link icon class.requiredPolicy property of the routes object is the required policy key to access the page.After the above routes definition, if the user is authorized, the dashboard link will appear on the menu.
The files under the src/environments folder have the essential configuration of the application.
Home component is an example lazy-loadable component that loads on the root address of the application.
The required style files are added to the styles array in angular.json. AppComponent loads some style files lazily via LazyLoadService after the main bundle is loaded to shorten the first rendering time.
You should create your tests in the same folder as the file you want to test.
See the testing document.
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).
Blazor WebAssembly 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.
When you select the Blazor WebAssembly option in the Layered Solution Template, it generates:
*.Blazor, which serves as the main Blazor host project.*.Blazor.Client, where you can write the client-side (UI logic) code.*.HttpApi.Host, where the server-side (business logic) code runs.The Blazor client application communicates with the server by sending HTTP requests to the *.HttpApi.Host application.
Blazor Server 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.
When you select the Blazor Server option in the Layered Solution Template, it generates:
*.Blazor, which serves as the main Blazor host project.Blazor WebApp is a combination of Blazor technologies optimized for building hybrid web applications that can leverage both client-side and server-side capabilities.
When you select the Blazor WebApp option in the Layered Solution Template, it generates:
*.Blazor, which serves as the main Blazor host project.*.Blazor.Client, where you can write the client-side (UI logic) code.The Blazor client application communicates with the server by sending HTTP requests to the *.Blazor application.
Maui Blazor (Hybrid) enables building cross-platform applications that combine Blazor for the UI with .NET MAUI for native device integration. It is suitable for building apps that work across desktop and mobile platforms.
When you select the Maui Blazor (Hybrid) option in the Layered Solution Template, it generates:
*.MauiBlazor, which serves as the main UI host project.*.HttpApi.Host, where the server-side (business logic) code runs.The Maui Blazor (Hybrid) application communicates with the server by sending HTTP requests to the *.HttpApi.Host application.
This option creates a backend-only solution without a web interface, suitable for scenarios like API-only applications or headless services.
When you select the No UI option in the Layered Solution Template, it generates an ASP.NET Core application named *.HttpApi.Host that serves as the backend API for your solution.