Multiple hosted Blazor apps get 404 error on blazor.webassembly.js

[fuzl-llc]

Describe the bug

I'm trying to create a Razor pages app with multiple Blazor "sub apps" at urls like /app1 and /app2. Everything works fine locally when debugging in Visual Studio but when I publish and try to run locally using the dotnet command (or when I try to host behind an Nginx reverse proxy) I get a 404 error for _framework/blazor.webassembly.js.

Thanks for any help you can offer.

To Reproduce

Below are my steps and the simplest possible repro is at the following public repo:

https://github.com/fuzl-llc/MultipleHostedBlazorApps

In Visual Studio 2019, created project MultipleHostedBlazorApps with default .NET 5.0 "Blazor WebAssembly App" template. Deselected "Configure for HTTPS" and checked "ASP.NET Core hosted."
Checked in.

Added second client project called "Client2" with HTTPS and ASP.NET Core Hosted unchecked.
The project, MultipleHostedBlazorApps.Client2, was put in a "Client2" folder next to the existing "Client" folder.
Checked in.

Deleted all IIS references from all three project's launchSettings.json. Left server app to run on port 5000, updated client and client 2 to run on ports 5001 and 5002, respectively. In retrospect I don't think this matters as all projects load under the host app's port 5000...

Updated Blazor apps index.html files to have <base href="/app1/" /> and <base href="/app2/" /> for client and client2 (and matching page titles).

Started getting: Conflicting assets with the same path '/wwwroot/css/app.css' for content root paths error (but below actions fix it).

Changed each Blazor app's project file to include:
<StaticWebAssetBasePath>app1</StaticWebAssetBasePath> (and <StaticWebAssetBasePath>app2</StaticWebAssetBasePath>)
in the top property group under <TargetFramework>net5.0</TargetFramework>

In main host app's startup file, mapped both Blazor apps using a new extension method called "MapBlazorApp" which uses "MapWhen" to set up each Blazor app to be loaded at "sub app urls" of the main host app, at /app1 and /app2 of the main host app. This does things like UseBlazorFrameworkFiles passing in the new paths - see code for details.

Added an "index" Razor page to the host app with links to the two sub apps. Added links in both Blazor "sub apps" to each other and the host app main page, updated both app's index page title to show which app they are.

We can now run the app, see both apps working, and click between them.

Checked in.

This seems to be "success" as everything works beautifully when running locally in Visual Studio. The problems come now when I try to deploy... So, we right click and publish the host app. As part of this we change the default folder profile path from bin\Release\net5.0\publish\ to "C:\Temp\Multi." In that path we then see, under C:\Temp\Multi\wwwroot, folders like app1, app1_framework, app1app1, app1css which at first seems to make sense e.g. the prefix to distinguish framework files but the app1app1 folder seems a bit strange.

I can run the following successfully:

C:\Temp\Multi>dotnet MultipleHostedBlazorApps.Server.dll --urls http://localhost:5000

Everything appears great at first - I see the host app homepage with links to the two sub apps and when I click them I see the standard Blazor "Loading..." message but when I look in Chrome dev tools > Network, I see that http://localhost:5000/app1/_framework/blazor.webassembly.js gets a 404 "Not Found" error and the app never loads. The same thing happens for http://localhost:5000/app2/_framework/blazor.webassembly.js. All other static files seem fine, such as http://localhost:5000/app1/css/bootstrap/bootstrap.min.css and other .css files. If I search for blazor.webassembly.js I find it exists under app1_framework and app2_framework (as well as other versions with .br and .gz extensions appended).

Ultimately I'm trying to host this on Ubuntu via Nginx reverse proxy where I'd set up a config something like this:

server
{
listen 443 ssl;
server_name test.com;
ssl_certificate /etc/letsencrypt/live/test.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/test.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

location /
{
    proxy_pass         http://localhost:5000;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection keep-alive;
    proxy_set_header   Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
}
# works except _framework/blazor.webassembly.js gets returned as the HTML of the root of the site:
location /app1 {
    root /var/www/test.com/wwwroot;
    try_files $uri $uri/ /app1/index.html;
}

location /app2 {
    root /var/www/test.com/wwwroot;
    try_files $uri $uri/ /app2/index.html;
}

}
server
{
listen 80;
server_name test.com;
return 301 https://$host$request_uri;
}

It seemed to work similarly where all static (html, css) files work but the blazor.webassembly.js file gives a 404.

How get I get this blazor.webassembly.js file to load properly using (1) the dotnet command locally and (2) hosting behind an Nginx reverse proxy?

Exceptions (if any)

Just a 404 error that blazor.webassembly.js cannot be found.

Further technical details

• ASP.NET Core version:

5.0.101

• Include the output of dotnet --info

.NET SDK (reflecting any global.json):
Version: 5.0.101
Commit: d05174dc5a

Runtime Environment:
OS Name: Windows
OS Version: 10.0.18363
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\5.0.101\

Host (useful for support):
Version: 5.0.1
Commit: b02e13abab

.NET SDKs installed:
3.1.301 [C:\Program Files\dotnet\sdk]
3.1.400 [C:\Program Files\dotnet\sdk]
5.0.101 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.0-rc.1.20451.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

• The IDE (VS / VS Code/ VS4Mac) you're running on, and its version
  Visual Studio 2019 v16.8.3

[ejhg]

Sanity check: What directory are you mapping to /var/www/test.com/wwwroot? Is it the wwwroot from your repo? If so, the _framework files won't be there. It needs to be the wwwroot from within the publish directory in your output bin.
Never mind, I see you mention the files are present in the directory.

[fuzl-llc]

Thanks for the reply. I just saw you update your response as I was replying but it made me find some more info. The _framework files are not there where it is trying to load from. The issue seems like it might be in the publish step... if I take the app1_framework folder and copy it into the app1 folder and rename it to just _framework then that blazor.webassembly.js in it does get found. However, it there are two issues:

1. I have a perfectly working app when I run in Visual Studio and then just do a standard "publish to folder" operation and it seems like it ought to just put things in the right place... I'm happy to learn if I'm doing something wrong but this part seems to maybe be a bug.
2. Even though blazor.webassembly.js loads with these steps, we then get a new file requested that doesn't load: http://localhost:5000/app1/_framework/undefined

That "undefined" request just seems weird, again, like something is just wrong in the publish process.

[ejhg]

(FYI: I'm just a community developer like you. I don't use Visual Studio...)

I prefer to use the command line. Try this command, it will be much cleaner:

# To be sure: Clean up the bin and obj directories first.  On Linux it would be like this
rm -rf bin obj

# Run this (Should work on Windows too)
dotnet publish -c Release

# The output that you want will be within `/bin/Release/net5.0/publish/wwwroot`.  
# CAUTION: Do not use `/bin/Release/net5.0/wwwroot` (without `publish`) which 
# is also found within the `bin`.  The assemblies in the other directory are not fully 
# processed/trimmed.

[fuzl-llc]

Note: the publish process creates "app1_framework," "app1app1," "app1css," and "app1sample-data" as part of the publish. They are created alongside the "app1" folder. It seems like those are just "off" by a slash, i.e. "app1_framework" was placed in the same folder as "app1" but was really meant to be a "_framework" folder placed inside the "app1" folder. From the working app in Visual Studio, all I did was a standard right-click publish and those are the output locations that resulted.

Just saw your latest comment, thanks. My above is based on a Visual Studio publish but let me try your suggestion now...

[ejhg]

I wonder where the "app1" prefix is configured. Maybe it's configured within the *.csproj file? Check that file. If so, maybe you can simply add a slash to fix it.

[ejhg]

Yeah, I see it in your *.csproj file. Try changing

 <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>

to

<StaticWebAssetBasePath>app1/</StaticWebAssetBasePath>

[fuzl-llc]

Yeah, I've tried every combination of putting slashes before and after that and those all seem to cause the app to fail when I run/debug the app in Visual Studio. It seems to require slashes to exist or not exist in very specific ways for the "map Blazor files" stuff to work. I've got all those right so it builds and runs in VS, so not sure why it would then not create the correct build output.

[fuzl-llc]

Let me try that... I think I did at one point... but let me try again.

[fuzl-llc]

When I do that, it builds in VS but I get a 404 when I navigate to the app at /app1/.

[ejhg]

I haven't used StaticWebAssetBasePath myself, but I was frustrated with similar issues. I just opened and closed #29180 after learning about StaticWebAssetBasePath from you.

Maybe the whole thing is just buggy? [shrug]

Let's see what others say.

My recommendation is this: Focus on getting the directory structure right before bringing Nginx into the picture. Otherwise you will walk in circles. I personally test my local static directories with serve (https://www.npmjs.com/package/serve). I simply run serve [specify directory here] and the static website should just work. Make sure it works with the subdirectories you expect. Once you get that working, you can mess with Nginx, but then it's not a dotnet issue :)

[ejhg]

I get a 404 when I navigate to the app at /app1/

Try going to /app1/index.html. Sounds like your file server is not automatically mapping 404s to index.html. I think serve will handle that part for you.

[fuzl-llc]

If I do the publish command you mention above from the solution directory, it publishes and completes fine but there is no _framework folder anywhere to be found anywhere under bin\Release\net5.0\publish (nor any of the weird app_framework folders). It has app1 and app2 folders and those have some static (e.g. index.html and css files etc.) but none of the _framework stuff or actual dlls from the Blazor apps.

[ejhg]

You did include the -c Release part, right? Is there a Debug folder? Make sure we are not mixing those up. And to be triple sure, you did delete the folders before the build, right?

Look at the command line output. What directories is it writing files to? The command line never lies :)

[fuzl-llc]

Yes, I had the -c Release - copied directly from your comment. Yes, I deleted everything and did a "Clean solution" in VS. There is a debug folder but it has no "publish" in it - just BlazorDebugProxy and ref folders and no other files. Cleared it out again, there are no debug folders. Ran it again and confirmed command line output is to \Server\bin\Release\net5.0\publish\

[fuzl-llc]

Regarding getting it working locally, yes, I totally agree - my original post really comments on two issues. First is that I have it running in VS, then just publish and run with dotnet command locally using Kestrel, and that doesn't work due to the 404. I'm mainly focused on that now - the Nginx thing I suspect will just work once I get it working locally.