question

DarrellTunnell-7048 avatar image
0 Votes"
DarrellTunnell-7048 asked Bruce-SqlWork commented

.NET 6 Blazor - Modifying stuff in head and base path attribute

There is a well known issue with blazor in that there is a base href attribute in the HEAD. When running the site locally this may work, but if the site ends up being deployed under a path like www.foo.com/mysite instead of on the root url then the base href needs updating at deployment time.

For a better description of the issue i'm talking about - read this: https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/

So now for my question.. I saw a new capability for razor pages in .net 6 where the server can modify HTML tags placed in the HEAD. of the html web page.
Suppose our blazor wasm index.html is being served up from an asp.net core backend, does this mean that it should be possible to modify the base href tag in the index html dynamically at runtime, based on the PATH the server is serving the static files up on? If so are there any examples of this?

dotnet-aspnet-core-blazordotnet-aspnet-core-razor
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

And more importantly if this does turn out to be possible, do the new VS project templates for an asp.net core hosted wasm solution ship with this pattern by default - it would make sense to me.

0 Votes 0 ·
Bruce-SqlWork avatar image Bruce-SqlWork DarrellTunnell-7048 ·

as its a static file there is no server processing by default (it is not a razor page). you need a static file processor.

if you are using asp.net core to host blazor wwwroot static files, you can add middleware that modifies the response stream for index.html

if you are using ngnix, then use a sub_filter.

you might also look at a deployment process to edit the index.html.

note: an option I use with SPA index.html files is an included js script (generated by the server) that handles custom configuration.



0 Votes 0 ·

1 Answer

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @DarrellTunnell-7048,

Please check this document: when control the <head> content in ASP.NET Core Blazor apps, the new component is appended to the existing head contents instead of replacing the content. This allows the app to retain static head content in wwwroot/index.html without having to repeat the content in the app's Razor components.

136275-image.png

So, as the blog said, if you want to set the base path at runtime or depending on where we host. You can change it via JavaScript script.


If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion


image.png (13.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.