Showing posts from Technology category
Guide to Add Custom Modules in ABP.IO App
Guide to Add Custom Modules in ABP.IO App If you want to extend your ABP.IO application with a custom module, like Vineforce.Test—this guide is for you. Whether you’re building a new feature or organizing your code into reusable parts, creating a custom module helps keep your application clean, scalable, and maintainable. In this guide, we’ll walk through the full integration process step by step, covering both the backend and the Angular frontend. You’ll learn how to properly register the module, configure dependencies, and connect the UI layer to your logic. By the end, you’ll have a working module that’s fully integrated into your ABP.IO solution, following best practices. No guesswork, no skipping steps—just a clear path to getting your custom module up and running. <Blockquote name="Vineforce Team"> Creating custom modules in ABP.IO helps organize features into reusable, scalable, and maintainable components while keeping the main application clean and structured. </Blockquote> Prerequisites 1. Install ABP CLI If not already installed, run the following command: ```bash dotnet tool install -g Volo.Abp.Cli ``` 2. Create the main Apb.io application with the name “Vineforce.Admin” ```bash abp new Vineforce.Admin -t app -u angular -m none --separate-auth-server --database-provider ef -csf ```  It creates the structure of backend of main abp application as follows:  3. Configure appsettings.json of the main ABP.IO Edit the appsettings.json files in the two projects below to include the correct connection strings: Projects: * Vineforce.Admin.HttpApi.Host * Vineforce.Admin.DbMigrator 4. Create the Module folder in main application as Follow the official guide to create your module: Official Guide  If you choose Angular as the UI framework (by using the -u angular option), the generated solution will include a folder named angular. This folder contains all the client-side code for the application. Example: A module named Vineforce.Test was created using the Angular UI option. 1. When you open the angular folder in an IDE, the folder structure will appear as follows:  2. And backend structure as follows:  3. Configure appsettings.json Edit the appsettings.json file in the Host projects to include correct connection strings: Projects: * Vineforce.Test.AuthServer * Vineforce.Test.HttpApi.Host * Vineforce.Test.Web.Unified ```json "ConnectionStrings": { "Default": "Server=servername;Database=Test_Main;Trusted_Connection=True;TrustServerCertificate=True", "Test": "Server=VINEFORCE-SHIVA;Database=Test_Module;Trusted_Connection=True;TrustServerCertificate=True" } ``` Make sure the server names and database details match your development environment.  4. Apply Database Update In the Package Manager Console (under the EntityFrameworkCore project), run: ```powershell Update-Database ```  5. Run the Application Set Vineforce.Test.Web.Unified as the startup project and launch the application using the default credentials: ```text Username: admin Password: 1q2w3E* ``` 6. Ensure Redis Is Running Redis is used for distributed caching. Make sure Redis is installed and running before starting the application. 7. Application Startup Order Run the following projects in order: ```text *.AuthServer or *.IdentityServer *.HttpApi.Host *.Web.Unified ``` 1. Adding a Module to the Backend of the Main Application ```bash cd C:\Users\Vineforce\source\repos\AbpAdmin ``` 2. Add All Required Projects of the module to the Main ABP.IO Solution  To include various parts of your module (such as Domain, Application, EntityFrameworkCore, and HttpApi) in the main ABP solution, run the following commands: ```bash dotnet sln add modules\vineforce.test\src\Vineforce.Test.Domain\Vineforce.Test.Domain.csproj dotnet sln add modules\vineforce.test\src\Vineforce.Test.Application\Vineforce.Test.Application.csproj dotnet sln add modules\vineforce.test\src\Vineforce.Test.EntityFrameworkCore\Vineforce.Test.EntityFrameworkCore.csproj dotnet sln add modules\vineforce.test\src\Vineforce.Test.HttpApi\Vineforce.Test.HttpApi.csproj ``` Projects are added as below:  Add Project References Using Visual Studio In the Vineforce.Admin.HttpApi.Host project: Right-click the project and select “Add” → “Project Reference”. 1. In the dialog that appears, check the following projects: * Vineforce.Test.Application * Vineforce.Test.EntityFrameworkCore * Vineforce.Test.HttpApi 2. Click OK to confirm and add the references.  3. After adding the project > reference, here you can add all module references you want.   Register Module Dependencies in AdminHttpApiHostModule.cs In AdminHttpApiHostModule.cs, update the [DependsOn(...)] attribute:  ```csharp typeof(TestHttpApiModule), typeof(TestApplicationModule), typeof(TestEntityFrameworkCoreModule), typeof(TestDomainSharedModule) ``` Also, add the necessary using statements: ```csharp using Vineforce.Test; using Vineforce.Test.EntityFrameworkCore; ```  Configure the Module in the EntityFrameworkCore Project To ensure that schema, table mappings, and other Entity Framework configurations from the module are applied in the main ABP.IO application, follow these steps: Add a Project Reference: Right-click on the Vineforce.Admin.EntityFrameworkCore project. Select Add → Project Reference. Check and add: ```text Vineforce.Test.EntityFrameworkCore ```   Update the DbContext Configuration Open AdminDbContext.cs. Inside the OnModelCreating method, add the following line to apply the module’s configuration: ```csharp builder.ConfigureTest(); ```   You can verify this by navigating to the Vineforce.Test.EntityFrameworkCore module and opening the TestDbContext class.   Apply Migrations to Update the Database Schema After completing the integration steps, you need to apply Entity Framework migrations to reflect the module’s schema changes in the database. Option 1: Using PowerShell or Terminal Open a PowerShell or terminal window. Navigate to the EntityFrameworkCore project directory of your main application, for example: ```bash cd src/Vineforce.Admin.EntityFrameworkCore ``` Run the following command to create a new migration: ```bash dotnet ef migrations add Add_Test_Module ``` Option 2: Using the Package Manager Console in Visual Studio Open the Package Manager Console (Tools → NuGet Package Manager → Package Manager Console). Set the Default Project to: ```text src\Vineforce.Admin.EntityFrameworkCore ``` Run the following command: ```powershell PM> Add-Migration Add_Test_Module ``` This will generate a new migration that includes all Entity Framework changes from the integrated module.  Then run the following command to apply the migration and update the database: ```powershell Update-Database ``` Steps to add the module application to the main ABP.IO application Step 1: Build the Angular Module Navigate to the module’s frontend directory and build the module using the Angular CLI: ```bash ng build test --configuration production ``` This command compiles the test Angular module in production mode and outputs the build artifacts to the dist folder.  Output folder: ```text C:\Users\Vineforce\source\repos\AbpAdmin\modules\Vineforce.Test\angular\dist ```  Step 2: Copy Module Output to Main App Go to your main app’s angular folder: ```text C:\Users\Vineforce\source\repos\AbpAdmin\angular ``` Create a projects folder inside it. Copy the test folder from the dist directory into projects. Final path: ```text C:\Users\Vineforce\source\repos\AbpAdmin\angular\projects\test ```   Step 3: Update App Routing Open app-routing.module.ts in the main app: ```text C:\Users\Vineforce\source\repos\AbpAdmin\angular\src\app\app-routing.module.ts ``` In app-routing.module.ts, import the module’s routing configuration and add it to the main route definitions: ```typescript { path: 'test', loadChildren: () => import('test').then(m => m.TestModule.forLazy()) } ``` Step 4: Link the Module in package.json Open the package.json file having path: ```text C:\Users\Vineforce\source\repos\AbpAdmin\angular ``` Add the following line under the “dependencies” section to link your local module: ```json "test": "file:projects/test" ```  Then install dependencies: ```bash npm install ``` You can now see the Test Module API controller in the Swagger UI of the main application.  You can now log in to the main application.  The Test module now appears in the main application. You can add, edit, or delete items according to the assigned permissions.  Country ‘Russia’ has been added. You can view, edit, or delete it on the page.  You can grant or revoke permission by this following page.   Now Edit permission has been disabled for the current user/page.  Currently, the delete option is visible, but the edit option is not showing on the pagepermission has been disabled for the current user/page. 
How to Add a Module in the ABP.io Application?
If you’re building your application with ABP.io, you’re already on the right path to creating scalable and professional software. One of the best things about ABP.io is how it supports modular architecture. But what does that really mean? In simple words, a **Module** in ABP.io is like a complete feature package. It comes with its own logic, database setup, APIs, and even user interface parts. Think of it as a plug-and-play part of your application that keeps your code clean, reusable, and easy to manage. ABP.io provides many useful built-in modules like Identity, Tenant Management, and Audit Logging. These help you quickly add common features without writing everything from scratch. But sometimes, you need to go beyond the default options. Maybe your project has unique requirements. That’s when creating a **custom module** becomes important. In this guide, I’ll show you how to add a custom module, like **Vineforce.ProjectManagement**, into your existing ABP.io application. You’ll learn how to do it step by step on both the backend using .NET and the frontend using Angular. Whether you’re just starting with ABP.io or already have experience, this blog is made to help you integrate modules smoothly and with confidence. What You’ll Learn in This Guide * How to prepare your system for module integration * How to add the module to your ABP.io backend using NuGet * How to configure the database context and migrations * How to link the Angular frontend with the module using npm * Common pitfalls to avoid during integration Step 1: Prerequisites & Setup Before you begin, make sure the following tools and environments are set up properly. 1.1 Required Software * .NET SDK (compatible with your ABP.io version) * Node.js and npm * Angular CLI (installed globally) * ABP CLI (installed via dotnet tool) * Visual Studio or Rider for .NET * Git for version control 1.2 ABP.io Application Ready Ensure you have an existing ABP.io application up and running. The application should be in either Modular Monolith or Microservice architecture. Step 2: Backend Integration Using NuGet (C# / .NET) We’ll start by connecting your backend application to the custom module using NuGet packages. 2.1 Add Required Packages "Vineforce.Admin.HttpApi.Host"   - [Vineforce.ProjectManagement.Application](https://www.nuget.org/packages/Vineforce.ProjectManagement.Application) - [Vineforce.ProjectManagement.HttpApi](https://www.nuget.org/packages/Vineforce.ProjectManagement.HttpApi)  2.2 Register Module Dependencies 1. Open the file `AdminHttpApiHostModule.cs`. 2. Add the module dependencies inside the `[DependsOn]` attribute: ```csharp [DependsOn( typeof(ProjectManagementHttpApiModule), typeof(ProjectManagementApplicationModule), typeof(ProjectManagementEntityFrameworkCoreModule), typeof(ProjectManagementDomainSharedModule) )] ```  3. Also, add the using statements at the top: ```csharp using Vineforce.ProjectManagement; using Vineforce.ProjectManagement.EntityFrameworkCore; ``` 2.3 Add Required Packages "Vineforce.Admin.EntityFrameworkCore"   1. Also, add the using statements at the top: ```csharp using Vineforce.ProjectManagement.EntityFrameworkCore; ``` 2.4 Update Your DbContext 1. Open `AdminDbContext.cs`  2. Inside the `OnModelCreating` method, add:  ```csharp builder.ConfigureProjectManagement(); ``` This step tells your database context to load and apply table configurations from the ProjectManagement module. 2.5 Apply Migrations Once you update the DbContext, run EF Core migrations to apply the updated schema to your database. Option A: Using Terminal / PowerShell ```bash cd src/Vineforce.Admin.EntityFrameworkCore dotnet ef migrations add Add_ProjectManagement_Module dotnet ef database update ``` Option B: Using Visual Studio (Recommended for Beginners) 1. Open Package Manager Console. 2. Set Default Project to `Vineforce.Admin.EntityFrameworkCore`. 2. Run the Following Commands: ```powershell Add-Migration Add_ProjectManagement_Module Update-Database ``` At this point, the new tables from the module will be added to your main database.  Step 3: Frontend Integration Using npm (Angular) Once the backend is configured, let’s integrate the Angular frontend with the module. 3.1 Install the Angular Module 1. Open your Angular project root (usually `/angular`). 2. Run this command in the terminal: ```bash npm i @vineforce-modules/project-management ``` 4. You can view this link to copy the command: '[@vineforce-modules/project-management](https://www.npmjs.com/package/@vineforce-modules/project-management)' 3. This will also add the following entry in `package.json`: ```json "@vineforce-modules/project-management": "^9.0.0" ```  3.2 Update the app-routing.module.ts File  ```typescript { path: 'project-management', loadChildren: () => import('@vineforce-modules/project-management').then( m => m.ProjectManagementModule.forLazy() ), }, ``` This step makes the ProjectManagement module visible in the frontend UI. Step 4: Test the Integration Now that everything is configured, it’s time to test. 4.1 Backend Checklist * Run the application using Visual Studio or `dotnet run` * Check if there are any build errors * Confirm that new database tables were created 4.2 Frontend Checklist * Run `npm start` or `ng serve` * Log in to the app * Navigate through the new module in the side menu * Test create/edit/delete operations Frequently Asked Questions Q: What are the prerequisites for adding a custom ABP.io module? A: You'll need .NET SDK compatible with your ABP version, Node.js/npm, Angular CLI, ABP CLI, and an existing ABP.io application in either Modular Monolith or Microservice architecture. Q: How do I integrate the module on the backend? A: Add the required NuGet packages (`Vineforce.ProjectManagement.Application`, `Vineforce.ProjectManagement.HttpApi`) and register dependencies in `AdminHttpApiHostModule.cs`. Q: What's the best approach for database integration? A: Update your `DbContext` to call `builder.ConfigureProjectManagement()` and apply migrations using `dotnet ef migrations add` and `dotnet ef database update`. Q: How do I integrate with the Angular frontend? A: Install the module via `npm i @vineforce-modules/project-management` and add it to your Angular routes in `app-routing.module.ts`. Q: What common issues should I watch for? A: Watch for version mismatches between backend and frontend packages, database migration errors, and Angular module import issues. Common Issues & Troubleshooting | Issue | Solution | | ------------------------------- | ----------------------------------------------------------- | | Build fails after adding module | Double-check all using imports and NuGet versions | | EF migration error | Make sure DbContext is updated and compiled | | Module not showing in UI | Confirm that routing is updated correctly | | Package not found | Check internet connection and package version compatibility | Final Summary You have now successfully: * Added a module to your ABP.io backend * Linked it with your database and ran migrations * Integrated the Angular module using npm * Updated routing and tested the entire module This setup allows you to build and scale your application using modular principles without repeating core logic again and again.   Conclusion Adding a custom module to your ABP.io application is not just a technical task, it is a smart way to keep your project scalable and organized. By following this step-by-step guide, you have successfully connected your backend using NuGet, updated your database context, applied migrations, and linked the frontend through npm and Angular routing. This process helps you avoid repeating code, improves maintainability, and prepares your application for future growth. Whether you are adding one module or planning to build a fully modular system, this method will save time and reduce errors. If you face any issues or want expert assistance, the Vineforce team is always ready to help with ABP.io development, custom modules, and performance optimization. You can reach us at **[[email protected]](mailto:[email protected])** for support or consultation.