Skip to content

Development

Adding a microfrontend

The integration pattern is an in-process Razor Class Library composed by the Shell, not a routed WASM app:

  1. Create a new RCL project under src/Mfe.<Area>.<Name>.Blazor with its own pages (e.g. Dashboard.razor).
  2. Add a static {X}Mfe descriptor class exposing Assembly (for route/endpoint discovery) and NavigationItems (declarative nav entries for the Shell), mirroring IdentityAdminMfe/IdentitySelfServiceMfe.
  3. Add an Add{X}Mfe(IServiceCollection, IConfiguration) DI extension in the new project. Register the MFE's own services and its own authorization policies here — this is the MFE's job, not the Shell's.
  4. Project-reference the new MFE from Shell.BlazorServer.Core, add its assembly and nav items to Composition/ShellMfeRegistry.cs, and call Add{X}Mfe(...) once from Shell.BlazorServer/Program.cs.
  5. Add bUnit component tests under tests/Shell.BlazorServer.UnitTests, following the existing [TestClass]/[TestMethod] MSTest + BunitContext pattern (see Components/NavigationTests.cs) rather than xUnit [Fact].

A Shell that forgets to add the new assembly to both AddAdditionalAssemblies(...) in Program.cs and any client-rendered <Router AdditionalAssemblies> will see the new MFE's routes 404 while the Shell's own pages keep working — the gap only shows up on MFE routes specifically.

Theme adapter conditionals

UIKit registration is guarded by //#if (uiKitAdapter == ...) blocks in Program.cs. The UseTokens/UseFlowbite/UseDaisyUI computed symbols are set from the uiKitAdapter parameter at generation time, and template.json's file-source exclusion rules mean only the chosen adapter project is even present in a generated solution — switching adapters after generation means adding the other adapter project back in yourself (project reference + package reference) and wiring its registration extension.

Architecture tests

Shell.BlazorServer.ArchitectureTests and ...MicrofrontendLibraryTemplate.ArchitectureTests use NetArchTest to enforce layering rules between host, core RCL, and MFE projects. Keep new projects aligned with the asserted dependency directions.

Frontend

Edit src/Shell.BlazorServer.Core/Styles/app.tailwind.css; the root npm pipeline compiles to wwwroot/css/app.css. Flowbite JS loads conditionally in App.razor.

See also