Search code examples
c#blazorblazor-server-sideblazor-webassembly.net-8.0

_framework/blazor.web.js fails to load with 404 when changing the base URL of a .NET 8 Blazor Web App

I have .NET 8 Blazor Web App that I've created from the Visual Studio template. It has server and client projects. I need to change the base URL of the application to be /portals/sales. Here are the changes that I've made

  1. Inside Program.cs 
    app.UseBlazorFrameworkFiles(new PathString("/portals/sales"));
app.UseStaticFiles("/portals/sales");
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode(options =>
        options.PathPrefix = "/portals/sales")
    .AddAdditionalAssemblies(typeof(MK.Sales.Portal.Client._Imports).Assembly);
  2. Inside the App.razor 
     <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/portals/sales/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MK.Sales.Portal.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="/portals/sales/_framework/blazor.web.js"></script>
</body>

</html>
  3. Inside the server csproj 
    <PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  <Nullable>enable</Nullable>
  <ImplicitUsings>enable</ImplicitUsings>
  <StaticWebAssetBasePath>/portals/sales/</StaticWebAssetBasePath>
</PropertyGroup>

When I launch the application under https://localhost:5001/portals/sales URL, everything loads correctly, except the _framework/blazor.web.js. I receive 404 and the _framework/blazor.web.js is not loaded.

When I manually load https://localhost:5001/_framework/blazor.web.js, it loads just fine.

I am not sure what am I missing, but Blazor fails to supply the _framework/blazor.web.js from the overridden base path /portals/sales. Instead, the _framework/blazor.web.js remains at the base path.

What should I change in my code to make Blazor supply the _framework/blazor.web.js from the /portals/sales base path?

Update 1

I've uploaded the sample project into my GitHub account and you can find it here

Update 2

It seems this is a bug. I've opened a GitHub issue

Solution

  • The right way of configuring custom base URL in Blazor is using UsePathBase

    Here's the success path of having a custom base URL

    1. In the default Blazor template add UsePathBase right after the build.Build

      var app = builder.Build();

app.UsePathBase("/portals/sales");

    2. Modify the App.razor similar to this

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="/portals/sales/"/>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="app.css"/>
    <link rel="stylesheet" href="BlazorCustomBaseUrl.styles.css"/>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <HeadOutlet/>
</head>

<body>
<Routes/>
<script src="/portals/sales/_framework/blazor.web.js"></script>
</body>

</html>

    3. Update the page URLs of your pages. For instance my Weather.razor has this @page "/portals/sales/weather"

    4. Update the NavMenu.razor urls to have the /portal/sales as a base path. For instance, the weather URL has this

    <NavLink class="nav-link" href="/portals/sales/weather">...
    1. Add this to your server project properties inside the csproj 
      <StaticWebAssetBasePath>/portals/sales</StaticWebAssetBasePath>

    After doing all of the above steps, I was successfully been able to launch and deploy our blazor app with a custom base path.

    The source code can be found here