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? — agua from mars
– agua from mars, Commented Sep 3, 2020 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
– Paul, Commented Sep 4, 2020 at 18:57

Endy Tjahjono · Accepted Answer · 2020-09-05 12:16:24Z

9

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}"
    }
    }
}

answered Sep 5, 2020 at 12:16

Endy Tjahjono

24.5k24 gold badges92 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Efe Zaladin Over a year ago

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?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related