Prerendering (#61)

Author: GuyWhoKnowsTheGuy

README.md

@@ -5,7 +5,7 @@
 
 This project is an example of using GitHub Actions to automatically deploy a .NET 9 [MudBlazor](https://mudblazor.com/) WebAssembly SPA (Single Page Application) to GitHub Pages. For a live demo, check the following link:
 
-https://mudblazorgithubpages.github.io
+https://theotherstuff.github.io/MudBlazorGitHubPages
 
 Microsoft Docs already contains a [general overview](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-8.0#github-pages)
 of the steps needed for a successful deploy.

src/MudBlazorGitHubPages/AppSettings.cs renamed to src/MudBlazorGitHubPages/ClientSettings.cs

@@ -1,4 +1,5 @@
-using System.Text.Json.Serialization;
+using MudBlazorGitHubPages.Util;
+using System.Text.Json.Serialization;
 
 namespace MudBlazorGitHubPages;
 
@@ -8,7 +9,7 @@ public enum ExampleEnum
     FirstValue = 1,
 }
 
-public class AppSettings
+public class ClientSettings
 {
     [JsonPropertyName("stringValue")]
     [ConfigurationKeyName("stringValue")]   

src/MudBlazorGitHubPages/Components/OverlayLoader.razor

@@ -0,0 +1,18 @@
+<MudOverlay Visible="@(!_pageLoaded)" DarkBackground="true" Absolute="false">
+    <MudProgressCircular Color="Color.Secondary" Indeterminate="true" />
+</MudOverlay>
+
+@code{
+    private bool _pageLoaded;
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (_pageLoaded)
+        {
+            return;
+        }
+        
+        _pageLoaded = true;
+        _ = this.InvokeAsync(this.StateHasChanged);
+    }
+}

src/MudBlazorGitHubPages/Components/StateManager.razor

@@ -0,0 +1,47 @@
+@* This component was copied from https://gist.github.com/EngstromJimmy/e51b8166cf2fb61f8760c5ea20d575af *@
+
+@typeparam T
+@inject PersistentComponentState _persistentComponentState
+@implements IDisposable
+
+@ChildContent(_state)
+
+@code {
+    [Parameter, EditorRequired]
+    public RenderFragment<T> ChildContent { get; set; }
+
+    [Parameter, EditorRequired]
+    public Func<Task<T>> GetState { get; set; }
+
+    [Parameter, EditorRequired]
+    public string StateKey { get; set; }
+
+    private T _state;
+    private PersistingComponentStateSubscription _subscription;
+    protected override async Task OnInitializedAsync()
+    {
+        _subscription = _persistentComponentState.RegisterOnPersisting(SaveState);
+
+        if (_persistentComponentState.TryTakeFromJson<T>(StateKey, out var storedState) && storedState != null)
+        {
+            _state = storedState;
+        }
+        else
+        {
+            _state = await GetState.Invoke();
+        }
+
+        await base.OnInitializedAsync();
+    }
+
+    private Task SaveState()
+    {
+        _persistentComponentState.PersistAsJson(StateKey, _state);
+        return Task.CompletedTask;
+    }
+
+    void IDisposable.Dispose()
+    {
+        _subscription.Dispose();
+    }
+}

src/MudBlazorGitHubPages/Layout/MainLayout.razor

@@ -1,11 +1,14 @@
-@inherits LayoutComponentBase
+@using MudBlazorGitHubPages.Components
+@inherits LayoutComponentBase
 @inject NavigationManager NavigationManager
 
 <MudThemeProvider />
 <MudPopoverProvider />
 <MudDialogProvider />
 <MudSnackbarProvider />
 
+<OverlayLoader />
+
 <div class="page mud-layout">
 
     <div class="sidebar mud-elevation-1">

src/MudBlazorGitHubPages/MudBlazorGitHubPages.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
     <TargetFramework>net9.0</TargetFramework>
@@ -7,6 +7,8 @@
     <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
     <AssemblyVersion>1.0.0</AssemblyVersion>
 	<GHPages>true</GHPages>
+    <BlazorWasmPrerenderingDeleteLoadingContents>true</BlazorWasmPrerenderingDeleteLoadingContents>
+	<BlazorWasmPrerenderingMode>WebAssemblyPrerendered</BlazorWasmPrerenderingMode>
   </PropertyGroup>
 
 
@@ -16,6 +18,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
+    <PackageReference Include="BlazorWasmPreRendering.Build" Version="5.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.4" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.4" PrivateAssets="all" />
     <PackageReference Include="MudBlazor" Version="8.5.1" />

src/MudBlazorGitHubPages/Program.cs

@@ -8,22 +8,36 @@
 using Serilog;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
 
-var http = new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) };
-builder.Services.AddScoped(sp => http);
+// Determine whether root components are already registered via prerednered HTML contents.
+// See https://github.com/jsakamoto/BlazorWasmPreRendering.Build
+if (!builder.RootComponents.Any())
+{
+    builder.RootComponents.Add<App>("#app");
+    builder.RootComponents.Add<HeadOutlet>("head::after");
+}
 
-var appSettings = await http.GetFromJsonAsync<AppSettings>("appsettings.json", new System.Text.Json.JsonSerializerOptions() { Converters = { new UnknownEnumConverter() } });
-builder.Services.AddSingleton(appSettings ?? new());
-
-builder.Services.AddMudServices();
-
-builder.Services.AddBlazoredLocalStorage();
+// Do not change this line, it's for prerendering. See https://github.com/jsakamoto/BlazorWasmPreRendering.Build
+ConfigureServices(builder.Services, builder.HostEnvironment.BaseAddress, builder.Configuration);
 
 Log.Logger = new LoggerConfiguration()
     .MinimumLevel.Verbose()
     .WriteTo.BrowserConsole()
     .CreateLogger();
 
 await builder.Build().RunAsync();
+
+// This method signature follows a convention to enable prerendering.
+// See https://github.com/jsakamoto/BlazorWasmPreRendering.Build
+static void ConfigureServices(IServiceCollection services, string baseAddress, IConfiguration configuration)
+{
+    var http = new HttpClient { BaseAddress = new Uri(baseAddress) };
+    services.AddScoped(sp => http);
+
+    var clientSettings = configuration.Get<ClientSettings>();
+
+    services
+        .AddSingleton(clientSettings!)
+        .AddMudServices()
+        .AddBlazoredLocalStorage();
+}

src/MudBlazorGitHubPages/wwwroot/appsettings.json

@@ -1,6 +1,5 @@
 {
   "stringValue": "Example String Value",
   "intValue": 4,
-  "enumValue": "FirstValue",
-  "nonexistentEnumValue": "TheNonexistentEnumValue"
+  "enumValue": "FirstValue"
 }