The HTML base element sets the URL against which relative URLs in a document are resolved. In a Blazor WebAssembly application hosted under /webassembly/, it establishes the root needed for navigation and routing. A missing slash in that root can leave the application broken. section 37.2.6
Hosting Blazor WebAssembly under /webassembly/
In BlazorWebAssembly/wwwroot/index.html, set `<base href="/webassembly/" />`. Keep both slashes. Match the path in BlazorWebAssembly.csproj with `<StaticWebAssetBasePath>/webassembly/</StaticWebAssetBasePath>`, while configuring the ASP.NET Core application to handle requests under /webassembly. The HTML base URL and static web asset path are separate settings; neither substitutes for the other. section 37.2.6
Navigation links must respect that root. `href="forms/create"` resolves to `/webassembly/forms/create`; `href="/forms/create"` instead points outside the URLs managed by this Blazor WebAssembly application. This distinction applies to navigation URLs, not routes declared with `@page`. section 37.3.2
Blazor Server also needs a base element specifying the application root. When controller views and Razor Pages use separate layouts, add `<base href="~/" />` to both layouts alongside the Blazor JavaScript reference. section 33.3.1
Listing 37.9 Setting the URL in the index.html file in the wwwroot folder of the BlazorWebAssembly project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
<title>BlazorWebAssembly</title>
<base href="/webassembly/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="BlazorWebAssembly.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"> </a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
The host-page listing places the base element beside relative stylesheet, icon and application asset URLs. section 37.2.6
