Goal : Move Blazor components like Account pages to a separate project in order to have a clear separation of features in different modules.
- Create a new Blazor app
ModularBlazor.Appwith Authentication. - Execute
dotnet ef update databaseto create the database. - Create a new user using the
Registerpage and login to test authenticated pages.
- Create project
ModularBlazor.Accountin Modules folder. - Add reference of
ModularBlazor.AccounttoModularBlazor.Appapplication. - 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" />
- Move
Component\AccountPages toModularBlazor.Accountproject. - Rename namespaces to
ModularBlazor.Account.Components.Account. - Add
_Imports.razorfile toModularBlazor.Account.Componentsfolder - Change scope of
internal sealedclasses topublicto use them in the main application.
- Add
Routes.razor.csbelowRoutes.razor, declare staticAdditionalAssembliesand add theModularBlazor.AccountAssembly:
public partial class Routes
{
public static List<Assembly> AdditionalAssemblies = new List<Assembly>()
{
typeof(ModularBlazor.Account.Components._Imports).Assembly
};
}
- In
Program.cs, call theAddAdditionalAssemblies()method in order to load the module assemblies in the main application:
App.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddAdditionalAssemblies(Routes.AdditionalAssemblies.ToArray());
- Move
Components\Layoutfolder toModularBlazor.Accountproject (ManageLayoutneeds the main Layout). - Move
Datafolder toModularBlazor.Accountproject (ApplicationDbContext,ApplicationUser, ...).
- Create project
ModularBlazor.Data - Add Entity Framework Core packages to
ModularBlazor.Data.csproj. - Move
Datafolder toModularBlazor.Data. - Add reference of
ModularBlazor.DatatoModularBlazor.Accountproject. - Change namespace
ModularBlazor.App.DatatoModularBlazor.Data.
- Create project
ModularBlazor.Layout - Move
Layoutfolder toModularBlazor.Layoutproject. - Add reference of
ModularBlazor.LayouttoModularBlazor.Accountproject and toModularBlazor.Appapplication. - Change namespaces to use
ModularBlazor.Layout.Components.Layoutwhere needed (Routes,Account\Shared\ManageLayout).
Inspired by BlazorAdmin