How do I add a Blazor WebAssembly project to an existing ASP.NET Core application?

Follow these steps to add a Blazor WebAssembly project to an existing ASP.NET Core application:

1. Create a ASP.NET Core application and Blazor WebAssembly application separately.

2. Install the Microsoft.AspNetCore.Components.WebAssembly.Server NuGet package in the ASP.NET Core application and add the Blazor WebAssembly application project reference to the ASP.NET Core application.
   [AspNetCoreApp.csproj]
   

   <Project Sdk="Microsoft.NET.Sdk.Web">
       <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="7.0.0" />
      </ItemGroup>
     
      <ItemGroup>
        <ProjectReference Include="..{Your Blazor App Path}" />
      </ItemGroup>
     
    </Project> 

3. Add the following configurations the Program.cs file in the ASP.NET Core app to include Blazor WebAssembly.
   [Program.cs]
   

   ....
   if (!app.Environment.IsDevelopment())
   {
   	app.UseWebAssemblyDebugging();
   	 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.MapFallbackToFile("index.html"); 
   //app.MapRazorPages(); // Remove this line. 
   app.Run(); 
   

4. To avoid conflicts during publishing between WebAssembly and ASP.NET Core applications, it is necessary to delete the favicon.ico file. By default, both projects create a favicon.ico file, which can lead to conflicts. To resolve this, remove one of the favicon.ico files from the project.

Refer to this link for more information. 

View Sample in GitHub