Skip to content

agriffard/ModularBlazor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

ModularBlazor

Goal : Move Blazor components like Account pages to a separate project in order to have a clear separation of features in different modules.

Step 0

  • Create a new Blazor app ModularBlazor.App with Authentication.
  • Execute dotnet ef update database to create the database.
  • Create a new user using the Register page and login to test authenticated pages.

Step 1

  • Create project ModularBlazor.Account in Modules folder.
  • Add reference of ModularBlazor.Account to ModularBlazor.App application.
  • Change Project Sdk to <Project Sdk="Microsoft.NET.Sdk.Razor">
  • Add AspNetCore assemblies references to ModularBlazor.Account.csproj:
		<FrameworkReference Include="Microsoft.AspNetCore.App" />
		<PackageReference Include="Microsoft.AspNetCore.Components" Version="9.0.1" />
		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.1" />

Step 2

  • Move Component\Account Pages to ModularBlazor.Account project.
  • Rename namespaces to ModularBlazor.Account.Components.Account.
  • Add _Imports.razor file to ModularBlazor.Account.Components folder
  • Change scope of internal sealed classes to public to use them in the main application.

Step 3

  • Add Routes.razor.cs below Routes.razor, declare static AdditionalAssemblies and add the ModularBlazor.Account Assembly:
public partial class Routes
{
    public static List<Assembly> AdditionalAssemblies = new List<Assembly>()
    {
        typeof(ModularBlazor.Account.Components._Imports).Assembly
    };
}
  • In Program.cs, call the AddAdditionalAssemblies() method in order to load the module assemblies in the main application:
App.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(Routes.AdditionalAssemblies.ToArray());

Step 3

  • Move Components\Layout folder to ModularBlazor.Account project (ManageLayout needs the main Layout).
  • Move Data folder to ModularBlazor.Account project (ApplicationDbContext, ApplicationUser, ...).

Step 4

  • Create project ModularBlazor.Data
  • Add Entity Framework Core packages to ModularBlazor.Data.csproj.
  • Move Data folder to ModularBlazor.Data.
  • Add reference of ModularBlazor.Data to ModularBlazor.Account project.
  • Change namespace ModularBlazor.App.Data to ModularBlazor.Data.

Step 5

  • Create project ModularBlazor.Layout
  • Move Layout folder to ModularBlazor.Layout project.
  • Add reference of ModularBlazor.Layout to ModularBlazor.Account project and to ModularBlazor.App application.
  • Change namespaces to use ModularBlazor.Layout.Components.Layout where needed (Routes, Account\Shared\ManageLayout).

Credits

Inspired by BlazorAdmin

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors