How to add Blazor Webassembly to an existing ASP.NET Core web app with .NET 7?

Question

Goal:

1. Existing ASP.NET Web app with .NET SDK 7 created with individual users as authentication option on new project wizard.
2. Add Blazor WebAssembly as SPA to be loaded on visiting a URL segment like {domain}/blazorApp
3. Components of Blazor WebAssembly are not intended to be embedded into ASP.NET views or pages.

What have I tried till now

1. Create a new project representing the "existing" ASP.NET Web app with .NET 7
2. Add another project Blazor WebAssembly without the hosting or authentication options in new project wizard.
3. Add reference to the Blazor project in the existing app
4. Add Microsoft.AspNetCore.Components.WebAssembly.Server nuget package to the existing project
5. Add <StaticWebAssetBaseBath>clientapp</StaticWebAssetBaseBath> to Blazor csproj
6. In Blazor project > wwwroot > index.html add <base href="/clientapp" /> and prefix all the paths of link href with "clientapp" as the URL segment for WASM
7. Add below to the existing project > Program.cs

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/clientapp"), app1 =>
{
   app1.UseBlazorFrameworkFiles("/clientapp");
   app1.UseRouting();
   app1.UseEndpoints(endpoints =>
   {
       //endpoints.MapControllers();
       endpoints.MapFallbackToFile("/clientapp/{*path:nonfile}", "/clientapp/index.html");
   });
   //app1.UsePathBase("/clientapp");
   app1.UseStaticFiles();
   app1.UseStaticFiles("/clientapp");
});

7. Also add app.UseWebAssemblyDebugging(); to the existing project > Program.cs

Source code on GitHub

Issue

Getting HTTP 404 not found error on doing the above steps, running the project and navigating to /clientapp.

Answer 1

Setting up the two projects is relatively simple. You're almost there. Sorting out the navigation can be a bit problematic!

Adding a WASM project is very simple.

1. Add a Web Assembly project to the solution - not Hosted.
2. Add the project as a dependency to the ASPNet Web project.
3. Add the following to the Web Project project file.

    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="7.0.4" />
    </ItemGroup>

4. Add the following Middleware to the Web Project Program.

app.UseHttpsRedirection();

app.UseBlazorFrameworkFiles();

app.UseStaticFiles();

5. Copy index.html from the WASM project to the web project Shared folder and rename to Wasm.cshtml.

6. Add the following to the top of the page.

@page "/wasm"
@{
    Layout = null;
}

7. Add a link in _Layout.cshtml. This provides navigation from the ASPNet web site to the WASM SPA.

            <li class="nav-item">
                <a class="nav-link text-dark" href="/Wasm">Blazor</a>
            </li>

7. Update Index in the WASM project.

@page "/Wasm"

<PageTitle>Index</PageTitle>

8. Update NavMenu in the WASM project.

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/">
                <span class="oi oi-plus" aria-hidden="true"></span>Server
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/wasm">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>

You should now be able to navigate between the projects.