A dedicated and fully functional server-side composed micro frontend solution for Blazor.
We have a dedicated documentation page for all things related Blazor. In case you need more extensive information and a bit of background you should check this one out.
👇 In this README you'll find the most important information to get started.
For using Piral.Blazor.Orchestrator you'll need an ASP.NET Core project using Blazor (server).
You'll only need to add a single NuGet package to the project:
install-package Piral.Blazor.OrchestratorWith the package installed you'll need to configure your project to actually use Piral.Blazor.Orchestrator.
// Add DI services
builder.Services.AddMicrofrontends<MfDiscoveryLoaderService>();
// Configure container
builder.Host.UseMicrofrontendContainers();
// Use middleware
app.UseMicrofrontends();More details on this in the NuGet package README.
From scratch you can create a new Razor Component Library (RCL) project. By changing the csproj file's SDK to Piral.Blazor.Sdk you will be able to debug / develop this very conveniently.
The RCL has to be for .NET 8.
In order to be a valid micro frontend there has to be one public class that inherits from IMfModule:
public class Module : IMfModule
{
public Module(IConfiguration configuration)
{
// Inject here what you want, e.g., the global `IConfiguration`.
}
public void Configure(IServiceCollection services)
{
// Configure your services in this function
}
public Task Setup(IMfAppService app)
{
// Register components and more
return Task.CompletedTask;
}
public Task Teardown(IMfAppService app)
{
// Unregister things that need to be cleaned up
return Task.CompletedTask;
}
}In the Setup function you can wire up your components to names that can be used on the outside. For instance, to wire up a MapComponent Razor component to an outside name of "mfa-map" you can do:
app.MapComponent<MapComponent>("mfa-map");If you need to set up more things - such as scripts or stylesheets used by your dependencies you'd do:
app.AppendScript($"https://mycdn.com/some-global-script.js");
app.AppendScript("_content/BlazorGoogleMaps/js/objectManager.js");The paths will be set up / configured correctly by the app shell.
Just install your dependencies as you like; if they are correctly in the csproj they will be correctly in the NuGet package.
As an example, the following is a valid csproj file for a micro frontend:
<Project Sdk="Piral.Blazor.Sdk/0.1.0">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Version>1.2.3</Version>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<AppShell>My.Emulator/0.1.0</AppShell>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="BlazorGoogleMaps" Version="3.1.2" />
<PackageReference Include="BlazorOcticons" Version="1.0.4" />
</ItemGroup>
</Project>It denotes two dependencies; BlazorGoogleMaps and BlazorOcticons. The resulting NuGet package will reference these two dependencies, too - and therefore these two will be part of the server's / app shell's resolution.
To use a component (such as "mfa-components" - this name is defined by the micro frontend calling the MapComponent method of the IMfAppService instance passed to their module definition - see below) without any parameters:
<MfComponent Name="mfa-component" />You can also specify parameters if necessary / wanted:
<MfComponent Name="mfa-component" Parameters="@parameters" />where
private Dictionary<string, object> parameters = new Dictionary<string, object>
{
{ "Foo", 5 }
};The MfComponent component is available in the Piral.Blazor.Shared NuGet package. It can be used in the server / app shell or in any micro frontend.
Alternatively, you can also specify parameters directly, e.g., for the previous example you could also write:
<MfComponent Name="mfa-component" Foo="5" />A full example is online on GitHub:
👨💻 FlorianRappl/Piral.Blazor.Server.Samples.Tractor
Piral.Blazor is released using the MIT license. For more information see the license file.