Using the AdminLTE Theme with the ABP Framework MVC / Razor Pages UI

This article shows step by step how to use the AdminLTE Theme for ABP Framework MVC / Razor Page UI applications.

First, let's install the ABP CLI tool using the command below.

dotnet tool install -g Volo.Abp.Cli

If it's already installed, you can update it with the following command:

dotnet tool update -g Volo.Abp.Cli

Let's create a sample new project to apply the theme:

abp new AbpThemeAdminLte

Let's create a theme folder for the theme project in the project main directory and go to the theme directory on the command line:

mkdir theme
cd theme

Let's get the AdminLTE theme module project for ABP via git:

git clone https://github.com/mucahiddanis/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.git

Go back to the project main directory:

cd ..
cd ..

Let's add the AdminLTE theme project to the sln file:

dotnet sln add theme/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj

Let's reference the AdminLTE theme project in our AbpThemeAdminLte.Web project:

<ProjectReference Include="..\..\theme\Abp.AspNetCore.Mvc.UI.Theme.AdminLTE\Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj" />

Configure our theme in the AbpThemeAdminLte.Web.AbpThemeAdminLteWebModule.cs web module:

[DependsOn(
        typeof(AbpThemeAdminLteHttpApiModule),
        typeof(AbpThemeAdminLteApplicationModule),
        typeof(AbpThemeAdminLteEntityFrameworkCoreDbMigrationsModule),
        typeof(AbpAutofacModule),
        typeof(AbpIdentityWebModule),
        typeof(AbpAccountWebIdentityServerModule),
        typeof(AbpAspNetCoreMvcUiBasicThemeModule),
        typeof(AbpAspNetCoreAuthenticationJwtBearerModule),
        typeof(AbpTenantManagementWebModule),
        typeof(AbpAspNetCoreSerilogModule)
        )]
    public class AbpThemeAdminLteWebModule : AbpModule

typeof(AbpAspNetCoreMvcUiBasicThemeModule),

Let's add the following code below the code above:

typeof(AbpAspNetCoreMvcUiAdminLTEThemeModule),

Add using to reference theme project

using Abp.AspNetCore.Mvc.UI.Theme.AdminLTE;

The DependsOn list should finally be:

[DependsOn(
        typeof(AbpThemeAdminLteHttpApiModule),
        typeof(AbpThemeAdminLteApplicationModule),
        typeof(AbpThemeAdminLteEntityFrameworkCoreDbMigrationsModule),
        typeof(AbpAutofacModule),
        typeof(AbpIdentityWebModule),
        typeof(AbpAccountWebIdentityServerModule),
        typeof(AbpAspNetCoreMvcUiBasicThemeModule),
        typeof(AbpAspNetCoreMvcUiAdminLTEThemeModule),
        typeof(AbpAspNetCoreAuthenticationJwtBearerModule),
        typeof(AbpTenantManagementWebModule),
        typeof(AbpAspNetCoreSerilogModule)
        )]
    public class AbpThemeAdminLteWebModule : AbpModule

Let's set VirtualFileSystem for the source files of AdminLTE theme such as css, js, image. For this, AbpThemeAdminLte.Web.AbpThemeAdminLteWebModule.cs in the file. Let's add to the ConfigureVirtualFileSystem method:

private void ConfigureVirtualFileSystem(IWebHostEnvironment hostingEnvironment)
        {
            if (hostingEnvironment.IsDevelopment())
            {
                Configure<AbpVirtualFileSystemOptions>(options =>
                {
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteDomainSharedModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Domain.Shared"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteDomainModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Domain"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteApplicationContractsModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Application.Contracts"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteApplicationModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Application"));
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteWebModule>(hostingEnvironment.ContentRootPath);

                    // AdminLTE teması
                    options.FileSets.ReplaceEmbeddedByPhysical<AbpThemeAdminLteApplicationModule>(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}..{Path.DirectorySeparatorChar}Abp.AspNetCore.Mvc.UI.Theme.AdminLTE"));
                });
            }
        }

Let's Build the project.

Let's run the AbpThemeAdminLte.DbMigrator and AbpThemeAdminLte.Web project.

Version Update

Active version

ABP v3.2.0

You just need to update the versions of ABP packages in the theme project file Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj.