Set base href on publish in Blazor WebAssembly project

user_111266 0
Viewed 515

The index.html file in Blazor WebAsssembly has a value of "/" for href. My understanding is that I would just change this if I need to host my app in a subdirectory of a website.

I'm working on an ASP.NET hosted Blazor WebAppsembly app.

What if I have multiple environments and I want to publish this with different bases - for example http://mysite/someapptest/ and http://mysite/someappstage/.

Since it's static HTML I don't think I can get to it programmatically at runtime. Is there any way to do that at build time without writing some kind of custom handler to swap out a placeholder or something?

For example, Angular has ng build --base-href /someapptest/

Anything similar for Blazor?

blazor-webassembly blazor
1 Answers

There are two settings that you use:

<Base..>

The settings depend on your Css setup.

    <base href="/red/" />
    <link href="/red/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/red/css/app.css" rel="stylesheet" />
    <link href="/red/Hydra.Red.styles.css" rel="stylesheet" />

<StaticWebAssetBasePath..>

Set in the WebAssembly Proj file. This sets the path that the WASM files can be accessed.

    <StaticWebAssetBasePath>red</StaticWebAssetBasePath>

The main problem you face is Page Refreshes. What happens when a user hits F5 on say /Red/FetchData. You need to make sure the server site knows which SPA launch page to hit, and the SPA router needs to know the route /Red/FetchData, not just FetchData which may be the route internally in the project.

You end up with multiple End Points in your server config:

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/red"), app1 =>
{
    app1.UseBlazorFrameworkFiles("/red");
    app1.UseRouting();
    app1.UseEndpoints(endpoints =>
    {
      endpoints.MapFallbackToPage("/red/{*path:nonfile}", "/_Red");
    });

});

I wrote a proof of concept article on the subject a while ago on Code Project. It's a bit dated now - https://www.codeproject.com/Articles/5287009/Blazor-Hydra-Hosting-Multiple-Blazor-SPAs-on-a-sin. There's an associated Repo here: https://github.com/ShaunCurtis/Hydra

user_130657810
Related