Incorrect CSS import created when hosting multiple WASM apps not at root

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

This is a continuation of this old issue here: #41625

After following this guide: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/multiple-hosted-webassembly?view=aspnetcore-7.0

I tried to modify the Blazor WASM clients so they can be hosted under different routes, rather than on different ports.

For example: https://localhost:5001/app1 https://localhost:5001/app2

Instead of:
https://localhost:5001 https://localhost:5002

The issue is that when using different routes for the apps, the CSS bundling still creates an import for the shared RCL Style Sheet with a path to root, which is invalid and results in a 404 that pollutes analytics like Application Insights.

Should the bundling logic be aware of the middleware configuration and update the CSS import path accordingly?

Expected Behavior

Either the CSS bundling should not import RCL styles when hosting multiple WASM clients, or the bundling should use the correct path.

Steps To Reproduce

I have a PR here with examples of both methods, route based is on main, port based on the UsingPorts branch: https://github.com/philip-reed/BlazorHostedWithMultipleClients/pull/1

Exceptions (if any)

Unexpected 404 Not Found

.NET Version

7.0.202

Anything else?

No response

[javiercn]

@philip-reed thanks for contacting us.

I suggest you use https://github.com/javiercn/BlazorMultipleApps as a reference point. That is up to date with .NET 7.0 and I know it works.

The CSS imports are correct, what is likely happening is that you have not correctly setup the combination of UsePathBase, UseStaticFiles, base path and StaticWebAssetsBasePath in your app.

It’s really hard for me to point out what is going on just by looking at your code, so I suggest you take the sample I provided as a reference to understand the details and make it work for your app.

[guardrex]

@philip-reed … After you opened this, I reached @javiercn’s doc issue mentioning that he made changes to his sample and that I should confirm that all was well with our topic on this subject at …

https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/multiple-hosted-webassembly

A couple of things came about …

• I also can’t get your, @javiercn, sample app to run here with the same 💥 404 for the 2nd client that @philip-reed reported. I reported it on the issue at https://github.com/dotnet/AspNetCore.Docs/issues/29043#issuecomment-1530035513.
• I have my own 🦖 approach for subpath routing to multiple client apps … and I know how 👻 SCARY 🎃😨 that sounds!!! … but … it seems to work ok for initial coverage. Usually, we try to keep the 🦖 hacks OUT of the docs 😆, but this is working well enough at the moment that we can roll with it until a serious problem is found. I plan to ask @javiercn if he has time closer to EOY just before or after .NET 8 releases to review it. We’ll either go with it, change it, or use his approach. He and I aren’t too far apart, and you can read about the deltas between his approach and mine in my opening PR comment at https://github.com/dotnet/AspNetCore.Docs/pull/29142. As you said, @philip-reed, the article only covered domain/port hosting. Now, the article has a Route subpath hosting pivot with my 🦖 RexHacked!™ 🦖 approach. Until we reach a point that @javiercn gets time to look, I’m taking feedback on that guidance.

Soooooooo … Can you check the guidance on that new pivot of the article and see if it works for you? AFAICT, the CSS styles are bundling properly and everything seems to be running ok 🤞🍀.

If you detect a problem with that new coverage, can you open a new issue from the This page feedback form at the bottom of the article for me? We’ll take investigation forward from there. Otherwise if it works for you, you can shoot back a confirmation message here 👂.

Here’s what I had with my test app this morning for the two client apps when I added the RCL to the solution. The first Jeep images are in each client app’s wwwroot folder, numbered 1 and 2 to make sure the correct image is drawn into each client app’s Index component. Next, the RCL supplies a component with an image from the RCL’s wwwroot folder. Next, the image is drawn directly into the Index component of each client app using the RCL content path (<img src="_content/ComponentLibrary/jeep-yj-early.jpg" alt="Jeep YJ" />). Bundled styles seem ok. Counter components count 🍻, and FetchData components fetch 🍻. 👍 so far!