blazor-micro-frontends

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)

$3

* Follow the instructions to register Blazor Custom Elements.

$3

``bash
npm install blazor-micro-frontends
`

$3

* ASP.NET Blazor Server
`javascript
import { BlazorInitializerServer } from 'blazor-micro-frontends';
`
* ASP.NET Blazor WebAssembly
`javascript
import { BlazorInitializerWasm } from 'blazor-micro-frontends';
`

$3

* ASP.NET Blazor Server
`javascript
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
`javascript
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');
`

$3

`javascript
await initializer.startAsync();
`

$3

The startup options for ASP.NET Blazor remain fully customizable.
* Blazor Startup Options Documentation
`javascript
const startupOptions = initializer.getDefaultOptions();
startupOptions... //modify options as outlined in Microsoft's documentation

await initializer.startAsync(startupOptions);
`

Consumer Setup (Single Page Application)

$3

`bash
npm install blazor-micro-frontends
`

$3

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

$3

`javascript
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');
`

$3

`javascript
await initializer.initializeAsync();
``

License

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