BlazorWasmPreRendering.Build 1.0.0-preview.4.1

BlazorWasmPreRendering.Build

Summary

When you publish your Blazor WebAssembly app, this package pre-renders and saves the app as static HTML files in your public folder.

This will help make the contents of your Blazor WebAssembly static apps findable in internet search and be visible from the OGP client.

An output of "dotnet publish" before installing this package:

And after installing this package:

Usage

Install this package to your Blazor WebAssembly project.

dotnet add package BlazorWasmPreRendering.Build --version 1.0.0-preview.4.1

Basically, that's all.

Once installing this package is done, the output of the dotnet publish command will include pre-rendered contents.

Configurations

Services registration

If you are registering any services (except HttpClient that isn't specially configured) to the service provider at the startup of your Blazor WebAssembly app, please extract that process to the static method named static void ConfigureServices(IServiceCollection services, string baseAddress).

public class Program
{
  public static async Task Main(string[] args)
  {
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");

    // 👇 Extract service registration...
    services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(baseAddress) });
    services.AddScoped<IFoo, MyFoo>();

    await builder.Build().RunAsync();
  }
}

public class Program
{
  public static async Task Main(string[] args)
  {
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");

    ConfigureServices(builder.Services, builder.HostEnvironment.BaseAddress);

    await builder.Build().RunAsync();
  }

  // 👇 ... to this named static method.
  private static void ConfigureServices(IServiceCollection services, string baseAddress)
  {
    services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(baseAddress) });
    services.AddScoped<IFoo, MyFoo>();
  }
}

This package calls the ConfigureServices() static method inside of your Blazor WebAssembly app when pre-renders it if that method exists.

This is important to your Blazor WebAssembly components work fine in the pre-rendering process.

Root component type and selector

In some cases, suppose the type and selector of the root component of your Blazor WebAssembly app are not "{RootNamespace}.App" and "#app".

In that case, you have to describe that information explicitly in the project file (.csproj) of your Blazor WebAssembly app, like this.

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  ...
  <PropertyGroup>
    <BlazorWasmPrerenderingRootComponentType>My.Custom.RootComponentClass</BlazorWasmPrerenderingRootComponentType>
    <BlazorWasmPrerenderingRootComponentSelector>.selector-for-root</BlazorWasmPrerenderingRootComponentSelector>
  </PropertyGroup>
  ...

Appendix

• If you would like to change a title or any meta elements for each page in your Blazor WebAssembly app, I recommend using the "Blazor Head Element Helper" NuGet package.
• If you would like to deploy your Blazor WebAssembly app to GitHub Pages, I recommend using the "Publish SPA for GitHub Pages" NuGet package.
• The "Awesome Blazor Browser" site is one of a good showcase of this package. That site is republishing every day by GitHub Actions with pre-rendering powered by this package.

Notice

This package is now experimental stage.

We can expect this package will work fine with a simple Blazor WebAssembly project.
But I'm not sure this package works fine even with a complicated real-world Blazor WebAssembly project at this time.

I welcome to fork and improve this project on your hand.

License

Mozilla Public License Version 2.0