Include a Blazor Webassembly project into an existing ASP.NET Core project

Question

When creating a new Blazor Webassembly project, there is a checkbox ASP.NET Core hosted where if selected will create three projects at once, a blazor webassembly project, an ASP.NET Core project, and a shared library project. When the ASP.NET Core project is run in Visual Studio, we can debug the blazor project as well as the ASP.NET Core project (put breakpoint, step, etc.). When the ASP.NET Core project is published, the blazor project is also included in the wwwroot folder.

I'm not interested in creating a new ASP.NET Core project. I want to include this blazor wasm project in my existing ASP.NET Core project so I can debug them together, publish them together like the checkbox above. How do I do that?

Does this answer your question? [How can I host ASP.NET API and Blazor Web Assembly like an JavaScript-SPA?](https://stackoverflow.com/questions/61011880/how-can-i-host-asp-net-api-and-blazor-web-assembly-like-an-javascript-spa) — agua from mars, Sep 03 '20 at 14:22
Cant you copy the stuff (controllers, models, views or whatever) from your existing asp.net core app to the new asp.net core project (the server side/hosted one for the blazor app). — Paul, Sep 04 '20 at 18:57

score 9 · Accepted Answer · answered Sep 05 '20 at 12:16

Add Microsoft.AspNetCore.Components.WebAssembly.Server nuget to the ASP.NET Core application.

Reference the Blazor WebAssembly application from the ASP.NET Core application.

<Project Sdk="Microsoft.NET.Sdk.Web">
<!-- ... -->
<ItemGroup>
    <!-- ... -->
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" />
</ItemGroup>

<ItemGroup>
    <!-- ... -->
    <ProjectReference Include="..\MyBlazorApp.csproj" />
</ItemGroup>
<!-- ... -->
</Project>

Edit the Startup file of the ASP.NET Core application:

Add UseWebAssemblyDebugging if running in development mode (see sample below).
Call the UseBlazorFrameworkFiles.
Add MapFallbackToFile("index.html") routing.

namespace MyApp
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                // ...
                app.UseWebAssemblyDebugging();                  // this
            }

            // ...
            app.UseBlazorFrameworkFiles();                      // this

            app.UseEndpoints(endpoints =>
            {
                // ...
                endpoints.MapFallbackToFile("index.html");      // this
            });
        }
    }
}

Then edit the launchSettings.json, add inspectUri like so:

{
    // ...
    "profiles": {
    "IIS Express": {
        // ...
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    },
    "MyApp": {
        // ...
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    }
    }
}

This solution doesn't seem to be working with the currently available versions of Microsoft.AspNetCore.Components.WebAssembly.Server. The basic problem is that UseBlazorFrameworkFiles doesn't exist anymore, and I can't find any docs on what to use instead. Do you have any idea how to make it work? — Efe Zaladin, Aug 15 '21 at 13:58

Include a Blazor Webassembly project into an existing ASP.NET Core project

1 Answers1

Linked