_content/Blazorise/ resources give 404 when you have a different base path

[DrLeh]

I'm following the steps here to configure my app to run under a different base path, because in our deployed app we will need it to be in a different path than the root of the domain. https://stackoverflow.com/questions/66862350/how-to-change-the-base-url-of-a-blazor-wasm-app . I have my blazor pages in project Audit.Web and i'm referencing them in Audit.Web.Api to render the blazor page on the Web.Api site.

//Audit.Web.csproj
<PropertyGroup>
  <StaticWebAssetBasePath>audit</StaticWebAssetBasePath>
  <TargetFramework>net6.0</TargetFramework>
</PropertyGroup>

And then in my index.html setting this: <base href="/audit/" />.

And mapping it in my Audit.Web.Api startup.cs:

//tried this method
//            app.UseBlazorFrameworkFiles("/audit");
// and this method below, same results
app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/audit"), first =>
{
    first.UseBlazorFrameworkFiles("/audit");
    first.UseStaticFiles();

    first.UseRouting();
    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("audit/{*path:nonfile}", "audit/index.html");
    });
});

...

app.UsePathBase("/audit");
app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("/audit/index.html");
});

So now when I run my Audit.Web.Api project, I run it and go to the /audit/ page, it will load blazor and show some basic components such as a non-blazorise Button. But the Blazorise paths are returning 404 which fails other components on the page

GET https://localhost:44375/audit/_content/Blazorise/blazorise.css net::ERR_ABORTED 404

trying to navigate directly to the css path without /audit/ still returns 404.

How do I configure the base path for Blazorise so that these paths will work? A similar line in the index.html file for the blazor js seems to work fine:

  <script src="_framework/blazor.webassembly.js"></script>

but these don't

  <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
  <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

[DrLeh]

Looks like I have some updates to do. This was an older project that I'm coming back to and updating, and looks like there are some changes from releast 9.5 that i need to do. https://blazorise.com/news/release-notes/095

[DrLeh]

Ok, I followed the steps in the upgrade release notes, but i see no mention of the .css files, which are still causing problems for me, so I'm reopening this issue.

I'm seeing some other errors after the update too:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Failed to fetch dynamically imported module: https://localhost:44375/audit/_content/Blazorise/breakpoint.js?v=0.9.5.5
      TypeError: Failed to fetch dynamically imported module: https://localhost:44375/audit/_content/Blazorise/breakpoint.js?v=0.9.5.5

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Failed to fetch dynamically imported module: https://localhost:44375/audit/_content/Blazorise/button.js?v=0.9.5.5
      TypeError: Failed to fetch dynamically imported module: https://localhost:44375/audit/_content/Blazorise/button.js?v=0.9.5.5
Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: https://localhost:44375/audit/_content/Blazorise/button.js?v=0.9.5.5
TypeError: Failed to fetch dynamically imported module: https://localhost:44375/audit/_content/Blazorise/button.js?v=0.9.5.5
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Blazorise.Modules.JSButtonModule.Initialize(ElementReference elementRef, String elementId, Object options)
   at Blazorise.Button.<OnInitialized>b__12_0()
   at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

I also confirmed that with the updated libraries, if i remove the code to map everything to /audit as mentioned in OP then i get no errors the app runs fine when pointing to /, but this will not work for me when I deploy.

[stsrki]

Can you check these two tickets?

#3122
#3150

[DrLeh]

@stsrki yes I looked through those two tickets before. They didn't provide much info on what I might be doing wrong, as it seems those were about a bug within Blazorise, which seemed to have been resolved with version 9.5.1, i'm on 9.5.5.

It seems that it's still rendering these files to the root rather than the new base path.

e.g.: https://localhost:44375/_content/Blazorise/breakpoint.js?v=0.9.5.5 shows the file, https://localhost:44375/audit/_content/Blazorise/breakpoint.js?v=0.9.5.5, does not.

Is there any reference repository / sample project that has this working that I could look at to compare to what I'm doing to see where I'm going wrong?

[stsrki]

We had similar problem recently reported in discord channel. @David-Moreira wrote this solution.

@* This tells Blazor that our app is running relative to /Blazor/ *@
<base href="~/Blazor/" />


1- Cloned Git project
2- Targeted Net6
3- Followed Blazorise instructions to install Blazorise
4- Setup a Blazorise.Button replacing the existing one, replace onclick by Clicked also, in Index.razor
5- Run project and navigate to https://localhost:5001/Blazor

It is not working, we can see in the console it is looking for the resource in :  https://localhost:5001/Blazor/_content/Blazorise/button.js?v=0.9.5.5
We do not have static content configured in the startup over at this location.
It is over at https://localhost:5001/_content/Blazorise/button.js?v=0.9.5.5

so...
6- Add app.UseStaticFiles("/Blazor"); to startup.cs
It now should be working.

[DrLeh]

It looks like that has fixed my issue. So here's my working code:

startup.cs:

app.UseBlazorFrameworkFiles("/audit");
app.UseStaticFiles(); //include static files for non- /audit directory
app.UseStaticFiles("/audit"); //include static files for /audit directory

I am NOT setting app.UseBasePath("/audit"); I have these endpoints set up as i want the /audit/index.html to be my base path when i run the app:

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("/audit/index.html");
});

I also had to change some references in my code to use ./url rather than /url. This is all working in my local now, so I will verify it when deployed to the server, if this works I will close this ticket.

thanks @stsrki !!

[DrLeh]

On my server, it looks like it's rendering the files to domain.com/audit/audit rather than domain.com/audit. So I'm not quite sure how I want to resolve that. I will keep reading the MS documentation on how to resolve it here: https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-6.0&tabs=visual-studio#app-base-path

[David-Moreira]

It seems like you are placing the application inside an audit folder instead of being in the server's app root folder? Are you not?

You should be able to put your app at the root folder and then just configure the routing how you want it programmatically. But yea Microsoft docs are the way to go.

If you need more concrete help, it's always easier to provide us with a repository so we can actually help you with your particular case.

[stsrki]

Hi, @DrLeh do you still experience the issue? If yes, provide us with a project to reproduce it as it really helps us track the problem.

[DrLeh]

No, I am not having this problem any more. Here are some companion issues I'm experiencing that do not seem to be blazorise-specific

https://stackoverflow.com/questions/71113666/how-to-host-blazor-webassembly-app-with-different-base-path?noredirect=1#comment125711915_71113666

dotnet/aspnetcore#40205

[stsrki]

Thanks for letting us know!