CODEWITHSUNDEEP
blazorblazor-webassembly
Endy Tjahjono
Endy Tjahjono

Reputation: 24450

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

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?

Upvotes: 7

Views: 2525

Answers (1)

Endy Tjahjono
Endy Tjahjono

Reputation: 24450

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

Upvotes: 9

Related Questions