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

Question

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

Darrell Tunnell 6

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?

Darrell Tunnell 6 Reputation points

2021-09-28T15:25:19.71+00:00

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.
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2021-10-03T15:32:35.04+00:00

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.

1 answer

Your answer

Darrell Tunnell 6 Reputation points

2021-09-28T15:25:19.71+00:00

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.
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2021-10-03T15:32:35.04+00:00

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.

Answer 1

Hi @Darrell Tunnell ,

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.

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

Share via

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

1 answer

Your answer