Move Blazor WASM to subdirectory (base directory static files)

Question

I want to make an app where I need static pages on the base domain and my Blazor app on a subdirectory.

Example:

https://example.com is where my static pages should be (like '/features' or '/pricing' or '/faq')

https://example.com/app should be where my blazor website lives.

I've seen that I can pass in a PathString to app.UseBlazorFrameworkFiles but that does not work (app.UseBlazorFrameworkFiles(new PathString("/app")). My Blazor app is hosted on a .NET 5 WebApi project with gRPC.

Can someone point me to the right direction how to achieve this?

Thanks in advance!

Did you put `` in your Index.html? https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-3.1&tabs=visual-studio#app-base-path — Brian Parker, Nov 17 '20 at 11:16
Hi @BrianParker, yes I did. I've added `' to `Client/wwwroot/app/index.html` which contains the `
...` and loads the `blazor.webassembly.js` file. — Coupz, Nov 17 '20 at 12:22

Daz · Answer 1 · 2021-03-12T09:20:43.227

The subdirectory name needs to appear in four places.

In the Startup.cs of your WebAPI project you need:

app.UseBlazorFrameworkFiles(new PathString("/app"));

and in endpoint config:

endpoints.MapFallbackToFile("/app/{*path:nonfile}", "app/index.html");

In the wwwroot/index.html file of the Wasm app:

<base href="/app/" />

In the CSProj file of the Wasm app:

<StaticWebAssetBasePath>app</StaticWebAssetBasePath>

Docs: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#hosted-deployment-with-multiple-blazor-webassembly-apps

There's an example implementation here: https://github.com/javiercn/BlazorMultipleApps

If you have used the default Wasm template with Identity you'll find your client doesn't load properly because the static assets bundled inside microsoft.aspnetcore.components.webassembly.authentication aren't served up. To work around this change the src in index.html to an absolute path:

<script src="/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

Other changes required for Identity to function:

In AppSettings, change the IdentityServer client profile from "IdentityServerSPA" to "SPA"
Specify "RedirectUri" and "LogoutUri" to include the new subdirectory

      "Clients": {
        "BlazorApp.Client": {
          "Profile": "SPA",
          "RedirectUri": "https://localhost:44357/app/authentication/login-callback",
          "LogoutUri": "https://localhost:44357/app/authentication/logout-callback"
        }
      }

The fifth place, add `app.UseStaticFiles("/app");` to `startup.cs`. Or some static files may 404. — Jim, Jun 12 '21 at 10:16
If you want to host multiple Wasm apps from one server, there's a walkthrough at https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#hosted-deployment-with-multiple-blazor-webassembly-apps which also lists all the places you need to adjust the paths. — Daz, Jun 16 '21 at 09:54

score 3 · Answer 2 · answered May 10 '21 at 09:47

I've looked at the answer from Daz, which does fix the problem when debugging/running a standalone product. My production environment is Kubernetes based however, and my ingress controller wouldn't route the request to the correct location e.g:

In my example, I have changed the usual 4 settings:

set the <base href> in the index file to <base href="/app/" />
set app.UseBlazorFrameworkFiles(new PathString("/app")) in the servers ConfigureServices function
set endpoints.MapFallbackToFile("/app/{*path:nonfile}", "app/index.html") in the servers Configure function, UseEndpoints option
added <StaticWebAssetBasePath>app into the client's <PropertyGroup> section of the csproj file.

Everything was working barring the single file "Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js" which is an embedded file.

Since the file needs to come from the server, adjusting the file path in the client won't work, because it wouldn't be correctly routed by my ingress configuration. For my application, I dropped in a very simple middleware as follows:

        // "/{app}/_content/{embedded-library-files}/{file}" requests need to be presented at root
        app.Use(async (context, next) =>
        {
            HttpRequest request = context.Request;
            var path = request.Path;
            if (path.StartsWithSegments(new PathString("/app/_content")))
            {
                if (new string[] {
                    "/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"
                }.Any(s => path.Value.EndsWith(s)))
                {
                    request.Path = path.Value.Substring("/app".Length);
                }
            }

            await next.Invoke();
        });

You'd need an if clause for each folder, and an entry in the list for each file. Obviously this can be simplified if you know that the whole folder should be redirected.

Since rewriting the path in the server is invisible to the client application, this simple update fixes the problem.

Mark

Move Blazor WASM to subdirectory (base directory static files)

2 Answers2