Published hosted Blazor wasm app only shows Loading

Question

I would like to publish a hosted Blazor WASM application and run the generated.exe locally for test purposes. To do this with the standard blazorwasm template I have tried the following steps:

dotnet new blazorwasm --hosted
dotnet publish -c Release

Then I have started the generated server.exe file. When I now open http://localhost:5001 in the browser it just displays "Loading...", but never loads the blazor application. There is also no console output from the server. Did I misunderstand how this is supposed to work?

Answer 1

Run the 'dotnet publish -c Release' on the /Server folder.

Running it at the solution level does not produce the wasm files in the publish folder, or they are somehow cleared out...

Solution Publish

PS C:\Users\u0\Desktop\Blazor> dotnet publish -c Release
Microsoft (R) Build Engine version 16.8.3+39993bd9d for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  All projects are up-to-date for restore.
  Blazor.Shared -> C:\Users\u0\Desktop\Blazor\Shared\bin\Release\net5.0\Blazor.Shared.dll
  Blazor.Shared -> C:\Users\u0\Desktop\Blazor\Shared\bin\Release\net5.0\publish\
  Blazor.Client -> C:\Users\u0\Desktop\Blazor\Client\bin\Release\net5.0\Blazor.Client.dll
  Blazor.Client (Blazor output) -> C:\Users\u0\Desktop\Blazor\Client\bin\Release\net5.0\wwwroot
  Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
  Compressing Blazor WebAssembly publish artifacts. This may take a while...
  Blazor.Client -> C:\Users\u0\Desktop\Blazor\Client\bin\Release\net5.0\publish\
  Blazor.Server -> C:\Users\u0\Desktop\Blazor\Server\bin\Release\net5.0\Blazor.Server.dll
  Blazor.Server -> C:\Users\u0\Desktop\Blazor\Server\bin\Release\net5.0\Blazor.Server.Views.dll
  Blazor.Server -> C:\Users\u0\Desktop\Blazor\Server\bin\Release\net5.0\publish\

Server Project Publish

PS C:\Users\u0\Desktop\Blazor\Server> dotnet publish -c Release
Microsoft (R) Build Engine version 16.8.3+39993bd9d for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  All projects are up-to-date for restore.
  Blazor.Shared -> C:\Users\u0\Desktop\Blazor\Shared\bin\Release\net5.0\Blazor.Shared.dll
  Blazor.Client -> C:\Users\u0\Desktop\Blazor\Client\bin\Release\net5.0\Blazor.Client.dll
  Blazor.Client (Blazor output) -> C:\Users\u0\Desktop\Blazor\Client\bin\Release\net5.0\wwwroot
  Blazor.Server -> C:\Users\u0\Desktop\Blazor\Server\bin\Release\net5.0\Blazor.Server.dll
  Blazor.Server -> C:\Users\u0\Desktop\Blazor\Server\bin\Release\net5.0\Blazor.Server.Views.dll
  Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
  Compressing Blazor WebAssembly publish artifacts. This may take a while...
  Blazor.Server -> C:\Users\u0\Desktop\Blazor\Server\bin\Release\net5.0\publish\

Answer 2

Try to use F12 developer tools to check the website, you can see that, the framework/blazor.webassembly.js doesn't load successfully:

 dotnet new blazorwasm --hosted

The issue is relats that, by using the above command, it will create a multiple Blazor WebAssembly app, the solution contains three projects, like this:

Then, if you use dotnet publish -c Release to publish the web apps, the published file will be located in the /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot folder (In the Blazor.client and Blazor.Server projects). Then, if you run the Blazor.Server.exe file, the Content root path is Server folder, and the blazor.webassembly.js file is in the Client folder, so it causes the blazor.webassembly.js file doesn't load successfully. Like this:

To solve this issue, you could try to assign an output directory when publish the web apps:

For example: In the E:\Temp\Blazor folder, I'm using the following command to create web apps, and publish the web app to the Publish folder.

dotnet new blazorwasm --hosted
dotnet publish -c Release -o E:\Temp\Blazor\Publish

After that, in the Publish folder, it contains all published files. Running the Blazor.Server.exe , the output as below: