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

4
votes

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?

1
blazorblazor-webassembly
Does this answer your question? How can I host ASP.NET API and Blazor Web Assembly like an JavaScript-SPA? – agua from mars
stackoverflow.com/a/61012208/2940908 – agua from mars
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

1 Answers

6
votes

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

  2. 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>

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

    1. Add UseWebAssemblyDebugging if running in development mode (see sample below).
    2. Call the UseBlazorFrameworkFiles.
    3. 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
            });
        }
    }
}

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