Add other ui options for microservice tutorial

docs/en/tutorials/microservice/index.md

@@ -1,5 +1,13 @@
 # Microservice Development Tutorial
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {

docs/en/tutorials/microservice/part-01.md

@@ -1,5 +1,13 @@
 # Microservice Tutorial Part 01: Creating the Initial Solution
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -13,9 +21,27 @@
 Follow the *[Get Started](../../get-started/microservice.md)* guide to create a new layered web application with the following configurations:
 
 * **Solution name**: `CloudCrm`
+{{if DB == "EF"}}
 * **Database Provider**: Entity Framework Core
-* **Database Management System**: SQL Server
+{{end}}
+{{if DB == "Mongo"}}
+* **Database Provider**: MongoDB
+{{end}}
+{{if UI == "MVC"}}
 * **UI Framework**: MVC / Razor Pages
+{{end}}
+{{if UI == "Blazor"}}
+* **UI Framework**: Blazor WebAssembly
+{{end}}
+{{if UI == "BlazorServer"}}
+* **UI Framework**: Blazor Server
+{{end}}
+{{if UI == "BlazorWebApp"}}
+* **UI Framework**: Blazor Web App
+{{end}}
+{{if UI == "NG"}}
+* **UI Framework**: Angular
+{{end}}
 * **Mobile framework**: None
 * **Public website**: Selected
 
@@ -25,8 +51,20 @@ You can select the other options based on your preference.
 
 The initial solution structure should be like the following in ABP Studio's *[Solution Explorer](../../studio/solution-explorer.md)*:
 
+{{if UI == "MVC"}}
+
 ![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution.png)
 
+{{else if UI == "NG"}}
+
+![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng.png)
+
+{{else}}
+
+![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor.png)
+
+{{end}}
+
 > ABP Studio will perform a few additional steps after creating your solution. **Please wait until all the background tasks are completed** before going further.
 
 Initially you see three folders (`apps`, `gateways` and `services`) and ~10 ABP Studio modules (depends on your preferences while creating the solution) under the `CloudCrm` ABP Studio solution. Some of these modules represent microservices, some of them represent web applications and some others represent API gateways in our system.

docs/en/tutorials/microservice/part-02.md

@@ -1,5 +1,13 @@
 # Microservice Tutorial Part 02: Creating the initial Catalog service
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -32,18 +40,34 @@ When you click the *Next* button, you are redirected to the database provider se
 
 Here, you can select the database provider to be used by the new microservice:
 
+{{if DB == "Mongo"}}
+
+![abp-studio-add-new-microservice-dialog-database-step-mongo](images/abp-studio-add-new-microservice-dialog-database-step-mongo.png)
+
+Select *MongoDB* option and proceed the *Next* step.
+{{end}}
+
+{{if DB == "EF"}}
+
 ![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step.png)
 
 Select *Entity Framework Core* option and proceed the *Next* step.
 
+{{end}}
+
 ### Integrating to the Solution
 
 In this step, we can select the options for integrating the new microservice to the rest of the solution components:
 
+{{if UI == "NG"}}
+![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step_angular.png)
+{{else}}
 ![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step.png)
+{{end}}
 
 ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.
 
+
 **Ensure the options are configured the same as in the preceding figure**, and click the *Next* button.
 
 ### Additional Options
@@ -62,8 +86,20 @@ In this section, we will investigate the new microservice in overall.
 
 The new microservice is added under the `services` folder in the `CloudCrm` ABP Studio solution:
 
+{{if UI == "MVC"}}
+
 ![abp-studio-new-catalog-service-in-solution-explorer](images/abp-studio-new-catalog-service-in-solution-explorer.png)
 
+{{else if UI == "NG"}}
+
+![abp-studio-new-catalog-service-in-solution-explorer-ng](images/abp-studio-new-catalog-service-in-solution-explorer-ng.png)
+
+{{else}}
+
+![abp-studio-new-catalog-service-in-solution-explorer-blazor](images/abp-studio-new-catalog-service-in-solution-explorer-blazor.png)
+
+{{end}}
+
 The new microservice has its own separate .NET solution that includes three packages (.NET projects):
 
 * `CloudCrm.CatalogService` is the main project that you will implement your service. It typically contains your [entities](../../framework/architecture/domain-driven-design/entities.md), [repositories](../../framework/architecture/domain-driven-design/repositories.md), [application services](../../framework/architecture/domain-driven-design/application-services.md), API controllers, etc.
@@ -88,8 +124,20 @@ You can run the solution using ABP Studio's *Solution Runner*. It will also run
 
 Click the *Play* button near to the solution root:
 
+{{if UI == "MVC"}}
+
 ![abp-studio-solution-runner-play-all](images/abp-studio-solution-runner-play-all.png)
 
+{{else if UI == "NG"}}
+
+![abp-studio-solution-runner-play-all-ng](images/abp-studio-solution-runner-play-all-ng.png)
+
+{{else}}
+
+![abp-studio-solution-runner-play-all-blazor](images/abp-studio-solution-runner-play-all-blazor.png)
+
+{{end}}
+
 ### Browsing the Catalog Service
 
 Once all of the applications have started, right-click the Catalog service and select the *Browse* command:
@@ -98,8 +146,20 @@ Once all of the applications have started, right-click the Catalog service and s
 
 It will open the built-in browser and you will see the Swagger UI for the Catalog service:
 
+{{if UI == "MVC"}}
+
 ![abp-studio-browser-catalog-service-swagger-ui](images/abp-studio-browser-catalog-service-swagger-ui.png)
 
+{{else if UI == "NG"}}
+
+![abp-studio-browser-catalog-service-swagger-ui-ng](images/abp-studio-browser-catalog-service-swagger-ui-ng.png)
+
+{{else}}
+
+![abp-studio-browser-catalog-service-swagger-ui-blazor](images/abp-studio-browser-catalog-service-swagger-ui-blazor.png)
+
+{{end}}
+
 You can test the APIs on the Swagger UI to see if the new microservice is properly working.
 
 ### Opening the Catalog Database

docs/en/tutorials/microservice/part-03.md

@@ -1,5 +1,13 @@
 # Microservice Tutorial Part 03: Building the Catalog service
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -34,8 +42,20 @@ The `CloudCrm` microservice solution contains more than one .NET solution. Typic
 
 Select the `CloudCrm.CatalogService` module and click the *OK* button. It will open ABP Suite as shown below:
 
+{{if UI == "MVC"}}
+
 ![abp-studio-abp-suite-inside](images/abp-studio-abp-suite-inside.png)
 
+{{else if UI == "NG"}}
+
+![abp-studio-abp-suite-inside-ng](images/abp-studio-abp-suite-inside-ng.png)
+
+{{else if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}}
+
+![abp-studio-abp-suite-inside-blazor](images/abp-studio-abp-suite-inside-blazor.png)
+
+{{end }}
+
 ## Generating a Products Page
 
 In the next section, we will use ABP Suite to create a fully functional CRUD page with ABP Suite. The UI part will be in the main web application (`CloudCrm.Web`) and the application service and other parts will be generated in the Catalog microservice.
@@ -71,27 +91,56 @@ That's all. You can click the *Save and generate* button to start the code gener
 
 ABP Suite will generate the necessary code for you. It will take some time to complete the process. After the process is completed, you will see a success message, click the *OK* button.
 
+{{if UI == "MVC"}}
+
 ![abp-studio-catalog-service-build-and-start](images/abp-studio-catalog-service-start.png)
 
+{{else if UI == "NG"}}
+
+![abp-studio-catalog-service-build-and-start](images/abp-studio-catalog-service-start-ng.png)
+
+{{else if UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}}
+
+![abp-studio-catalog-service-build-and-start](images/abp-studio-catalog-service-start-blazor.png)
+
+{{end}}
+
 We can now start the `CloudCrm.CatalogService` application by clicking the *Start* button (or alternatively, directly clicking the *run* icon) in the *Solution Runner* panel.
 
 ![abp-studio-browse-catalog-service-2](images/abp-studio-browse-catalog-service-2.png)
 
 After the application is started, you can right-click and [Browse](../../studio/running-applications.md#monitoring) on the `CloudCrm.CatalogService` application to open it in the ABP Studio's pre-integrated browser. You can see the *Products* controller in the Swagger UI.
 
+{{if UI == "NG"}}
+### Generating the UI Proxy
+
+ABP Suite automatically generates the UI proxy for the `Angular` project. If you want to create manually, run this command under the `Angular` project folder:
+
+```bash
+abp generate-proxy -t ng -m catalog -u http://localhost:44384 --target catalog-service
+```
+
+For more information, please refer to the [Service Proxies](https://abp.io/docs/latest/framework/ui/angular/service-proxies) documentation.
+{{end}}
+
+{{if UI == "MVC" || UI == "Blazor" || UI == "BlazorServer" || UI == "BlazorWebApp"}}
 ### Generating the UI Proxy
 
-Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the *Web* project. Right-click the *CloudCrm.Web* [package](../../studio/concepts.md#package) and select the *ABP CLI* -> *Generate Proxy* -> *C#* command:
+Now, we need to generate the [Static API Proxy](../../framework/api-development/static-csharp-clients.md) for the *Web* project. Right-click the {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor` {{end}} [package](../../studio/concepts.md#package) and select the *ABP CLI* -> *Generate Proxy* -> *C#* command:
 
+{{if UI == "MVC"}}
 ![abp-studio-generate-proxy](images/abp-studio-generate-proxy.png)
+{{else}}
+![abp-studio-generate-proxy-blazor](images/abp-studio-generate-proxy-blazor.png)
+{{end}}
 
-It will open the *Generate C# Proxies* window. Select the `CloudCrm.CatalogService` application, and it will automatically populate the *URL* field. Select the *catalog* module, set the service type to *application*, and check the *Without contracts* checkbox, as the `CloudCrm.Web` project already depends on the `CloudCrm.CatalogService.Contracts` package:
+It will open the *Generate C# Proxies* window. Select the `CloudCrm.CatalogService` application, and it will automatically populate the *URL* field. Select the *catalog* module, set the service type to *application*, and check the *Without contracts* checkbox, as the {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor` {{end}}  project already depends on the `CloudCrm.CatalogService.Contracts` package:
 
 ![abp-studio-generate-proxy-window](images/abp-studio-generate-proxy-window.png)
 
 > To be able to select the *Application*, you must *Start* the related application beforehand. You can start the application using [Solution Runner](../../studio/running-applications.md) as explained in the previous parts.
 
-Lastly, we need to configure the use of a static HTTP client for the `CatalogService` in the `CloudCrm.Web` project. Open the `CloudCrmWebModule.cs` file in the `Web` project and add the following line to the `ConfigureServices` method:
+Lastly, we need to configure the use of a static HTTP client for the `CatalogService` in the {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor` {{end}} project. Open the {{if UI == "MVC"}} `CloudCrmWebModule.cs` {{else}} `CloudCrmBlazorModule` {{end}} file in the {{if UI == "MVC"}} `Web` {{else}} `Blazor` {{end}}project and add the following line to the `ConfigureServices` method:
 
 ```csharp
 //...
@@ -104,14 +153,15 @@ public override void ConfigureServices(ServiceConfigurationContext context)
       typeof(CloudCrmCatalogServiceContractsModule).Assembly);
 }
 ```
+{{end}}
 
 ### Running the Application
 
 Now, stop any application running in the *Solution Runner* panel, and then run the applications by clicking the *Start All* button on the root item in the *Solution Runner* panel:
 
 ![abp-studio-run-build-and-start-all](images/abp-studio-run-start-all.png)
 
-After the application is started, you can right-click and [Browse](../../studio/running-applications.md#monitoring) on the `CloudCrm.Web` application to open it in the ABP Studio's pre-integrated browser:
+After the application is started, you can right-click and [Browse](../../studio/running-applications.md#monitoring) on the {{if UI == "MVC"}} `CloudCrm.Web` {{else}} `CloudCrm.Blazor` {{end}} application to open it in the ABP Studio's pre-integrated browser:
 
 ![abp-studio-browse-cloud-crm-products](images/abp-studio-browse-cloud-crm-products.png)
 

docs/en/tutorials/microservice/part-04.md

@@ -1,5 +1,13 @@
 # Microservice Tutorial Part 04: Creating the initial Ordering service
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -34,13 +42,22 @@ Here, you can select the database provider to be used by the new microservice:
 
 ![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step.png)
 
+{{if DB == "Mongo"}}
+Select *MongoDB* option and proceed the *Next* step.
+{{end}}
+{{if DB == "EF"}}
 Select *Entity Framework Core* option and proceed the *Next* step.
+{{end}}
 
 ### Integrating to the Solution
 
 In this step, we can select the options for integrating the new microservice to the rest of the solution components:
 
+{{if UI == "NG"}}
+![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step_angular.png)
+{{else}}
 ![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step.png)
+{{end}}
 
 ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.