Merge branch 'dev' into net9

abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/en.json

@@ -578,7 +578,7 @@
     "CreatePostCoverInfo1": "<i class='bi bi-dot'></i> Accepted file types : <strong>JPEG, JPG, PNG</strong>",
     "CreatePostCoverInfo2": "<i class='bi bi-dot'></i> Max file size : <strong>1 MB</strong>",
     "CreatePostCoverInfo3": "<i class='bi bi-dot'></i> Image proportion : <strong>16:9</strong>",
-    "CreatePostCoverInfo4": "<i class='bi bi-dot'></i> <a href='https://abp.io/assets/example-post-image.png'> Download a sample cover image </a>",
+    "CreatePostCoverInfo4": "<i class='bi bi-dot'></i> <a href='/assets/example-post-image.png' download> Download a sample cover image </a>",
     "ThisExtensionIsNotAllowed": "This extension is not allowed.",
     "TheFileIsTooLarge": "The file is too large.",
     "GoToThePost": "Go to the Post",
@@ -977,6 +977,8 @@
     "UISupportExplanation": "ABP Framework itself is UI framework agnostic and can work with any UI framework. However, startup templates, module UIs and themes were not implemented for all UI frameworks. Check out the <a href=\"{0}\">Getting Started document</a> for the up-to-date list of UI options.",
     "MicroserviceSupport": "Does it support the microservice architecture?",
     "WhereCanIDownloadSourceCode": "Where can I download the source-code?",
+    "HowCanIUpgradeMyProjectToCommercialTemplate": "How can I upgrade my open-source project to the commercial PRO templates?",
+    "HowCanIUpgradeMyProjectToCommercialExplanation": "You can check out our documentation at <a href=\"{0}\">Migrating from open source templates</a> to upgrade your open-source projects to the paid PRO templates.",
     "ComputerLimitation": "How many computers can a developer login when developing ABP?",
     "ComputerLimitationExplanation": "We specifically permit <strong>{0} computers</strong> per individual/licensed developer. Whenever there is a need for a developer to develop ABP based products on a third machine, an e-mail should be sent to license@abp.io explaining the situation, and we will then make the appropriate allocation in our system.",
     "RefundPolicy": "Do you have a refund policy?",

docs/en/Community-Articles/2024-09-18-Blazor-9-New-Features/post.md

@@ -0,0 +1,149 @@
+# ASP.NET Core Blazor 9.0 New Features Summary 🆕
+
+In this article, I'll highlight .NET 9's Blazor updates and important features for ASP.NET Core 9.0. These features are based on the latest .NET 9 Preview 7. 
+
+![Cover](cover.png)
+
+## .NET MAUI Blazor Hybrid App and Web App solution template
+
+There's a new solution template to create .**NET MAUI native** and **Blazor web client** apps. This new template allows to choose a Blazor interactive render mode, it uses a shared Razor class library to maintain the UI's Razor components.
+
+For more info:
+
+* [learn.microsoft.com > maui blazor web app tutorial](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)
+* [reddit.com/r/Blazor/comments/1dabyzk/net_8_blazor_hybrid_maui_app_web_hosting/](https://www.reddit.com/r/Blazor/comments/1dabyzk/net_8_blazor_hybrid_maui_app_web_hosting/)
+
+
+
+## A new middleware: `MapStaticAssets` 
+
+This new middleware optimizes the delivery of static assets in any ASP.NET Core app, also for Blazor. Basically it compresses assets via [Gzip](https://datatracker.ietf.org/doc/html/rfc1952), [fingerprints](https://developer.mozilla.org/docs/Glossary/Fingerprinting) for all assets at build time with a Base64 and removes caches when Visual Studio Hot Reload (development time) is in action.
+
+For more info:
+
+* [learn.microsoft.com > optimizing static web assets](https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-9.0?view=aspnetcore-8.0#optimizing-static-web-asset-delivery)
+* [learn.microsoft.com > fundamentals of static files](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-9.0#static-asset-middleware)
+
+
+
+##  Simplifying the process of querying component states at runtime
+
+1. Finding the component's current execution location: This can be especially helpful for component performance optimization and debugging. 
+2. Verifying whether the component is operating in a dynamic environment by checking: This can be useful for parts whose actions vary according to how their surroundings interact.
+3. Obtaining the render mode allocated to the component: Comprehending the render mode can aid in enhancing the rendering procedure and augmenting the component's general efficiency.
+
+For more info:
+
+* [learn.microsoft.com > detect rendering location interactivity & render mode runtime](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#detect-rendering-location-interactivity-and-assigned-render-mode-at-runtime)
+
+
+
+## Detecting component's location, interactivity support and render mode
+
+The `ComponentBase.RendererInfo` and `ComponentBase.AssignedRenderMode`  now allows to detect the following actions:
+
+* `RendererInfo.Name` returns the location where the component is executing
+* `RendererInfo.IsInteractive` indicates if the component supports interactivity at the time of rendering. 
+* `ComponentBase.AssignedRenderMode` exposes the component's assigned render mode
+
+
+
+## Better server-side reconnection 
+
+* When the previous app is disconnected and the user navigates to this app, or browser put this app in sleep mode, Blazor runs reconnection mechanism.
+
+* When reconnection is not successful because your server killed connection, it automatically makes a full page refresh.
+
+* With the new below config, you can adjust your reconnection retry time:
+
+  * ```csharp
+    Blazor.start({
+      circuit: {
+        reconnectionOptions: {
+          retryIntervalMilliseconds: (previousAttempts, maxRetries) => 
+            previousAttempts >= maxRetries ? null : previousAttempts * 1000
+        },
+      },
+    });
+    ```
+
+
+
+## Simple serialization for authentication
+
+The new APIs in ASP.NET make it easier to add authentication to existing Blazor Web Apps. These APIs, now part of the Blazor Web App project template, allow authentication state to be serialized on the server and deserialized in the browser, simplifying the process of integrating authentication. This removes the need for developers to manually implement or copy complex code, especially when using WebAssembly-based interactivity.
+
+For more info:
+
+- [learn.microsoft.com > blazor Identity UI individual accounts](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/server/?view=aspnetcore-9.0#blazor-identity-ui-individual-accounts)
+- [learn.microsoft.com > manage authentication state](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/server/?view=aspnetcore-9.0#manage-authentication-state-in-blazor-web-apps)
+
+
+
+## Easily add static server-side rendering pages
+
+With .NET 9, adding static server-side rendering (SSR) pages to globally interactive Blazor Web Apps has become simpler. The new `[ExcludeFromInteractiveRouting]` attribute allows developers to mark specific Razor component pages that require static SSR, such as those relying on HTTP cookies and the request/response cycle. Pages annotated with this attribute exit interactive routing and trigger a full-page reload, while non-annotated pages default to interactive rendering modes like `InteractiveServer`. This approach enables flexibility between static and interactive rendering depending on the page's requirements.
+
+For more info:
+
+* [learn.microsoft.com > render-modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#static-ssr-pages-in-a-globally-interactive-app)
+
+
+
+## Constructor Injection in Razor Components
+
+Razor components support constructor injection, allowing services like `NavigationManager` to be injected directly into a component's constructor. This can be used to manage navigation actions, such as redirecting the user upon an event like a button click.
+
+For more info:
+
+* [learn.microsoft.com> dependency-injection](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/dependency-injection?view=aspnetcore-9.0#request-a-service-in-a-component)
+
+
+
+## Configuring WebSocket Compression and Frame-Ancestors CSP in Interactive Server Components
+
+By default, Interactive Server components enable WebSocket compression and set a `frame-ancestors` Content Security Policy (CSP) to `self`, restricting embedding the app in `<iframe>`. Besides, compression can be disabled to improve security by setting `ConfigureWebSocketOptions` to null, though this may reduce performance. To prevent embedding the app in any `iframe` while maintaining WebSocket compression, set the `ContentSecurityFrameAncestorsPolicy` to 'none'.
+
+For more info:
+
+- [learn.microsoft.com > websocket compression](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-9.0#websocket-compression-for-interactive-server-components)
+- [learn.microsoft.com > interactive server-side rendering when compression enabled](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/server/interactive-server-side-rendering?view=aspnetcore-9.0#interactive-server-components-with-websocket-compression-enabled)
+
+
+
+## Tracking Composition State with `KeyboardEventArgs.IsComposing`
+
+The new `KeyboardEventArgs.IsComposing` property indicates whether a keyboard event is part of a composition session, which is essential for properly handling international character input methods.
+
+
+
+## Configuring Row Overscan in `QuickGrid` with new `OverscanCount` parameter
+
+The `QuickGrid` component now includes an `OverscanCount` property, which controls how many extra rows are rendered before and after the visible area when virtualization is enabled. By default, `OverscanCount` is set to **3**, but it can be adjusted as below to **5**.
+
+```html
+<QuickGrid ItemsProvider="itemsProvider" Virtualize="true" OverscanCount="5">...</QuickGrid>
+```
+
+
+
+## Range Input Support in `InputNumber<TValue>` Component
+
+The `InputNumber<TValue>` component now supports the `type="range"` [attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), allowing for range inputs like sliders or dials. This feature supports model binding and form validation, offering a more interactive way to input numerical data compared to the traditional text box.
+
+```html
+<EditForm>
+     <InputNumber @bind-Value="Model.ProductCount" max="999" min="1" step="1" type="range" />
+</EditForm>
+
+@code {
+    public class MyModel
+    {
+        [Required, Range(minimum: 1, maximum: 999)]
+        public int ProductCount { get; set; }
+    }
+}
+```
+
+
+

docs/en/docs-nav.json

@@ -50,7 +50,7 @@
           "path": "tutorials"
         },
         {
-          "text": "TODO application",
+          "text": "TODO Application",
           "items": [
             {
               "text": "Overview",
@@ -67,7 +67,7 @@
           ]
         },
         {
-          "text": "Book Store application",
+          "text": "Book Store Application",
           "items": [
             {
               "text": "Overview",
@@ -115,6 +115,47 @@
             }
           ]
         },
+        {
+          "text": "Modular Monolith Application",
+          "items": [
+            {
+              "text": "Overview",
+              "path": "tutorials/modular-crm/index.md"
+            },
+            {
+              "text": "1: Creating the initial solution",
+              "path": "tutorials/modular-crm/part-01.md"
+            },
+            {
+              "text": "2: Creating the initial Products module",
+              "path": "tutorials/modular-crm/part-02.md"
+            },
+            {
+              "text": "3: Building the Products module",
+              "path": "tutorials/modular-crm/part-03.md"
+            },
+            {
+              "text": "4: Creating the initial Ordering module",
+              "path": "tutorials/modular-crm/part-04.md"
+            },
+            {
+              "text": "5: Building the Ordering module",
+              "path": "tutorials/modular-crm/part-05.md"
+            },
+            {
+              "text": "6: Integrating the modules: Implementing Integration Services",
+              "path": "tutorials/modular-crm/part-06.md"
+            },
+            {
+              "text": "7: Integrating the modules: Communication via Messages (Events)",
+              "path": "tutorials/modular-crm/part-07.md"
+            },
+            {
+              "text": "8: Integrating the modules: Joining the Products and Orders Data",
+              "path": "tutorials/modular-crm/part-08.md"
+            }
+          ]
+        },
         {
           "text": "Community Articles",
           "path": "https://abp.io/community"

docs/en/framework/architecture/best-practices/index.md

@@ -1,7 +1,5 @@
 # Module Development Best Practices & Conventions
 
-### Introduction
-
 This document describes the **best practices** and **conventions** for those who want to develop **modules** that satisfy the following specifications:
 
 * Develop modules that conform to the **Domain Driven Design** patterns & best practices.
@@ -10,7 +8,7 @@ This document describes the **best practices** and **conventions** for those who
 
 Also, this guide is mostly usable for general **application development**.
 
-### Guides
+## The Guides
 
 * Overall
   * [Module Architecture](./module-architecture.md)

docs/en/framework/ui/angular/modal.md

@@ -195,6 +195,59 @@ The modal with form looks like this:
 
 **`options`** is an input typed [NgbModalOptions](https://ng-bootstrap.github.io/#/components/modal/api#NgbModalOptions). It is configuration for the `ng-bootstrap` modal.
 
+
+**Examples:**
+
+- `animation`: This is an NgbModalOption property of type *boolean*. It controls whether the modal opens and closes with an animation. By default, it is set to true, meaning that the modal will have a smooth transition when it opens and closes. Setting it to false will disable these animations.
+
+```js
+import { Component } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-modal-options',
+  ...})
+
+export class NgbdModalOptions {
+  modalService = inject(NgbModal);
+  animationModal(content) {
+    this.modalService.open(content, { animation: true });
+  }
+}
+```
+
+       The result of this configuration would be like this:
+
+![Modal example result](./images/animation-true.gif)
+
+       On the contrary, if we set it as false:
+
+![Modal example result](./images/animation-false.gif)
+
+
+- `fullscreen`: This is an NgbModalOption property of type *boolean or string*. When set to `true`, the element will expand to cover the entire screen, hiding all other interface elements. When set to `false`, the element remains in its regular size and position within the page.
+
+```js
+import { Component } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+ selector: 'ngbd-modal-options',
+ ...})
+
+export class NgbdModalOptions {
+ modalService = inject(NgbModal);
+ fullscreenModal(content) {
+   this.modalService.open(content, { fullscreen: true });
+ }
+}
+
+```
+
+       If `fullscreen: true`:
+
+![Modal example result](./images/fullscreen-true.png)
+
 #### suppressUnsavedChangesWarning
 
 ```js

docs/en/studio/release-notes.md

@@ -2,6 +2,13 @@
 
 This document contains **brief release notes** for each ABP Studio release. Release notes only include **major features** and **visible enhancements**. Therefore, they don't include all the development done in the related version. 
 
+## 0.8.2 (2024-09-19)
+
+* Fixed WireGuard connection random port bug
+* Automated steps after microservice solution creation
+* Fixed unusable options/features for Trial License
+* Fixed blazor-server single-layer template
+
 ## 0.8.1 (2024-09-12)
 
 * Fixed MySQL connection problem for nolayers template

docs/en/studio/version-compatibility.md

@@ -4,7 +4,7 @@ This document provides an overview of the compatibility between various versions
 
 | **ABP Studio Version** | **ABP Version**           |
 |------------------------|---------------------------|
-| 0.8.1                  | 8.3.0                     |
+| 0.8.1 - 0.8.2          | 8.3.0                     |
 | 0.8.0                  | 8.2.3                     |
 | 0.7.8 - 0.7.9          | 8.2.2                     |
 | 0.7.4 to 0.7.7         | 8.2.1                     |

docs/en/tutorials/index.md

@@ -3,4 +3,5 @@
 The following guides explains how to build ABP based applications:
 
 * [TODO Application](todo/index.md): This is a single-part, quick-start tutorial to build a simple application with ABP. Start with this tutorial if you want to quickly understand how ABP works.
-* [Book Store Application](book-store/overview.md): This is a multi-part, complete tutorial to build a bookstore application with ABP. Start with this tutorial if you want to create a layered solution with ABP and apply DDD best practices.
+* [Book Store Application](book-store/index.md): This is a multi-part, complete tutorial to build a bookstore application with ABP. Start with this tutorial if you want to create a layered solution with ABP and apply DDD best practices.
+* [Modular Monolith Application](modular-crm/index.md): This is a multi-part tutorial that demonstrates how to create application modules, compose and communicate them to build a monolith modular web application.

docs/en/tutorials/modular-crm/index.md

@@ -0,0 +1,36 @@
+# Modular Monolith Application Development Tutorial
+
+````json
+//[doc-nav]
+{
+  "Next": {
+    "Name": "Creating the initial solution",
+    "Path": "tutorials/modular-crm/part-01"
+  }
+}
+````
+
+ABP provides a great infrastructure and tooling to build modular software solutions. In this tutorial, you will learn how to create application modules, compose and communicate them to build a monolith modular web application.
+
+> **This tutorial focuses on modularity.** The example application's functionality and user interface are intentionally kept simple. If you want to learn real world, full featured application logic development with ABP, please follow the [Book Store tutorial](../book-store/index.md).
+
+## Tutorial Outline
+
+This tutorial is organized as the following parts:
+
+* [Part 01: Creating the initial solution](part-01.md)
+* [Part 02: Creating the initial Products module](part-02.md)
+* [Part 03: Building the Products module](part-03.md)
+* [Part 04: Creating the initial Ordering module](part-04.md)
+* [Part 05: Building the Ordering module](part-05.md)
+* [Part 06: Integrating the modules: Implementing Integration Services](part-06.md)
+* [Part 07: Integrating the modules: Communication via Messages (Events)](part-07.md)
+* [Part 08: Integrating the modules: Joining the Products and Orders Data](part-08.md)
+
+## Download the Source Code
+
+You can download the completed sample solution [here](https://github.com/abpframework/abp-samples/tree/master/ModularCRM).
+
+## See Also
+
+* [Book Store: Web Application Development Tutorial](../book-store/index.md)

docs/en/tutorials/modular-crm/part-01.md

@@ -0,0 +1,37 @@
+# Creating the Initial Solution
+
+````json
+//[doc-nav]
+{
+  "Next": {
+    "Name": "Creating the initial Products module",
+    "Path": "tutorials/modular-crm/part-02"
+  }
+}
+````
+
+Follow the [Get Stared](../../get-started/layered-web-application.md) guide to create a new layered web application with the following configuration:
+
+* **Solution name**: `ModularCrm`
+* **UI Framework**: ASP.NET Core MVC / Razor Pages
+* **Database Provider**: Entity Framework Core
+
+You can select the other options based on your preference.
+
+> **Please complete the [Get Stared](../../get-started/layered-web-application.md) guide and run the web application before going further.**
+
+The initial solution structure should be like the following in ABP Studio's *Solution Explorer*:
+
+![solution-explorer-modular-crm-initial](images/solution-explorer-modular-crm-initial.png)
+
+Initially, you see a `ModularCrm` solution and a `ModularCrm` module under that solution.
+
+> An ABP Studio module is typically a .NET solution and an ABP Studio solution is an umbrella concept for multiple .NET Solutions (see the [concepts](../../studio/concepts.md) document for more).
+
+`ModularCrm` module is your main application, which is a layered .NET solution that consists of several packages (.NET projects). You can expand the `ModularCrm` module to see its packages:
+
+![solution-explorer-modular-crm-expanded](images/solution-explorer-modular-crm-expanded.png)
+
+## Summary
+
+We've created the initial layered monolith solution. In the next part, we will learn how to create a new application module and install it to the main application.

docs/en/tutorials/modular-crm/part-02.md

@@ -0,0 +1,138 @@
+# Creating the Initial Products Module
+
+````json
+//[doc-nav]
+{
+  "Previous": {
+    "Name": "Creating the initial solution",
+    "Path": "tutorials/modular-crm/part-01"
+  },
+  "Next": {
+    "Name": "Building the Products module",
+    "Path": "tutorials/modular-crm/part-03"
+  }
+}
+````
+
+In this part, you will build a new module for product management and install it to the main CRM application.
+
+## Creating Solution Folders
+
+You can create solution folders and sub-folders in *Solution Explorer* to better organize your solution components. Right-click to the solution root on the *Solution Explorer* panel, and select *Add* -> *New Folder* command:
+
+![abp-studio-add-new-folder-command](images/abp-studio-add-new-folder-command.png)
+
+That command opens a dialog where you can set the folder name:
+
+![abp-studio-new-folder-dialog](images/abp-studio-new-folder-dialog.png)
+
+Create `main` and `modules` folder using the *New Folder* command, then move the `ModularCrm` module into the `main` folder (simply by drag & drop). The *Solution Explorer* panel should look like the following figure now:
+
+![abp-studio-solution-explorer-with-folders](images/abp-studio-solution-explorer-with-folders.png)
+
+## Creating The Module
+
+There are two module templates provided by ABP Studio:
+
+* **Empty Module**: You can use that module template to build your module structure from scratch.
+* **DDD Module**: A Domain-Driven Design based layered module structure.
+
+We will use the *DDD Module* template for the Product module. We will use the *Empty Module* template later in this tutorial.
+
+Right-click the `modules` folder on the *Solution Explorer* panel, and select the *Add* -> *New Module* -> *DDD Module* command:
+
+![abp-studio-add-new-dd-module](images/abp-studio-add-new-dd-module.png)
+
+This command opens a new dialog to define properties of the new module. You can use the following values to create a new module named `ModularCrm.Products`:
+
+![abp-studio-create-new-module-dialog](images/abp-studio-create-new-module-dialog.png)
+
+When you click the *Next* button, you are redirected to the UI selection step.
+
+### Selecting the UI Type
+
+Here, you can select the UI type you want to support in your module:
+
+![abp-studio-create-new-module-dialog-step-ui](images/abp-studio-create-new-module-dialog-step-ui.png)
+
+A module;
+
+* May not contain a UI and leaves the UI development to the final application.
+* May contain a single UI implementation that is typically in the same technology with the main application.
+* May contain more than one UI implementation if you want to create a reusable application module and you want to make that module usable by different applications with different UI technologies. For example, all of [pre-built ABP modules](https://abp.io/modules) support multiple UI options.
+
+In this tutorial, we are selecting the MVC UI since we are building that module only for our `ModularCrm` solution and we are using the MVC UI in our application. So, select the MVC UI and click the *Next* button.
+
+### Selecting the Database Provider
+
+The next step is to select the database provider (or providers) you want to support with your module:
+
+![abp-studio-create-new-module-dialog-step-db](images/abp-studio-create-new-module-dialog-step-db.png)
+
+Since our main application is using Entity Framework Core and we will use the `ModularCrm.Products` module only for that main application, we can select the *Entity Framework Core* option and click the *Create* button.
+
+### Exploring the New Module
+
+After adding the new module, the *Solution Explorer* panel should look like the following figure:
+
+![abp-studio-solution-explorer-two-modules](images/abp-studio-solution-explorer-two-modules.png)
+
+The new `ModularCrm.Products` module has been created and added to the solution. The `ModularCrm.Products` module has a separate and independent .NET solution. Right-click the `ModularCrm.Products` module and select the *Open with* -> *Explorer* command:
+
+![abp-studio-open-in-explorer](images/abp-studio-open-in-explorer.png)
+
+This command opens the solution folder in your file system:
+
+![product-module-folder](images/product-module-folder.png)
+
+You can open `ModularCrm.Products.sln` in your favorite IDE (e.g. Visual Studio):
+
+![product-module-visual-studio](images/product-module-visual-studio.png)
+
+As seen in the preceding figure, the `ModularCrm.Products` solution consists of several layers, each has own responsibility.
+
+### Installing the Product Module to the Main Application
+
+A module does not contain an executable application inside. The `Modular.Products.Web` project is just a class library project, not an executable web application. A module should be installed to an executable application in order to run it.
+
+> **Ensure that the web application is not running in [Solution Runner](../../studio/running-applications.md) or in your IDE. Installing a module to a running application will produce errors.**
+
+The product module has no relation to the main application yet. Right-click to the `ModularCrm` module (inside the `main` folder) and select the *Import Module* command:
+
+![abp-studio-import-module](images/abp-studio-import-module.png)
+
+The *Import Module* command opens a dialog as shown below:
+
+![abp-studio-import-module-dialog](images/abp-studio-import-module-dialog.png)
+
+Select the `ModularCrm.Products` module and check the *Install this module* option. If you don't check that option, it only imports the module but doesn't setup project dependencies. Importing a module without installation can be used to manually setup your project dependencies. Here, we want to make it automatically, so checking the *Install this module* option.
+
+When you click the *OK* button, ABP Studio opens the *Install Module* dialog:
+
+![abp-studio-module-installation-dialog](images/abp-studio-module-installation-dialog.png)
+
+This dialog simplifies installing a multi-layer module to a multi-layer application. It automatically determines which package of the `ModularCrm.Products` module should be installed to which package of the main application. For example, the `ModularCrm.Products.Domain` package is installed to the `ModularCrm.Domain` package. In that way, you can use domain objects ([entities](../../framework/architecture/domain-driven-design/entities.md), [repositories](../../framework/architecture/domain-driven-design/repositories.md), ...) of the products module from the domain layer of your main application.
+
+The default package match is good for this tutorial, so you can click the *OK* button to proceed.
+
+### Building the Main Application
+
+After the installation, build the entire solution by right-clicking to the `ModularCrm` module (under the `main` folder) and select the *Dotnet CLI* -> *Graph Build* command:
+
+![abp-studio-graph-build](images/abp-studio-graph-build.png)
+
+Graph Build is a dotnet CLI command that recursively build all the referenced dotnet projects even if they are not a part of the root solution.
+
+> While developing multi-module solutions with ABP Studio, you may need to perform *Graph Build* on the root/main module if you made changes in the depending modules.
+
+### Run the Main Application
+
+Open the *Solution Runner* panel, click the *Play* button (near to the solution root), right-click the `ModularCrm.Web` application and select the *Browse* command. It will open the web application in the built-in browser. Then you can navigate to the *Products* page on the main menu of the application to see the Products page that is coming from the `ModularCrm.Products` module:
+
+![abp-studio-solution-runner-initial-product-page](images/abp-studio-solution-runner-initial-product-page.png)
+
+## Summary
+
+In this part, we've created a new module to manage products in our modular application. Then we installed the new module to the main application and run the solution to test if it has successfully installed.
+
+In the next part, you will learn how to create entities, services and a basic user interface for the products module.