Using WebGL Builds in Blazor Server-Side

Hey,

It took me a few hours to work this out, so I wanted to write a post here in case someone else tries to do this and faces the same Issue.

It appears new ASP.NET Core applications, have dropped the web.config file, so the unity documentation can only get you halfway there.
Unity - Manual: WebGL: Server configuration code samples

From this MSDN page, I found out how to do it on Blazor.

I’m not sure if the settings will be different for the client-side build of Blazor. But here is the code for Server-Side. This is for a no compression build of WebGL, the compressed build setting can be found in the first link provided on the Unity documentation page. Just Edit accordingly.

Edit the Configure() function of the Startup.cs file like so:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
       
    // Remove This
    // app.UseStaticFiles();

    // Add This
    var provider = new FileExtensionContentTypeProvider();
    provider.Mappings.Remove(".data");
    provider.Mappings[".data"] = "application/octet-stream";
    provider.Mappings.Remove(".wasm");
    provider.Mappings[".wasm"] = "application/wasm";
    provider.Mappings.Remove(".symbols.json");
    provider.Mappings[".symbols.json"] = "application/octet-stream";
    app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
    app.UseStaticFiles();
    //--------------

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

Happy Hunting :wink:

Bless you

thanks, well done

Bless you

Saved my life.
Just wanted to say that you can configure just one route to support this by doing this after app.UseEndpoints…

var provider = new FileExtensionContentTypeProvider();
provider.Mappings.Remove(".data");
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings.Remove(".wasm");
provider.Mappings[".wasm"] = "application/wasm";
provider.Mappings.Remove(".symbols.json");
provider.Mappings[".symbols.json"] = "application/octet-stream";

app.MapWhen(ctx => !ctx.Request.Path.StartsWithSegments("/_framework/BuildWebGL"),
                subApp => subApp.UseStaticFiles(new StaticFileOptions() { ContentTypeProvider = provider }));

In this case it would only do it for the folder BuildWebGL inside wwwroot

I am struggling with this. I am using .net 6 on a new versions of Blazor server, there isn’t a Startup.cs. Presumably, these changes would go in Program.cs? When I place the BuildWebGL folder inside wwwroot I get a 404 server error.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.StaticFiles;
using UnityBlazor.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

//app.UseStaticFiles();

var provider = new FileExtensionContentTypeProvider();
provider.Mappings.Remove(".data");
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings.Remove(".wasm");
provider.Mappings[".wasm"] = "application/wasm";
provider.Mappings.Remove(".symbols.json");
provider.Mappings[".symbols.json"] = "application/octet-stream";

app.MapWhen(ctx => !ctx.Request.Path.StartsWithSegments("/_framework/BuildWebGL"),
                subApp => subApp.UseStaticFiles(new StaticFileOptions() { ContentTypeProvider = provider }));

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

did u find a solution?

Update for .Net 8 Blazor server built off the new Render mode template.

The sequence of the “app.” config commands is very important, the app.UseAntiforgery() has to come after the app.UseRouting() in the MapWhen.

app.UseHttpsRedirection();
app.UseAntiforgery();
app.UseStaticFiles();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BrownBot.Home.Web.Client._Imports).Assembly);

app.MapControllers();

var provider = new FileExtensionContentTypeProvider();
provider.Mappings.Remove(".data");
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings.Remove(".wasm");
provider.Mappings[".wasm"] = "application/wasm";
provider.Mappings.Remove(".symbols.json");
provider.Mappings[".symbols.json"] = "application/octet-stream";


app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/webbuilds"), subApp => {
    subApp.UseStaticFiles(new StaticFileOptions() { ContentTypeProvider = provider });
    subApp.UseRouting();
    subApp.UseAntiforgery();
});

app.Run();

I’m placing all the unity projects into Azure Blob storage and mounting the storage to the app service (Look for “Path mappings” under “Configuration” on the app service), the path is a little weird I had to mount to “/home/site/wwwroot/wwwroot/webbuilds” to merge in with my deployed Blazor app’s wwwroot folder. This might be different depending on your deplyment method.

You can then easily update the Unity apps independently of the website via Azure Storage Explorer.

Well here we go again. Something has changed in the meanwhile.
I now use .net 9, last time I used Unity in blazor server side was .net 6 or 7 probably.
But now even with the UseStaticFiles and apply content-encoding br it fails to serve the files properly.
Something I noticed was that when publishing the files to the IIS server it automatically compresses the files to gzip and brotli.
Which is something I don’t want of course.

All I want is for blazor to serve the files correctly and always have it check the index.html whether it is outdated. Because if the index.html gets cached and not updated, it’ll still serve the old build.

Serving the files and caching them properly is such a pain in the ass.
So does anyone have an update on this to get it working properly?
Using IIS publish, Brotli compressed build and all.

Would be nice if Unity had a manual for publishing Unity WebGL Builds with Blazor Server