Locally Host Blazor WASM in a Subsite (base href)

If you’re like me you’ve been toiling away on a new Blazor project, everything is working perfectly locally and then you realise it’s going to be deployed as a subsite in prod.

This is easy enough to do just be warned this does seem a bit fragile, once you have it working step away slowly and never touch it again 🙂

First up in your client project change the base href tag in your index.html file.

<base href="/mynewbase/" />

Next just into launchSettings.json and configure the following lines, pay particular attention to the slashes, some paths have them and some don’t.

"launchUrl": "mynewbase",
"commandLineArgs": "--pathbase=/mynewbase",
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/mynewbase/_framework/debug/ws-proxy?browser={browserInspectUri}",

At this point you should be able to run and launch straight to your new url, handy for testing routing issues before deploying to prod.

Blazor WASM setting the base href

ASP.Net hosted clients

If your client app was created with the ASP.Net hosted option, you need to also update the server project. Edit your Startup.cs and add the following above the UseHttpsRedirection() call.

app.UsePathBase("/mynewbase");  //<-- just this line
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

Now edit your server project launchSettings.json and add the new launch url.

"launchUrl": "mynewbase",

Depending on how you’re spinning up you HttpClient in your client project you may have to adjust the base address, if you’re using the default builder.HostEnvironment.BaseAddress you don’t need to do anything else as the base address will now contain the /mynewbase at the end.

Things to check

  • As always with WASM projects make sure you hard reload your browser with Ctrl + F5 to be sure you’re running the latest version and all the static files (css and index.htlm) have reloaded properly!
  • You’re base url has now changed so the callback url in your Authentication source will likely need to be updated.
  • Check your internal page routing, be careful not to use href=”/somepath” as that will not honour your new base href tag.

Leave a Reply

Your email address will not be published.