Live Chat Icon For mobile
Live Chat Icon

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

Platform: Blazor| Category : General, WebAssembly

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="3.2.0" />
      </ItemGroup>
     
      <ItemGroup>
        <ProjectReference Include="..\BlazorWasmApp\BlazorWasmApp.csproj" />
      </ItemGroup>
     
    </Project>

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

    public class Startup
    {
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
           if (env.IsDevelopment())
           {
                        app.UseWebAssemblyDebugging();
           }
        
                 app.UseBlazorFrameworkFiles();
          app.UseEndpoints(endpoints =>
          {
              endpoints.MapFallbackToFile("index.html");
                    });
          }
    }

  4. Add inspectUri in the ASP.NET Core app launchSettings.json file.
    [launchSettings.json]

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


View Sample in GitHub

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.