Tech blog of Jon Ryan, Web Developer & Geek

Modular Blazor

Blazor is great. It’s the new shiny. It enables the creation of client web apps by people who are good with C# and HTML. It’s for people who don’t want to have to learn Angular, React [insert latest JavaScript SPA framework or preference here] to create modern user friendly responsive interfaces, but use what they know.

Read up all about it On Microsofts Site

Why Go Modular?

If a web app is modular is has a number of benefits:

  • Plug-in like architecture (use what you need scrap what you don’t)
  • Follows the single responsibility principle of SOLID (less brittle code)
  • Teams can work on parts of a whole in isolation (less merge issue headaches)

How do you go Modular with Blazor?

In short: Razor Class Libraries and the AdditionalAssemblies on the Blazor router.

Razor Class Libraries

A Razor Class Libraries allow you to create a project which contains

  • Static Assets (css, js etc)
  • Components
  • Blazor Pages

Which is exactly what you would want in a Blazor Module. So how do you get that module to load as a module?

Blazor router (AdditionalAssemblies)

The router has a baked in parameter that takes an array of additional assemblies to look at and find any additional routes. Cleverly named AdditionalAssemblies

So you can use the “AdditionalAssemblies” parameter to point to a method which scans the referenced Razor Class Libraries for Pages.

<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="AssemblyScanning.GetAssemblies().ToArray()">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>

Show me the code!!! (where is the demo to play with?)

I have set up an example with two test modules on github which you can download/fork:

If you are not a fan of the Assembly scanning code an alternative would be Scrutor:

Written on May 29, 2020