diff --git a/docs/en/get-started/images/abp-studio-created-new-solution.png b/docs/en/get-started/images/abp-studio-created-new-solution.png index 4a7d4f0b01..c089c276f6 100644 Binary files a/docs/en/get-started/images/abp-studio-created-new-solution.png and b/docs/en/get-started/images/abp-studio-created-new-solution.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-additional-options-microservice.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-additional-options-microservice.png index 87bd86755c..9f9df8991f 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-additional-options-microservice.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-additional-options-microservice.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-additional-options.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-additional-options.png new file mode 100644 index 0000000000..4a2d3c2dd2 Binary files /dev/null and b/docs/en/get-started/images/abp-studio-new-solution-dialog-additional-options.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-efcore.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-efcore.png index e71cbb7036..e9a5bcee19 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-efcore.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-efcore.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-mongo.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-mongo.png index f0b0ed136b..4b00156e3f 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-mongo.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-configurations-mongo.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-efcore.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-efcore.png index 6f8e937b09..138d1904f5 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-efcore.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-efcore.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-mongo.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-mongo.png index a1175b81bf..1e3f54a9d8 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-mongo.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-database-provider-mongo.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework-microservice.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework-microservice.png index b7ccfb2976..7e43e784f3 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework-microservice.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework-microservice.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework.png index 20b89c059d..f773d887d8 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-mobile-framework.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-optional-modules.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-optional-modules.png new file mode 100644 index 0000000000..992760e3fc Binary files /dev/null and b/docs/en/get-started/images/abp-studio-new-solution-dialog-optional-modules.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-public-website.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-public-website.png new file mode 100644 index 0000000000..e10d4a965c Binary files /dev/null and b/docs/en/get-started/images/abp-studio-new-solution-dialog-public-website.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-properties.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-properties.png index 93b3154e7c..7412b4b6e1 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-properties.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-properties.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-structure.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-structure.png index 3cdd22f555..310488c1bc 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-structure.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-solution-structure.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-framework.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-framework.png index 228c711a1a..d373a55344 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-framework.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-framework.png differ diff --git a/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-theme.png b/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-theme.png index d17d1d766d..8594f02d58 100644 Binary files a/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-theme.png and b/docs/en/get-started/images/abp-studio-new-solution-dialog-ui-theme.png differ diff --git a/docs/en/get-started/images/abp-studio-quick-start-application-solution-runner.png b/docs/en/get-started/images/abp-studio-quick-start-application-solution-runner.png index 2e4a9aa583..f5ca4c97e7 100644 Binary files a/docs/en/get-started/images/abp-studio-quick-start-application-solution-runner.png and b/docs/en/get-started/images/abp-studio-quick-start-application-solution-runner.png differ diff --git a/docs/en/get-started/images/abp-studio-quick-start-browse-command.png b/docs/en/get-started/images/abp-studio-quick-start-browse-command.png index 186ff2d55d..c97b3c9700 100644 Binary files a/docs/en/get-started/images/abp-studio-quick-start-browse-command.png and b/docs/en/get-started/images/abp-studio-quick-start-browse-command.png differ diff --git a/docs/en/get-started/images/abp-studio-quick-start-browse.png b/docs/en/get-started/images/abp-studio-quick-start-browse.png index d63c20c8ac..47b4bf29cf 100644 Binary files a/docs/en/get-started/images/abp-studio-quick-start-browse.png and b/docs/en/get-started/images/abp-studio-quick-start-browse.png differ diff --git a/docs/en/get-started/images/abp-studio-quick-start-example-applications-in-solution-runner.png b/docs/en/get-started/images/abp-studio-quick-start-example-applications-in-solution-runner.png index 46adf8bfc0..44cef603fb 100644 Binary files a/docs/en/get-started/images/abp-studio-quick-start-example-applications-in-solution-runner.png and b/docs/en/get-started/images/abp-studio-quick-start-example-applications-in-solution-runner.png differ diff --git a/docs/en/get-started/images/solution-runner-public-website.png b/docs/en/get-started/images/solution-runner-public-website.png index a00368ee79..b1e76a4ce6 100644 Binary files a/docs/en/get-started/images/solution-runner-public-website.png and b/docs/en/get-started/images/solution-runner-public-website.png differ diff --git a/docs/en/get-started/layered-web-application.md b/docs/en/get-started/layered-web-application.md index e1c00fd336..0b051b9681 100644 --- a/docs/en/get-started/layered-web-application.md +++ b/docs/en/get-started/layered-web-application.md @@ -77,17 +77,25 @@ LeptonX is the suggested UI theme that is proper for production usage. Select on 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. -Pick the one best for you, or select the *None* if you don't want a mobile application in your solution, then click Next to navigate to the *Additional UI options* screen: +Pick the one best for you, or select the *None* if you don't want a mobile application in your solution, then click Next to navigate to the *Public website* screen: -![abp-studio-new-solution-dialog-additional-ui-options](images/abp-studio-new-solution-dialog-additional-ui-options.png) +![abp-studio-new-solution-dialog-public-website](images/abp-studio-new-solution-dialog-public-website.png) That startup solution template also provides an option to create a second web application inside the solution. The second application is called the Public website, an ASP.NET Core MVC / Razor Page application. It can be used to create a public landing/promotion for your product. It is well integrated into the solution (can share the same services, entities, database, and the same authentication logic, for example). If you want, you can also include the [CMS Kit module](../modules/cms-kit) to your solution to add dynamic content features to your web application. -So, either select the *Public website* or skip it and click the Next button for the *Solution Structure* selection: +So, either select the *Public website* or skip it and click the Next button for the *Optional Modules* selection: + +![abp-studio-new-solution-dialog-optional-modules.png](images/abp-studio-new-solution-dialog-optional-modules.png) + +Each item in that list is a pre-built application module. You can click the blue icon near to the module name to get more information about the module. You can leave the list as is (so, it installs the most common and used modules for you) or customize based on your preference. + +Installing a module after creating the solution may require manual steps. So, it is better to decide the modules in the beginning. You can create an example solutions before your real solution to explore the solution and modules. + +Once you select the desired modules, click the *Next* button for the *Solution Structure* screen: ![abp-studio-new-solution-dialog-solution-structure](images/abp-studio-new-solution-dialog-solution-structure.png) -The *Tiered* option is used to physically separate the web application (the UI part) from the backend HTTP APIs. It creates a separate host application that only serves the HTTP (REST) APIs. The web application then performs remote HTTP calls to that application for every operation. If the *Tiered* option is not selected, then the web and HTTP APIs are hosted in a single application, and the calls from the UI layer to the API layer are performed in-process. +It creates a separate host application that only serves the HTTP (REST) APIs. The web application then performs remote HTTP calls to that application for every operation. If the *Tiered* option is not selected, then the web and HTTP APIs are hosted in a single application, and the calls from the UI layer to the API layer are performed in-process. The tiered architecture allows you to host the web (UI) application in a server that can not access to your database server. However, it brings a slight loss of performance (because of the HTTP calls between UI and HTTP API applications) and makes your architecture, development, and deployment more complex. If you don't understand the tiered structure, just skip it. @@ -107,9 +115,13 @@ On that screen, you can decide on your database provider by selecting one of the ![abp-studio-new-solution-dialog-database-configurations](images/abp-studio-new-solution-dialog-database-configurations-mongo.png) {{ end }} -Here, you can select the database management systems (DBMS){{ if DB == "EF" }} and the connection string{{ end }}. Now, we are ready to allow ABP Studio to create our solution. Just click the *Create* button and let the ABP Studio do the rest for you. +Here, you can select the database management systems (DBMS){{ if DB == "EF" }} and the connection string{{ end }}. Click *Next* button to see the *Additional Options*. + +![abp-studio-new-solution-dialog-additional-options](images/abp-studio-new-solution-dialog-additional-options.png) + +If you uncheck the *Kubernetes Configuration* option, the solution will not include the Kubernetes configuration files, such as Helm charts and other Kubernetes-related files. You can also specify *Social Logins*; if you uncheck this option, the solution will not be configured for social login. -After clicking the Create button, the dialog is closed and your solution is loaded into ABP Studio: +Now, we are ready to allow ABP Studio to create our solution. Just click the *Create* button and let the ABP Studio do the rest for you. After clicking the Create button, the dialog is closed and your solution is loaded into ABP Studio: ![abp-studio-created-new-solution](images/abp-studio-created-new-solution.png) @@ -129,7 +141,7 @@ Open the [Solution Runner](../studio/running-applications.md) section on the lef Once you click the *Play* icon on the left side, the section is open in the same place as the Solution Explorer section. ABP Studio also opens the *Application Monitor* view on the main content area. *Application Monitor* shows useful insights for your applications (e.g. *HTTP Request*, *Events* and *Exceptions*) in real-time. You can use it to see the happenings in your applications, so you can easily track errors and many helpful details. -In the Solution Runner section (on the left side) you can see all the runnable applications in the current solution. For the MVC with public website example, we have three applications: +In the Solution Runner section (on the left side) you can see all the runnable applications in the current solution. For the MVC with public website and MAUI mobile example, we have four applications: ![abp-studio-quick-start-example-applications-in-solution-runner](images/abp-studio-quick-start-example-applications-in-solution-runner.png) @@ -230,4 +242,4 @@ Before starting the mobile application, ensure that you configure it for [react- > For example in non-tiered MVC with public website application: -![solution-runner-public-website](images/solution-runner-public-website.png) +![solution-runner-public-website](images/solution-runner-public-website.png) \ No newline at end of file diff --git a/docs/en/get-started/microservice.md b/docs/en/get-started/microservice.md index 82db8dcc62..47f1091b14 100644 --- a/docs/en/get-started/microservice.md +++ b/docs/en/get-started/microservice.md @@ -71,7 +71,7 @@ Click the Next button to see *Additional Options* selection: ![abp-studio-new-solution-dialog-additional-options](images/abp-studio-new-solution-dialog-additional-options-microservice.png) -If you unchecked the *Kubernetes Configuration* option, the solution will not include the Kubernetes configuration files which include the Helm charts and other Kubernetes related files. +If you unchecked the *Kubernetes Configuration* option, the solution will not include the Kubernetes configuration files which include the Helm charts and other Kubernetes related files. You can also specify *Social Logins*; if you uncheck this option, the solution will not be configured for social login. Now, we are ready to allow ABP Studio to create our solution. Just click the *Create* button and let the ABP Studio do the rest for you. After clicking the Create button, the dialog is closed and your solution is loaded into ABP Studio: diff --git a/docs/en/images/issuemanagement-module-solution.png b/docs/en/images/issuemanagement-module-solution.png index 3e01ff1b92..b224045596 100644 Binary files a/docs/en/images/issuemanagement-module-solution.png and b/docs/en/images/issuemanagement-module-solution.png differ diff --git a/docs/en/solution-templates/application-module/index.md b/docs/en/solution-templates/application-module/index.md index f8e2d7adb6..60f53a7018 100644 --- a/docs/en/solution-templates/application-module/index.md +++ b/docs/en/solution-templates/application-module/index.md @@ -15,17 +15,25 @@ dotnet tool install -g Volo.Abp.Studio.Cli Then use the `abp new` command in an empty folder to create a new solution: ```bash -abp new Acme.IssueManagement -t module +abp new-module Acme.BookStore ``` - `Acme.IssueManagement` is the solution name, like *YourCompany.YourProduct*. You can use single level, two-levels or three-levels naming. -### Without User Interface +### Specifying the User Interface -The template comes with MVC, Blazor & Angular user interfaces by default. You can use `--no-ui` option to not include any of these UI layers. +The template comes without a user interface by default. You can use the `mvc`, `blazor`, `blazor-server`, or `angular` options to include any of these UI layers. You can also combine them. For example, you can use `mvc,angular` to include both MVC and Angular UI. To create a module without a user interface, don't specify any value. ````bash -abp new Acme.IssueManagement -t module --no-ui +abp new-module Acme.IssueManagement -u mvc,angular +```` + +#### Specifying the Database Provider + +The template comes with the *EntityFrameworkCore* database provider by default. You can use the `ef` or `mongodb` options to include either of these providers. You can also combine them. For example, you can use `ef,mongodb` to include both EntityFrameworkCore and MongoDB. + +````bash +abp new-module Acme.IssueManagement -d ef,mongodb ```` ## Solution Structure @@ -34,11 +42,10 @@ Based on the options you've specified, you will get a slightly different solutio ![issuemanagement-module-solution](../../images/issuemanagement-module-solution.png) -Projects are organized as `src`, `test` and `host` folders: +Projects are organized as `src` and`test` folders: * `src` folder contains the actual module which is layered based on [DDD](../../framework/architecture/domain-driven-design) principles. * `test` folder contains unit & integration tests. -* `host` folder contains applications with different configurations to demonstrate how to host the module in an application. These are not a part of the module, but useful on development. The diagram below shows the layers & project dependencies of the module: @@ -105,8 +112,6 @@ The solution has multiple test projects, one for each layer: - `.MongoDB.Tests` is used to test MongoDB configuration and custom repositories. - `.TestBase` is a base (shared) project for all tests. -In addition, `.HttpApi.Client.ConsoleTestApp` is a console application (not an automated test project) which demonstrate the usage of HTTP APIs from a Dotnet application. - Test projects are prepared for integration testing; - It is fully integrated to ABP and all services in your application. @@ -117,49 +122,9 @@ You can still create unit tests for your classes which will be harder to write ( > Domain & Application tests are using EF Core. If you remove EF Core integration or you want to use MongoDB for testing these layers, you should manually change project references & module dependencies. -### Host Projects - -The solution has a few host applications to run your module. Host applications are used to run your module in a fully configured application. It is useful on development. Host applications includes some other modules in addition to the module being developed: - -Host applications support two types of scenarios. - -#### Single (Unified) Application Scenario - -If your module has a UI, then `.Web.Unified` application is used to host the UI and API on a single point. It has its own `appsettings.json` file (that includes the database connection string) and EF Core database migrations. - -For the `.Web.Unified` application, there is a single database, named `YourProjectName_Unified` (like *IssueManagement_Unified* for this sample). - -> If you've selected the `--no-ui` option, this project will not be in your solution. - -##### How to Run? - -Set `host/YourProjectName.Web.Unified` as the startup project, run `Update-Database` command for the EF Core from Package Manager Console and run your application. Default username is `admin` and password is `1q2w3E*`. - -#### Separated Deployment & Databases Scenario - -In this scenario, there are three applications; - -* `.AuthServer` application is an authentication server used by other applications. It has its own `appsettings.json` that contains database connection and other configurations. -* `.HttpApi.Host` hosts the HTTP API of the module. It has its own `appsettings.json` that contains database connections and other configurations. -* `.Web.Host` host the UI of the module. This project contains an `appsettings.json` file, but 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. - -The diagram below shows the relation of the applications: - -![tiered-solution-applications](../../images/tiered-solution-applications.png) - -`.Web.Host` project uses OpenId Connect Authentication to get identity and access tokens for the current user from the `.AuthServer`. Then uses the access token to call the `.HttpApi.Host`. HTTP API server uses bearer token authentication to obtain claims from the access token to authorize the current user. - -##### Pre-requirements - -* [Redis](https://redis.io/): The applications use Redis as as distributed cache. So, you need to have Redis installed & running. - -##### How to Run? - -You should run the application with the given order: +### Host Project -- First, run the `.AuthServer` since other applications depends on it. -- Then run the `.HttpApi.Host` since it is used by the `.Web.Host` application. -- Finally, you can run the `.Web.Host` project and login to the application using `admin` as the username and `1q2w3E*` as the password. +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. ## UI @@ -172,7 +137,7 @@ The solution will have a folder called `angular` in it. This is where the Angula * _angular/projects/issue-management_ folder contains the Angular module project. * _angular/projects/dev-app_ folder contains a development application that runs your module. -The server-side is similar to the solution described above. `*.HttpApi.Host` project serves the API and the `Angular` demo application consumes it. You will not need to run the `.Web.Host` project though. +The server-side is similar to the solution described above. After you create a *Host* application, the API and the `Angular` demo application consume it. #### How to Run the Angular Development App @@ -195,9 +160,10 @@ The module you will develop depends on two of these ABP packages: _@abp/ng.core_ Once all dependencies are installed, follow the steps below to serve your development app: -1. Make sure `.AuthServer` and `*.HttpApi.Host` projects are up and running. -2. Open your terminal at the root folder, i.e. `angular`. -3. Run `yarn start` or `npm start`. +1. Make sure *Host* application project is up and running. +2. Change the `environment.ts` file in the `angular/projects/dev-app/src/environments` folder to match your *Host* application URL. +3. Open your terminal at the root folder, i.e. `angular`. +4. Run `yarn start` or `npm start`. ![ABP Angular module dev-app project](../../images/angular-module-dev-app-project.png)