Blazor Micro Frontends

Blazor Custom Elements offers the ability to use ASP.NET Core Razor Components across various Single Page Applications (SPAs).

Building on this solution, this package streamlines the creation and integration of micro frontends using ASP.NET Blazor (Server/WebAssembly).

• Examples of integrations with Angular, Gatsby, Next.js, Remix and Vite (React/Vanilla/Vue) are provided on GitHub.

Provider Setup (ASP.NET Blazor)

Requirements

• Follow the instructions to register Blazor Custom Elements.

1. Install the package

npm install blazor-micro-frontends

2. Import a initializer

• ASP.NET Blazor Server

import { BlazorInitializerServer } from 'blazor-micro-frontends';

• ASP.NET Blazor WebAssembly

import { BlazorInitializerWasm } from 'blazor-micro-frontends';

3. Configure the initializer

• ASP.NET Blazor Server

const pathBase = '/blazor-assets-path/';
const initializer = new BlazorInitializerServer(pathBase);

//if static web assets are not bundled
initializer.useModulesLoader('YourBlazorAppName');

//override reconnect settings if necessary 
//(defaults: maximumRetries = 10, intervallInMilliseconds = 1000)
initializer.setReconnectSettings(maximumRetries, intervallInMilliseconds);

• ASP.NET Blazor WebAssembly

const pathBase = '/blazor-assets-path/';
const initializer = new BlazorInitializerWasm(pathBase);

//include a decoder if resources are encoded
const brotliDecode = await import('decode.min');
initializer.useDecoder(brotliDecode, '.br');

4. Start the connection

await initializer.startAsync();

Customize startup options

The startup options for ASP.NET Blazor remain fully customizable.

• Blazor Startup Options Documentation

const startupOptions = initializer.getDefaultOptions();
startupOptions... //modify options as outlined in Microsoft's documentation

await initializer.startAsync(startupOptions);

Consumer Setup (Single Page Application)

1. Install the package

npm install blazor-micro-frontends

2. Import the client initializer

import { BlazorInitializerClient } from 'blazor-micro-frontends';

3. Configure the initializer

const pathBase = '/blazor-assets-path/';
const initializer = new BlazorInitializerClient(pathBase);

//add scripts from your blazor micro frontend
initializer.useScripts('index.js');

//add styles from your blazor micro frontend
initializer.useStyles('styles.css');

4. Initialize the Blazor Micro Frontend

await initializer.initializeAsync();

License

This package is licensed under MIT. See the license file for more details.