Skip to content

Development

Adding a microfrontend

The integration pattern is shell host page + catch-all route + WASM MFE project:

  1. Add a host page in Shell.BlazorServer.Core/Components/Pages/ with both an exact and catch-all route, mirroring SelfService.razor (@page "/self-service" and @page "/self-service/{*PageRoute}").
  2. Add a Blazor WASM project under src/Mfe.<Area>.<Name>.Blazor with its own Dashboard.razor, etc.
  3. Wire navigation in MainLayout.razor / NavMenu.
  4. Add bUnit tests using the TestHelpers/ base classes (BunitTestBase, MicrofrontendTestBase, UIKitTestHelper).

Theme adapter conditionals

UIKit registration is guarded by //#if (uiKitAdapter == ...) blocks in Program.cs and App.razor. The UseTokens/UseFlowbite/UseDaisyUI computed symbols are set from the uiKitAdapter parameter at generation time. To switch adapters in an already-generated solution, reference the desired adapter project and call its Add*Theme() 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