Micro-frontend Architectures in Blazor

In this lesson, you will learn how to architect large-scale applications by composing independently deployable Blazor modules into a single, unified shell.

The Micro-frontend Concept

In a traditional monolithic Blazor application, the entire codebase is compiled and deployed as a single unit. As your team grows, this leads to long build times and rigid release cycles. A micro-frontend architecture decomposes this monolith into smaller, "vertical" slices—such as a CheckoutModule or a UserDashboardModule—that can be developed, tested, and deployed by separate teams.

Composing the Shell

The core of this architecture is the "Shell" application. The Shell acts as the orchestrator, providing the layout, navigation, and global services (like Authentication), while the micro-frontends reside as individual Blazor WebAssembly assemblies.

To achieve this, we use Dynamic Assembly Loading. Instead of linking modules at compile-time, the Shell downloads the required .wasm and .dll files from external sources (such as an Azure Blob Storage or a CDN) at runtime.

Implementing Dynamic Loading

You can use the LazyAssemblyLoader provided by Microsoft to fetch these modules on-demand. Here is a conceptual implementation of how a Shell might inject a module's route:

@inject Microsoft.AspNetCore.Components.WebAssembly.Services.LazyAssemblyLoader AssemblyLoader

@code {
    private async Task LoadModuleAsync()
    {
        // Fetch the external assembly at runtime
        var assemblies = await AssemblyLoader.LoadAssembliesAsync(
            new[] { "CheckoutModule.wasm" }
        );
        
        // The assemblies are now available for the router to match
    }
}

By leveraging AppAssembly and AdditionalAssemblies in the Router component, the Shell can dynamically recognize the pages and components contained within the modules it has just loaded.

Maintaining Boundaries

When adopting this architecture, it is critical that micro-frontends share a common "Contract Library." This library defines shared DTOs, interfaces, and event schemas, ensuring that the Shell and its modules communicate without needing to share internal implementation logic. This keeps your modules loosely coupled and truly independent.

Key Takeaway: Micro-frontend architectures allow you to scale your development efforts by treating independent Blazor assemblies as modular plugins that can be loaded and orchestrated by a central Shell application.