<IsTestProject Condition="$(MSBuildProjectFullPath.Contains('test')) and ($(MSBuildProjectName.EndsWith('.Tests')) or $(MSBuildProjectName.EndsWith('.TestBase')))">true</IsTestProject>
ABP Framework is a complete **infrastructure** based on the **ASP.NET Core** to create **modern web applications** and **APIs** by following the software development **best practices** and the **latest technologies**. Check out https://abp.io
"TaxNoValidationMessage":"TAX/VAT No is too long!",
"NotesValidationMessage":"Notes field is too long!",
"CheckYourBillingInfo":"You can create your invoice only once! Check your billing information before creating your invoice.",
"Volo.AbpIo.Commercial:030000":"You already used your trial period.",
"Volo.AbpIo.Commercial:030001":"This organization name already exists.",
"StartYourFreeTrial":"Start your free trial",
"TrialLicenseModelInvalidErrorMessage":"One of the following fields is invalid: Country Name, Company Size, Industry or Purpose Of Usage.",
"Trial":"Trial",
@ -488,10 +486,8 @@
"BackOfficeApplicationExplanation":"The actual web application of your system, with multiple UI framework options. You can create any kind of business application.",
"LandingWebsite":"Landing Website",
"LandingWebsiteExplanation":"A generic landing/public website that can be used for several purposes, like introducing your company, selling your products, etc.",
"MasteringAbpFrameworkEBookDescription":"Included within your ABP Commercial license",
"Volo.AbpIo.Domain:070000":"The organization name can only contain latin letters, numbers, dots and hyphens!",
"Volo.AbpIo.Domain:070001":"The company name can only contain latin letters, numbers, dots, space and hyphens!",
"FullName":"Full Name",
"LicenseTypeNotCorrect":"The license type is not correct!",
"Trainings":"Trainings",
@ -502,12 +498,38 @@
"ForMoreInformationClickHere":"For more information, click <a href='{0}'>here.</a>",
"IsGetOnboardingTraining":"Would you like to get onboarding & web application development training?",
"OnboardingWebApplicationDevelopmentTrainingMessage":"To schedule your training calendar, please contact {0} after creating the organization",
"CustomPurchaseMessage":"For the next step, click {0} to contact us.",
"Note":"Note",
"AdditionalNote":"Additional Note",
"OnboardingTrainingFaqTitle":"Do you have ABP onboarding training?",
"OnboardingTrainingFaqExplanation":"Yes, we have ABP Training Services to help you get your ABP project started fast. You will learn about ABP from an ABP core team member and you will get the skills to begin your ABP project. In the onboarding training, we will explain how to set up your development environment, install the required tools, create a fully functional CRUD page. The training will be live and the Zoom application will be used, and we are open to using other online meeting platforms. The language of the training will be English. You can also ask your questions about ABP during the sessions. A convenient time and date will be planned for both parties. To get more information, contact us at <a href=\"mailto:info@abp.io\">info@abp.io</a>.",
"AddBasket":"Add to Basket",
"SendTrainingRequest":"Send Training Request",
"OnlyEnglishVersionOfThisDocumentIsTheRecentAndValid":"* The English version of this document is the most up-to-date and the English version will prevail in any dispute."
"OnlyEnglishVersionOfThisDocumentIsTheRecentAndValid":"* The English version of this document is the most up-to-date and the English version will prevail in any dispute.",
"Pricing_Page_Title":"Plans & Pricing",
"Pricing_Page_Description":"Choose the features and functionality your business needs today. Buy an ABP Commercial license and create unlimited projects.",
"Pricing_Page_HurryUp":"Hurry Up!",
"Pricing_Page_BuyLicense":"Buy a license at <strong>2021 prices</strong> until January 16!",
"Pricing_Page_ValidForExistingCustomers":"Also valid for existing customers and license renewals.",
"Pricing_Page_Hint1":"The license price includes a certain number of developer seats. If you have more developers, you can always purchase additional seats.",
"Pricing_Page_Hint2":"You can purchase more developer licenses now or in the future. Licenses are seat based, so you can transfer a seat from a developer to another.",
"Pricing_Page_Hint3":"You can develop unlimited count of different products with your license.",
"Pricing_Page_Hint4":"ABP Suite is a tool to assist your development to improve your productivity. It supports generating CRUD pages and creating new projects.",
"Pricing_Page_Hint5":"You can use all the pre-built modules in your applications.",
"Pricing_Page_Hint6":"You can use all the pre-built themes in your applications.",
"Pricing_Page_Hint7":"A startup template is a Visual Studio solution to make you jump-start to your project. All fundamental modules are added and pre-configured for you.",
"Pricing_Page_Hint8":"Mastering ABP Framework e-book explains how to implement .NET solutions with best practices. It is sold on Amazon.com and you can download the book for free within your license.",
"Pricing_Page_Hint9":"You can download the source-code of any module. You may want to add the source code to your solution to make radical changes or just keep it for yourself for security reasons.",
"Pricing_Page_Hint10":"Licenses are for lifetime. That means you can continue to develop your application forever. Accessing to the latest version and getting support are granted within the license period (1 year unless you renew it).",
"Pricing_Page_Hint11":"No restrictions on deployment! You can deploy to as many servers as you want, including the cloud services or on-premises.",
"Pricing_Page_Hint12":"You can update the modules, themes and tools to the latest version within your active license period. After your license expires, you need to renew it, to continue to get updates for bug fixes, new features and enhancements.",
"Pricing_Page_Hint13":"You can get the premium support for one year (you can renew your license to extend it).",
"Pricing_Page_Hint14":"Team and Business licenses have incident/question count limit. If you buy additional developer licenses, your incident limit increases by {0} (for the Team License) or {1} (for the Business License) per developer.",
"Pricing_Page_Hint15":"Only Enterprise License includes private support. You can send e-mail directly to the ABP Team or ask questions on support.abp.io with private ticket option. The private tickets are not visible to the public.",
"Pricing_Page_Hint16":"You can download the source-code of all ABP themes. You may want to add the source code to your solution to make radical changes or just keep it for yourself for security reasons.",
"Pricing_Page_Testimonial_1":"ABP Commercial allowed SC Ventures to deliver a bank-grade multi-tenant silo-database SaaS platform in 9 months to support the accounts receivable / accounts payable supply chain financing of significant value invoices from multiple integrated anchors. The modularity of ABP made it possible for the team to deliver in record time, pass all VAPT, and deploy the containerized micro-services stack via full CI/CD and pipelines into production.",
"Pricing_Page_Testimonial_2":"We are seeing the value of using ABP Commercial to reduce the overhead of custom development projects. And the team is able to unify the code pattern in different project streams. We see more potential in the framework for us to build new features faster than before. We trust we will be constantly seeing the value of leveraging ABP Commercial.",
"Pricing_Page_Testimonial_3":"We love ABP. We don't have to write everything from scratch. We start from out-of-the-box features and just focus on what we really need to write. Also, ABP is well-architected and the code is high quality with fewer bugs. If we would have to write everything we needed on our own, we might have to spend years. Once more things we like is that the new version, or issue fixing, or improvement come out very soon every other week. We don't wait too long.",
"Pricing_Page_Testimonial_4":"ABP Commercial is a fantastic product would recommend. Commercial products to market for our customers in a single configurable platform. The jump start that the framework and tooling provide any team is worth every cent. ABP Commercial was the best fit for our needs."
@ -23,8 +23,8 @@ One common advise to start a new solution is **always to start with a monolith**
However, developing such a well-modular application can be a problem since it is **hard to keep modules isolated** from each other as you would do it for microservices (see [Stefan Tilkov's article](https://martinfowler.com/articles/dont-start-monolith.html) about that). Microservice architecture naturally forces you to develop well isolated services, but in a modular monolithic application it's easy to tight couple modules to each other and design **weak module boundaries** and API contracts.
ABP can help you in that point by offerring a **microservice-compatible, strict module architecture** where your module is splitted into multiple layers/projects and developed in its own VS solution completely isolated and independent from other modules. Such a developed module is a natural microservice yet it can be easily plugged-in a monolithic application. See the [module development best practice guide](Best-Practices/Index.md) that offers a **microservice-first module design**. All [standard ABP modules](https://github.com/abpframework/abp/tree/master/modules) are developed based on this guide. So, you can use these modules by embedding into your monolithic solution or deploy them separately and use via remote APIs. They can share a single database or can have their own database based on your simple configuration.
ABP can help you in that point by offering a **microservice-compatible, strict module architecture** where your module is split into multiple layers/projects and developed in its own VS solution completely isolated and independent from other modules. Such a developed module is a natural microservice yet it can be easily plugged-in a monolithic application. See the [module development best practice guide](Best-Practices/Index.md) that offers a **microservice-first module design**. All [standard ABP modules](https://github.com/abpframework/abp/tree/master/modules) are developed based on this guide. So, you can use these modules by embedding into your monolithic solution or deploy them separately and use via remote APIs. They can share a single database or can have their own database based on your simple configuration.
## Microservice Demo Solution
## Microservice Demo Solution: eShopOnAbp
The [sample microservice solution](Samples/Microservice-Demo.md) demonstrates a complete microservice solution based on the ABP framework.
The [eShopOnAbp project](https://github.com/abpframework/eShopOnAbp) demonstrates a complete microservice solution based on the ABP framework.
Here, a list of official samples built with the ABP Framework. Most of these samples are located under the [abpframework/abp-samples](https://github.com/abpframework/abp-samples) GitHub repository.
### Microservice Demo
## eShopOnAbp
A complete solution to demonstrate how to build systems based on the microservice architecture.
Reference microservice solution built with the ABP Framework and .NET.
* [The complete documentation for this sample](Microservice-Demo.md)
A simple CRUD application to show basic principles of developing an application with the ABP Framework. The same sample was implemented with different technologies:
@ -28,7 +32,7 @@ A simple CRUD application to show basic principles of developing an application
While there is no Razor Pages & MongoDB combination, you can check both documents to understand it since DB & UI selection don't effect each other.
### Other Samples
## Other Samples
* **Event Organizer**: A sample application to create events (meetups) and allow others to register the events. Developed using EF Core and Blazor UI.
> This solution is no longer maintained. See [the eShopOnAbp project](https://github.com/abpframework/eShopOnAbp) for the replacement solution.
*"Microservices are a software development technique—a variant of the **service-oriented architecture** (SOA) architectural style that structures an application as a collection of **loosely coupled services**. In a microservices architecture, services are **fine-grained** and the protocols are **lightweight**. The benefit of decomposing an application into different smaller services is that it improves **modularity**. This makes the application easier to understand, develop, test, and become more resilient to architecture erosion. It **parallelizes development** by enabling small autonomous teams to **develop, deploy and scale** their respective services independently. It also allows the architecture of an individual service to emerge through **continuous refactoring**. Microservices-based architectures enable **continuous delivery and deployment**."*
@ -13,7 +13,7 @@ This document explains **the solution structure** and projects in details. If yo
You can use the [ABP CLI](../CLI.md) to create a new project using this startup template. Alternatively, you can directly create & download from the [Get Started](https://abp.io/get-started) page. CLI approach is used here.
First, install the ABP CLI if you haven't installed before:
First, install the ABP CLI if you haven't installed it before:
````bash
dotnet tool install -g Volo.Abp.Cli
@ -25,8 +25,8 @@ Then use the `abp new` command in an empty folder to create a new solution:
abp new Acme.BookStore -t app
````
* `Acme.BookStore` is the solution name, like *YourCompany.YourProduct*. You can use single level, two-levels or three-levels naming.
* This example specified the template name (`-t` or `--template` option). However, `app` is already the default template if you don't specify it.
* `Acme.BookStore` is the solution name, like *YourCompany.YourProduct*. You can use single-level, two-level or three-level naming.
* This example specified the template name (`-t` or `--template` option). However, `app` is already the default template if you didn't specify it.
### Specify the UI Framework
@ -36,7 +36,7 @@ This template provides multiple UI frameworks:
* `blazor`: Blazor UI
* `angular`: Angular UI
Use `-u` or `--ui` option to specify the UI framework:
Use the `-u` or `--ui` option to specify the UI framework:
````bash
abp new Acme.BookStore -u angular
@ -61,7 +61,7 @@ This template supports the following mobile application frameworks:
- `react-native`: React Native
Use `-m` (or `--mobile`) option to specify the mobile application framework:
Use the `-m` (or `--mobile`) option to specify the mobile application framework:
````bash
abp new Acme.BookStore -m react-native
@ -75,7 +75,7 @@ Based on the options you've specified, you will get a slightly different solutio
### Default Structure
If you don't specify any additional option, you will have a solution like shown below:
If you don't specify any additional options, you will have a solution as shown below:
@ -93,7 +93,7 @@ This project contains constants, enums and other objects these are actually a pa
A `BookType` enum and a `BookConsts` class (which may have some constant fields for the `Book` entity, like `MaxNameLength`) are good candidates for this project.
* This project has no dependency to other projects in the solution. All other projects depend on this directly or indirectly.
* This project has no dependency on other projects in the solution. All other projects depend on this one directly or indirectly.
#### .Domain Project
@ -105,7 +105,7 @@ A `Book` entity, a `BookManager` domain service and an `IBookRepository` interfa
#### .Application.Contracts Project
This project mainly contains [application service](../Application-Services.md) **interfaces** and [Data Transfer Objects](../Data-Transfer-Objects.md) (DTO) of the application layer. It does exists to separate interface & implementation of the application layer. In this way, the interface project can be shared to the clients as a contract package.
This project mainly contains [application service](../Application-Services.md) **interfaces** and [Data Transfer Objects](../Data-Transfer-Objects.md) (DTO) of the application layer. It exists to separate the interface & implementation of the application layer. In this way, the interface project can be shared to the clients as a contract package.
An `IBookAppService` interface and a `BookCreationDto` class are good candidates for this project.
@ -130,7 +130,7 @@ This is the integration project for the EF Core. It defines the `DbContext` and
#### .DbMigrator Project
This is a console application which simplifies to execute database migrations on development and production environments. When you run this application, it;
This is a console application that simplifies the execution of database migrations on development and production environments. When you run this application, it:
* Creates the database if necessary.
* Applies the pending database migrations.
@ -140,24 +140,24 @@ This is a console application which simplifies to execute database migrations on
Especially, seeding initial data is important at this point. ABP has a modular data seed infrastructure. See [its documentation](../Data-Seeding.md) for more about the data seeding.
While creating database & applying migrations seems only necessary for relational databases, this projects comes even if you choose a NoSQL database provider (like MongoDB). In that case, it still seeds initial data which is necessary for the application.
While creating database & applying migrations seem only necessary for relational databases, this project comes even if you choose a NoSQL database provider (like MongoDB). In that case, it still seeds the initial data which is necessary for the application.
* Depends on the `.EntityFrameworkCore` project (for EF Core) since it needs to access to the migrations.
* Depends on the `.Application.Contracts` project to be able to access permission definitions, because initial data seeder grants all permissions for the admin role by default.
* Depends on the `.Application.Contracts` project to be able to access permission definitions, because the initial data seeder grants all permissions to the admin role by default.
#### .HttpApi Project
This project is used to define your API Controllers.
Most of time you don't need to manually define API Controllers since ABP's [Auto API Controllers](../API/Auto-API-Controllers.md) feature creates them automagically based on your application layer. However, in case of you need to write API controllers, this is the best place to do it.
Most of the time you don't need to manually define API Controllers since ABP's [Auto API Controllers](../API/Auto-API-Controllers.md) feature creates them automagically based on your application layer. However, in case of you need to write API controllers, this is the best place to do it.
* Depends on the `.Application.Contracts` project to be able to inject the application service interfaces.
#### .HttpApi.Client Project
This is a project that defines C# client proxies to use the HTTP APIs of the solution. You can share this library to 3rd-party clients, so they can easily consume your HTTP APIs in their Dotnet applications (For other type of applications, they can still use your APIs, either manually or using a tool in their own platform)
This is a project that defines C# client proxies to use the HTTP APIs of the solution. You can share this library to 3rd-party clients, so they can easily consume your HTTP APIs in their Dotnet applications (For other types of applications, they can still use your APIs, either manually or using a tool in their own platform)
Most of time you don't need to manually create C# client proxies, thanks to ABP's [Dynamic C# API Clients](../API/Dynamic-CSharp-API-Clients.md) feature.
Most of the time you don't need to manually create C# client proxies, thanks to ABP's [Dynamic C# API Clients](../API/Dynamic-CSharp-API-Clients.md) feature.
`.HttpApi.Client.ConsoleTestApp` project is a console application created to demonstrate the usage of the client proxies.
@ -169,17 +169,17 @@ Most of time you don't need to manually create C# client proxies, thanks to ABP'
This project contains the User Interface (UI) of the application if you are using ASP.NET Core MVC UI. It contains Razor pages, JavaScript files, CSS files, images and so on...
This project contains the main `appsettings.json` file that contains the connection string and other configuration of the application.
This project contains the main `appsettings.json` file that contains the connection string and other configurations of the application.
* Depends on the `.HttpApi` since UI layer needs to use APIs and application service interfaces of the solution.
* Depends on the `.HttpApi`project since the UI layer needs to use APIs and the application service interfaces of the solution.
> If you check the source code of the `.Web.csproj` file, you will see the references to the `.Application` and the `.EntityFrameworkCore` projects.
>
> These references are actually not needed while coding your UI layer, because UI layer normally doesn't depend on the EF Core or the Application layer's implementation. This startup templates are ready for the tiered deployment, where API layer is hosted in a separate server than the UI layer.
> These references are actually not needed while coding your UI layer, because the UI layer normally doesn't depend on the EF Core or the Application layer's implementation. These startup templates are ready for tiered deployment, where the API layer is hosted on a separate server than the UI layer.
>
> However, if you don't choose the `--tiered` option, these references will be in the .Web project to be able to host the Web, API and application layers in a single application endpoint.
>
> This gives you to ability to use domain entities & repositories in your presentation layer. However, this is considered as a bad practice according to the DDD.
> This gives you the ability to use domain entities & repositories in your presentation layer. However, this is considered as a bad practice according to DDD.
#### Test Projects
@ -195,32 +195,32 @@ In addition, `.HttpApi.Client.ConsoleTestApp` is a console application (not an a
Test projects are prepared for integration testing;
* It is fully integrated to ABP framework and all services in your application.
* It is fully integrated into the ABP framework and all services in your application.
* It uses SQLite in-memory database for EF Core. For MongoDB, it uses the [Mongo2Go](https://github.com/Mongo2Go/Mongo2Go) library.
* Authorization is disabled, so any application service can be easily used in tests.
You can still create unit tests for your classes which will be harder to write (because you will need to prepare mock/fake objects), but faster to run (because it only tests a single class and skips all initialization process).
You can still create unit tests for your classes which will be harder to write (because you will need to prepare mock/fake objects), but faster to run (because it only tests a single class and skips all the initialization processes).
#### How to Run?
Set `.Web` as the startup project and run the application. Default username is `admin` and password is `1q2w3E*`.
Set `.Web` as the startup project and run the application. The default username is `admin` and the password is `1q2w3E*`.
See [Getting Started With the ASP.NET Core MVC Template](../Getting-Started-AspNetCore-MVC-Template.md) for more information.
### Tiered Structure
If you have selected the ASP.NET Core UI and specified the `--tiered` option, the solution created will be a tiered solution. The purpose of the tiered structure is to be able to **deploy Web application and HTTP API to different servers**:
If you have selected the ASP.NET Core UI and specified the `--tiered` option, the solution created will be a tiered solution. The purpose of the tiered structure is to be able to **deploy Web applications and HTTP API to different servers**:
* Browser runs your UI by executing HTML, CSS & JavaScript.
* Web servers hosts static UI files (CSS, JavaScript, image... etc.) & dynamic components (e.g. Razor pages). It performs HTTP requests to the API server to execute the business logic of the application.
* API Server hosts the HTTP APIs which then use application & domain layers of the application to perform the business logic.
* Web servers host static UI files (CSS, JavaScript, image... etc.) & dynamic components (e.g. Razor pages). It performs HTTP requests to the API server to execute the business logic of the application.
* The API Server hosts the HTTP APIs which then use the application & domain layers of the application to perform the business logic.
* Finally, database server hosts your database.
So, the resulting solution allows a 4-tiered deployment, by comparing to 3-tiered deployment of the default structure explained before.
> Unless you actually need to such a 4-tiered deployment, its suggested to go with the default structure which is simpler to develop, deploy and maintain.
> Unless you actually need such a 4-tiered deployment, it's suggested to go with the default structure which is simpler to develop, deploy and maintain.
The solution structure is shown below:
@ -246,17 +246,17 @@ This project is an application that hosts the API of the solution. It has its ow
Just like the default structure, this project contains the User Interface (UI) of the application. It contains razor pages, JavaScript files, style files, images and so on...
This project contains an `appsettings.json` file, but this time it does not have a connection string because it never connects to the database. Instead, it mainly contains endpoint of the remote API server and the authentication server.
This project contains an `appsettings.json` file, but this time it does not have a connection string because it never connects to the database. Instead, it mainly contains the endpoint of the remote API server and the authentication server.
#### Pre-requirements
* [Redis](https://redis.io/): The applications use Redis as as distributed cache. So, you need to have Redis installed & running.
* [Redis](https://redis.io/): The applications use Redis as a distributed cache. So, you need to have Redis installed & running.
#### How to Run?
You should run the application with the given order:
* First, run the `.IdentityServer` since other applications depends on it.
* First, run the `.IdentityServer` since other applications depend on it.
* Then run the `.HttpApi.Host` since it is used by the `.Web` application.
* Finally, you can run the `.Web` project and login to the application (using `admin` as the username and `1q2w3E*` as the password).
`AppModule` is the root module of the application. Some of ABP modules and some essential modules imported to the`AppModule`.
`AppModule` is the root module of the application. Some of the ABP modules and some essential modules are imported to `AppModule`.
ABP Config modules also have imported to `AppModule`for initially requirements of lazy-loadable ABP modules.
ABP Config modules have also been imported to `AppModule` for initial requirements of the lazy-loadable ABP modules.
#### AppRoutingModule
@ -315,22 +315,22 @@ You should add `routes` property in the `data` object to add a link on the menu
```
In the above example;
* If the user is not logged in, AuthGuard blocks access and redirects to the login page.
* PermissionGuard checks the user's permission with `requiredPolicy` property of the `rotues` 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 `routes` object is the menu link icon class.
* `requiredPolicy` property of `routes` object is the required policy key to access the page.
* PermissionGuard checks the user's permission with the `requiredPolicy` property of the `routes` object. If the user is not authorized to access the page, the 403 page appears.
* The `name` property of `routes` is the menu link label. A localization key can be defined.
* The `iconClass` property of the`routes` object is the menu link icon class.
* The `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.
#### Shared Module
The modules that may be required for all modules have imported to the `SharedModule`. You should import the`SharedModule` to all modules.
The modules that may be required for all modules have been imported to the `SharedModule`. You should import `SharedModule` to all modules.
See the [Sharing Modules](https://angular.io/guide/sharing-ngmodules) document.
#### Environments
The files under the `src/environments` folder has the essential configuration of the application.
The files under the `src/environments` folder have the essential configuration of the application.
#### Home Module
@ -338,11 +338,11 @@ Home module is an example lazy-loadable module that loads on the root address of
#### Styles
The required style files added to `styles` array in the`angular.json`. `AppComponent` loads some style files lazily via `LazyLoadService` after the main bundle is loaded to shorten the first rendering time.
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.
#### Testing
You should create your tests in the same folder as the file file you want to test.
You should create your tests in the same folder as the file you want to test.
See the [testing document](https://angular.io/guide/testing).
@ -356,7 +356,7 @@ See the [testing document](https://angular.io/guide/testing).
### React Native
if `-m react-native` option is spesified in new project command, the solution includes the [React Native](https://reactnative.dev/) application in the `react-native` folder.
If the `-m react-native` option is specified in the new project command, the solution includes the [React Native](https://reactnative.dev/) application in the `react-native` folder.
The server-side is similar to the solution described above. `*.HttpApi.Host` project serves the API, so the React Native application consumes it.
@ -366,17 +366,17 @@ React Native application folder structure as like below:
* `App.js` is bootstrap component of the application.
* `Environment.js` file has the essential configuration of the application. `prod` and `dev` configurations defined in this file.
* `App.js` is the bootstrap component of the application.
* `Environment.js` file has the essential configuration of the application. `prod` and `dev` configurations are defined in this file.
* [Contexts](https://reactjs.org/docs/context.html) are created in the `src/contexts` folder.
* [Higher order components](https://reactjs.org/docs/higher-order-components.html) are created in the`src/hocs` folder.
* [Custom hooks](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) are created in the`src/hooks`.
* [Higher order components](https://reactjs.org/docs/higher-order-components.html) are created in the`src/hocs` folder.
* [Custom hooks](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) are created in `src/hooks`.
* [Axios interceptors](https://github.com/axios/axios#interceptors) are created in the `src/interceptors` folder.
* Utility functions are exported from `src/utils` folder.
#### Components
Components that can be used on all screens are created in the `src/components` folder. All components have created as a function that able to use [hooks](https://reactjs.org/docs/hooks-intro.html).
Components that can be used on all screens are created in the `src/components` folder. All components have been created as a function that is able to use [hooks](https://reactjs.org/docs/hooks-intro.html).
#### Screens
@ -388,13 +388,13 @@ Each screen is used in a navigator in the `src/navigators` folder.
#### Navigation
[React Navigation](https://reactnavigation.org/) is used as a navigation library. Navigators are created in the `src/navigators`. A [drawer](https://reactnavigation.org/docs/drawer-based-navigation/) navigator and several [stack](https://reactnavigation.org/docs/hello-react-navigation/#installing-the-stack-navigator-library) navigators have created in this folder. See the [above diagram](#screens) for navigation structure.
[React Navigation](https://reactnavigation.org/) is used as a navigation library. Navigators are created in the `src/navigators`. A [drawer](https://reactnavigation.org/docs/drawer-based-navigation/) navigator and several [stack](https://reactnavigation.org/docs/hello-react-navigation/#installing-the-stack-navigator-library) navigators have been created in this folder. See the [above diagram](#screens) for the navigation structure.
#### State Management
[Redux](https://redux.js.org/) is used as state management library. [Redux Toolkit](https://redux-toolkit.js.org/) library is used as a toolset for efficient Redux development.
[Redux](https://redux.js.org/) is used as a state management library. [Redux Toolkit](https://redux-toolkit.js.org/) library is used as a toolset for efficient Redux development.
Actions, reducers, sagas, selectors are created in the `src/store` folder. Store folder as like below:
Actions, reducers, sagas and selectors are created in the `src/store` folder. Store folder is as below:
@ -18,9 +18,10 @@ LeptonX Lite has implementation for the ABP Framework Blazor WebAssembly & Blazo
{{if UI == "Blazor"}}
- Complete the [MVC Razor Pages Installation](mvc.md#installation) for the **HttpApi.Host** application first. _If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as **HttpApi.Host** and if identity server is separated, install to the **IdentityServer**_.
- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme** package to your **Blazor WebAssembly** application.
- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme** package to your **Blazor WebAssembly** application with the following command:
- Remove **Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme** reference from the project since it's not necessary after switching to LeptonX Lite.
- Complete the [MVC Razor Pages Installation](mvc.md#installation) first. _If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as **HttpApi.Host** and **IdentityServer**_.
- Add **Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme** package to your **Blazor server** application.
- Add **Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme** package to your **Blazor server** application with the following command:
You may want to block a part of the UI and show a spinner for a while; the `LoadingDirective` directive makes this for you. `LoadingDirective` has been exposed by the `@abp/ng.theme.shared` package.
## Getting Started
In order to use the `LoadingDirective` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this:
```js
// ...
import { ThemeSharedModule } from '@abp/ng.theme.shared';
@NgModule({
//...
imports: [..., ThemeSharedModule],
})
export class MyFeatureModule {}
```
## Usage
The `LoadingDirective` is easy to use. The directive's selector is **`abpLoading`**. By adding the `abpLoading` attribute to an HTML element, you can activate the `LoadingDirectiveective` for the HTML element when the value is true.
See an example usage:
```html
<div[abpLoading]="true">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur,
corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum
cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
# ASP.NET Core MVC / Razor Pages UI: JavaScript Global Features API
`abp.globalFeatures` API allows you to get the enabled features of the [Global Features](../../../Global-Features.md) in the client side.
> This document only explains the JavaScript API. See the [Global Features](../../../Global-Features.md) document to understand the ABP Global Features system.
@ -122,9 +122,13 @@ The empty layout provides an empty page. It typically includes the following par
## Implementing a Theme
### The Easy Way
### The Easiest Way
The easiest way to create a new theme is to copy the [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic) and customize it. Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic` NuGet package and reference to the local project.
The easiest way of creating a new theme is adding [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) module with source codes and customizing it.
The [application startup template](../../Startup-Templates/Application.md) is properly configured to use OpenId Connect to authenticate the user through the server side login form;
````json
//[doc-params]
{
"UI": ["Blazor", "BlazorServer"]
}
````
The [application startup template](../../Startup-Templates/Application.md) is properly configured to use OpenId Connect to authenticate the user;
{{if UI == "BlazorServer"}}
The Blazor Server application UI is actually a hybrid application that is combined with the MVC UI, and uses the login page provided by the MVC UI. When users enter a page that requires login, they are redirected to the `/Account/Login` page. Once they complete the login process, they are returned back to the application's UI. The login page also contains features like registration, password recovery, etc.
{{end}}
{{if UI == "Blazor"}}
* When the Blazor application needs to authenticate, it is redirected to the server side.
* Users can enter username & password to login if they already have an account. If not, they can use the register form to create a new user. They can also use forgot password and other features. The server side uses IdentityServer4 to handle the authentication.
* Users can enter username & password to login if they already have an account. If not, they can use the register form to create a new user. They can also use forgot password and other features.,
* Finally, they are redirected back to the Blazor application to complete the login process.
This is a typical and recommended approach to implement authentication in Single-Page Applications. The client side configuration is done in the startup template, so you can change it.
See the [Blazor Security document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security) to understand and customize the authentication process.
See the [Blazor Security document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security) to understand and customize the authentication process.
The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/). You can take the Basic Theme as the **base theme** and build your own theme or styling on top of it. See the *Customization* section.
> If you are looking for a professional, enterprise ready theme, you can check the [Lepton Theme](https://commercial.abp.io/themes), which is a part of the [ABP Commercial](https://commercial.abp.io/).
@ -10,16 +17,46 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist
**This theme is already installed** when you create a new solution using the [startup templates](../../Startup-Templates/Index.md). If you need to manually install it, follow the steps below:
{{if UI == "Blazor"}}
* Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) NuGet package to your web project.
* Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project.
* Use `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic.App` as the root component of your application in the `ConfigureServices` method of your module:
````csharp
var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
`#ApplicationContainer` is a selector (like `<div id="ApplicationContainer">Loading...</div>`) in the `index.html`.
* Execute `abp bundle` command under blazor project once.
{{end}}
{{if UI == "BlazorServer"}}
* Make sure [AspNetCore Basic Theme](../AspNetCore/Basic-Theme.md) installation steps are completed.
* Install the [Volo.Abp.AspNetCore.Components.Server.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.BasicTheme) NuGet package to your web project.
* Add `AbpAspNetCoreComponentsServerBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project.
* Perform following changes in `Pages/_Host.cshtml` file
Or, you can download the [source code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements.
Or, you can download the source code of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements.
This document explains how to override the user interface of a depended [application module](../../Modules/Index.md) or [theme](Theming.md) for Blazor applications.
## Overriding a Razor Component
@ -26,9 +33,16 @@ The next step is to create a razor component, like `MyBranding.razor`, in your a
The content of the `MyBranding.razor` is shown below:
@ -39,7 +53,7 @@ The content of the `MyBranding.razor` is shown below:
Let's explain the code:
* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic` namespace).
* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the {{if UI == "BlazorServer"}}`Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic`{{end}} {{if UI == "Blazor"}}`Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic`{{end}} namespace).
* `@attribute [ExposeServices(typeof(Branding))]` registers this service (component) to [dependency injection](../../Dependency-Injection.md) for the `Branding` service (component).
* `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component).
* The rest of the code is related the content and styling of the component.
@ -57,7 +71,12 @@ If you prefer to use code-behind file for the C# code of your component, you can
Blazor, by default, shows a yellow line at the bottom of the page if any unhandled exception occurs. However, this is not useful in a real application.
ABP provides an automatic error handling system for the Blazor UI.
@ -20,6 +27,8 @@ There are different type of `Exception` classes handled differently by the ABP F
**Example**
{{if UI == "BlazorServer"}}
````csharp
@page "/"
@using Volo.Abp
@ -28,13 +37,6 @@ There are different type of `Exception` classes handled differently by the ABP F
@code
{
//for Blazor WASM
private void TestException()
{
throw new UserFriendlyException("A user friendly error message!");
}
//for Blazor Server
private async Task TestException()
{
try
@ -49,6 +51,26 @@ There are different type of `Exception` classes handled differently by the ABP F
}
````
{{end}}
{{if UI == "Blazor"}}
````csharp
@page "/"
@using Volo.Abp
<ButtonClicked="TestException">Throw test exception</Button>
@code
{
private void TestException()
{
throw new UserFriendlyException("A user friendly error message!");
}
}
````
{{end}}
ABP automatically handle the exception and show an error message to the user:
ABP Framework provides a complete **UI Theming** system with the following goals:
@ -16,17 +23,28 @@ In order to accomplish these goals, ABP Framework;
### Current Themes
Currently, two themes are **officially provided**:
Currently, three themes are **officially provided**:
* The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**.
* The [Lepton Theme](https://commercial.abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP Commercial](https://commercial.abp.io/) license.
* The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has a [commercial](https://docs.abp.io/en/commercial/latest/themes/lepton-x/commercial/blazor) and a [lite](../../Themes/LeptonXLite/blazor.md) version.
## Overall
### The Base Libraries
{{if UI == "Blazor"}}
All the themes must depend on the [Volo.Abp.AspNetCore.Components.WebAssembly.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.Theming) NuGet package, so they are indirectly depending on the following libraries:
{{end}}
{{if UI == "BlazorServer"}}
All the themes must depend on the [Volo.Abp.AspNetCore.Components.Server.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.Theming) NuGet package, so they are indirectly depending on the following libraries:
{{end}}
* [Twitter Bootstrap](https://getbootstrap.com/) as the fundamental HTML/CSS framework.
* [Blazorise](https://github.com/stsrki/Blazorise) as a component library that supports the Bootstrap and adds extra components like Data Grid and Tree.
* [FontAwesome](https://fontawesome.com/) as the fundamental CSS font library.
@ -61,9 +79,21 @@ The application layout typically includes the following parts;
A theme is simply a Razor Class Library.
### The Easy Way
### The Easiest Way
The easiest way to create a new theme is to copy the [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) and customize it. Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` NuGet package and reference to the local project.
The easiest way of creating a new theme is adding [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) module with source codes and customizing it.
Language Selection toolbar item is generally a dropdown that is used to switch between languages. `ILanguageProvider` is used to get the list of available languages and `CultureInfo.CurrentUICulture` is used to learn the current language.
{{if UI == "Blazor"}}
Local Storage is used to get and set the current language with the `Abp.SelectedLanguage` key.
**Example: Get the currently selected language**
@ -192,6 +225,31 @@ The theme should reload the page after changing the language:
User menu includes links related to the user account. `IMenuManager` is used just like the Main Menu, but this time with `StandardMenus.User` parameter like shown below:
"DefaultErrorMessage401Detail":"برای انجام این عملیات باید وارد سیستم شوید.",
"DefaultErrorMessage403":"شما مجاز نیستید!",
"DefaultErrorMessage403Detail":"شما مجاز به انجام این عمل نیستید!",
"DefaultErrorMessage404":"منبع پیدا نشد!",
"DefaultErrorMessage404Detail":"منبع درخواست شده در سرور یافت نشد!",
"EntityNotFoundErrorMessage":"هیچ موجودیتی : {0} با شناسه = {1} وجود ندارد!",
"AbpDbConcurrencyErrorMessage":"دادههایی که ارسال کردهاید قبلاً توسط کاربر/مشتری دیگر تغییر کرده است. لطفاً تغییراتی را که انجام دادهاید کنار بگذارید و از ابتدا تلاش کنید.",
"Error":"خطا",
"UnhandledException":"خطای کنترل نشده",
"401Message":"غیرمجاز",
"403Message":"ممنوع",
"404Message":"صفحه یافت نشد",
"500Message":"خطای سرور داخلی",
"403MessageDetail":"شما مجاز به انجام این عملیات نیستید!",
"404MessageDetail":"با عرض پوزش، چیزی در این آدرس وجود ندارد."
malik masis
4 years ago
