http-redirectblazorblazor-webassembly

Blazor Hosted WebAssembly subpath (base-href) not working with some nuget packages

I have a Blazor Hosted WebAssembly which means that I have three projects, the Client, the Server and the Shared. The inter-communication happens with web-apis.

On the Client, into index.html I have the following:

<base href="/app/" />

On the Client, into Clientn.csproj I have the following:

<StaticWebAssetBasePath>app</StaticWebAssetBasePath>

On the Server, into program.cs I have the following:

app.UseBlazorFrameworkFiles("/app");
app.UseStaticFiles();
app.UsePathBase("/app");
app.MapFallbackToFile("/app" + "/" + "index.html");

With those settings the application starts and loading but it fails to load packages:

Blazored.Modal
Blazored.TextEditor
Microsoft.AspNetCore.Components.WebAssembly.Authentication

These packages are trying to find resources into /app/_content but the resources are not there. enter image description here

enter image description here

When we use the following code in the Program.cs file of the Server

app.UseStaticFiles("/app"); //instead of app.UseStaticFiles();

Then the packages are resolved under app/_content but css and js files refferenced into index.html are not resolved

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/toggle-switch/toggle-switch.css" rel="stylesheet" />
<link href="css/parameters.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/listener.js"></script>
<script src="js/function.js"></script>
<script src="js/events.js"></script>
<script src="js/files.js"></script>
<script src="js/tab.js"></script>

When the application is running without a subpath it works normally enter image description here

Any ideas?

Solution

  • I have managed to get this working before some time ago, so here are the configuration:

    On the Client, into index.html I have the following:

    <base href="/app/" />

    On the Client, into Clientn.csproj I have the following:

    <StaticWebAssetBasePath>app</StaticWebAssetBasePath>

    On the Server, into program.cs I have the following:

    app.UseBlazorFrameworkFiles("/app");
app.UseStaticFiles();
app.UsePathBase("/app");
app.MapFallbackToFile("/" + "{*path:nonfile}", "/app" + "/" + "index.html")

    Then in order for some packages to be also under the subpath, on the Client, into index.html I have the following declarations that they were not needed before:

    <link href="_content/Blazored.Modal/Blazored.Modal.bundle.scp.css" rel="stylesheet" /> <!-- OVERWRITES THE DEFAULT INJECTION -->
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script> <!-- OVERWRITES THE DEFAULT INJECTION -->
...
<Any Other Package CSS or JS>
...