@ -20,21 +20,31 @@ Follow the *[Get Started](../../get-started/single-layer-web-application.md)* gu
* **UI Framework**: ASP.NET Core MVC / Razor Pages
* **Database Provider**: Entity Framework Core
You can select the other options based on your preference.
You can select the other options based on your preference but at the **Modularity** step, check the _Setup as a modular solution_ option and add a new **Standard Module** named `ModularCrm.Catalog`:
Since modularity is a key aspect of the ABP Framework, it provides an option to create a modular system from the beginning. Here, you're creating a `ModularCrm.Catalog` module and setting it as a "Standard Module" (a module template similar to the DDD module but without the domain layer). This will create four projects (-depends on the options you selected-):
- `ModularCrm.Catalog`: The main module project
- `ModularCrm.Catalog.Contracts`: Contains service interfaces and DTOs
- `ModularCrm.Catalog.Tests`: Unit and integration tests (since we selected the _Include Test_ option)
- `ModularCrm.Catalog.UI`: Contains UI components for the module
> **Note:** This tutorial will guide you through creating two modules: `Catalog` and `Ordering`. While you just created the `Catalog` module in the _Modularity_ step, you could also create the `Ordering` module at this stage. However, you'll create the `Ordering` module in subsequent parts to better demonstrate ABP Studio's module management capabilities and to simulate a more realistic development workflow where modules are typically added incrementally as the application evolves.
This approach allows you to start with a modular architecture right from the beginning, making it easier to maintain and extend the application as it grows. ABP Studio automatically creates the module projects and places them under the `modules` folder for you, and later on you can add more modules to the solution.
> **Please complete the [Get Started](../../get-started/single-layer-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](../../studio/solution-explorer.md)*:
Initially, you see a `ModularCrm` solution and a `ModularCrm` module under that solution.
Initially, you see a `ModularCrm` solution, a `ModularCrm` module under that solution (our main single layer application), and a `modules` folder that contains the `ModularCrm.Catalog` module.
> 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).
The `ModularCrm` module is the core of your application, built as a single-layer ASP.NET Core Web application. You can expand the `ModularCrm` module to see:
The `ModularCrm` module is the core of your application, built as a single-layer ASP.NET Core Web application. On the other hand, the `ModularCrm.Catalog` module is a standard module template, consist of 4 layers and used to implement the catalog features.
In this part, you will create a new product management module and install it in the main CRM application.
In this part, you will install the `ModularCrm.Catalog` module to the main application, which is created in the previous part.
## Creating Solution Folders
Before installing the `ModularCrm.Catalog` module to the main application, let's create a "main" folder and move the `ModularCrm` module to it to tidy up the solution structure. Right-click to the solution root on the *Solution Explorer* panel, and select *Add* -> *New Folder* command:
You can create solution folders and sub-folders in *Solution Explorer* to organize your solution components better. Right-click to the solution root on the *Solution Explorer* panel, and select *Add* -> *New Folder* command:
Create a `main` and a `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:
After the folder is created, now you can move the `ModularCrm` module to the `main` folder (simply by drag & drop). The _Solution Explorer_ panel should look like the following figure now:
This command opens a new dialog to define the properties of the new module. You can use the following values to create a new module named `ModularCrm.Products`:
* 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 as 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:
## Installing the Catalog Module to the Main Application
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 *Next* button.
Lastly, you can uncheck the *Include Tests* option if you don't want to include test projects in your module. Click the *Create* button to create the new module.
### Exploring the New Module
After adding the new module, the *Solution Explorer* panel should look like the following figure:
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:
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 in an executable application to run it.
A module does not contain an executable application inside. The `ModularCrm.Catalog.UI` project is just a class library project, not an executable web application. A module should be installed in an executable application 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.**
@ -108,19 +40,17 @@ The product module has yet to be related to the main application. Right-click on
The *Import Module* command opens a dialog as shown below:
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 set project dependencies. Importing a module without installation can be used to set up your project dependencies manually. We want to make it automatically, so check the *Install this module* option.
Select the `ModularCrm.Catalog` module and check the *Install this module* option. If you don't check that option, it only imports the module but doesn't set project dependencies. Importing a module without installation can be used to set up your project dependencies manually. We want to make it automatically, so check the *Install this module* option.
When you click the *OK* button, ABP Studio opens the *Install Module* dialog:
This dialog simplifies installing a multi-layer module to a single-layer application. It automatically determines which package of the `ModularCrm.Products` module should be installed to which package of the main application.
The default package match is good for this tutorial, so you can click the *OK* button to proceed.
Select the `ModularCrm.Catalog` and `ModularCrm.Catalog.UI` packages from the left area and the `ModularCrm` package from the middle area as shown in the preceding figure. Finally, click _OK_.
### Building the Main Application
## Building the Main Application
After the installation, build the entire solution by right-clicking on the `ModularCrm` module (under the `main` folder) and selecting the *Dotnet CLI* -> *Graph Build* command:
@ -132,12 +62,12 @@ Graph Build is a dotnet CLI command that recursively builds all the referenced d
### Run the Main Application
Open the *Solution Runner* panel, click the *Play* button (near to the solution root), right-click the `ModularCrm` 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:
Open the *Solution Runner* panel, click the *Play* button (near to the solution root), right-click the `ModularCrm` application and select the *Browse* command. It will open the web application in the built-in browser. Then you can navigate to the *Catalog* page on the main menu of the application to see the Catalog page that is coming from the `ModularCrm.Catalog` module:
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 this part, you installed the `ModularCrm.Catalog` 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.
In the next part, you will learn how to create entities, services and a basic user interface for the catalog module.
EngincanV
8 months ago
