Menu
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
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);
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>
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?
I've uploaded the sample project into my GitHub account and you can find it here
It seems this is a bug. I've opened a GitHub issue
458
The right way of configuring custom base URL in Blazor is using UsePathBase
Here's the success path of having a custom base URL
In the default Blazor template add UsePathBase right after the build.Build
var app = builder.Build();
app.UsePathBase("/portals/sales");
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>
Update the page URLs of your pages. For instance my Weather.razor has this @page "/portals/sales/weather"
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">...
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
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With