Getting 404 NotFound for blazor.webassembly.js (_framework files not found)

Question

We have searched other issues along this line, and found that they seem to apply to after a site is deployed. This happens within VS 2019 when trying to debug. The things we have checked so far include:

The applicationhost.config which appears to be correct, the virtual directory path is indeed where the "client" app is rooted and the wwwroot folder is a subfolder of the physical path.

 <site name="Eclypses.MTE.Protoype.Server" id="8">
    <application path="/" applicationPool="Eclypses.MTE.Protoype.Server AppPool">
      <virtualDirectory path="/" physicalPath="D:\git_src\mteutils_dotnetcore\eclypses-commander-prototype\Eclypses.MTE.Prototype\Client" />
    </application>
    <bindings>
      <binding protocol="http" bindingInformation="*:50413:localhost" />
    </bindings>
  </site>

We log an info message at the server startup and it does indeed appear in our log files.

The launchsettings.json file for the client is:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:50413",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "use64Bit": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    },
    "Eclypses.MTE.Prototype": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    }
  }
}

and the launchsettings.json file for the server is:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:50413",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "use64Bit": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    },
    "Eclypses.MTE.Prototype.Server": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    }
  }
}

We changed the sslPort on both to "0" by un-checking the "Enable SSL" checkbox on the property pages. (We tried with SSL and got the same error).

We also commented out the line in the server startup class:

// app.UseHttpsRedirection();

so we should be running a pure http environment in VS 2019 (which is currently at version 16.8.5).

Finally, we ensured that both the client and the server are using the latest versions of the appropriate NuGet packages: Client:

<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="5.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.3" PrivateAssets="all" />
<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />

Server:

  <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.3" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="5.0.3" />
    <PackageReference Include="Microsoft.IdentityModel.Tokens" Version="6.8.0" />
    <PackageReference Include="Serilog.AspNetCore" Version="3.4.0" />
    <PackageReference Include="Serilog.Enrichers.Thread" Version="3.1.0" />
    <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.8.0" />
    <PackageReference Include="System.Runtime.Caching" Version="5.0.0" />

The csproj files use the following Sdk and Framework {On the client we tried both Sdks with the same result). Client:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<!--Project Sdk="Microsoft.NET.Sdk.Web"-->
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
</Project>

Server:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
</Project>

The Startup Class for the server configures in the following order:

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();
    // app.UseHttpsRedirection();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("index.html");
    });

The Program.cs class for the client configures in the following order:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");

builder.Services
    .AddBlazoredModal()
    .AddOptions()
    .AddAuthorizationCore()
    .AddSingleton<ISessionStorageService, SessionStorageService>() // Wrapper around javascript session storage methods
    .AddScoped<IAuthService, AuthService>() // Wrapper around API calls to server to authenticate a login
    .AddScoped<AuthenticationStateProvider, MyWebAuthenticationStateProvider>() // Creates a user principal
    .AddSingleton<StateContainer>();  // Wrapper around some local "state" values

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

After researching multiple posts, the above things are what we felt we needed to check. They look correct from what we understand, yet we still get a 404 loading anything from the _framework and _content folders and more importantly the "blazor.webassembly.js" file just is not there?!?!?

When we start a debug session, an icon appears in VS for "Script Documents" and within it is an icon for "localhost:50413/js/sessionStorage.js" so, it appears that the wwwroot is found by the runtime, but there is no "_framework" or "_content" folders, so it cannot load my blazor WASM file. This icon goes away when we kill the debug session.

Also, if we view the network tab in Chrome, we see the contents of the wwwroot file downloaded with a "200", but the blazor.webassembly.js (which should be in _framework) gets a 404.

Any guidance here is appreciated, the basic question is "Why are we getting the "404" for _framework and _content files?

Answer 1

Make sure your Server includes a project reference to your Client. Also make sure your client's csproj file uses

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

Answer 2

Had experienced this before when I ported my WASM app .NET 5 to .NET 6. Ensure you updated your Microsoft.AspNetCore.Components.WebAssembly and all other related packages to the latest version.

Answer 3

this works for me

Open Uptades tab and update 2 packages: Microsoft.AspNetCore.Components.WebAssembly, Microsoft.AspNetCore.Components.WebAssembly.DevServer.

if this packages are not installed, install them.

https://blazorschool.com/tutorial/blazor-wasm/dotnet5/update-from-dotnet-5-to-dotnet-6-682674