Blazor Micro Frontends
===

[Blazor Custom Elements](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/js-spa-frameworks?#blazor-custom-elements) offers the ability to use [ASP.NET Core Razor Components](https://learn.microsoft.com/en-us/aspnet/core/blazor/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](https://github.com/2and4/blazor-micro-frontends/)**.

## Provider Setup (ASP.NET Blazor)

### **Requirements**
* Follow the instructions to register [Blazor Custom Elements](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/js-spa-frameworks?#blazor-custom-elements).

### 1. **Install** the package

```bash
npm install blazor-micro-frontends
```

### 2. **Import** a initializer

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

### 3. **Configure** the initializer
* 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');
```

### 4. **Start** the connection
```javascript
await initializer.startAsync();
```

### **Customize** startup options
The startup options for ASP.NET Blazor remain fully customizable.
* [Blazor Startup Options Documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-9.0#startup-process-and-configuration)
```javascript
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

```bash
npm install blazor-micro-frontends
```

### 2. **Import** the client initializer

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

### 3. **Configure** the initializer

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

### 4. **Initialize** the Blazor Micro Frontend
```javascript
await initializer.initializeAsync();
```

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