Is it possible to add Blazor WebAssembly without a Router and putting it inside an existing ASP.NET Core website?

Question

It's similar to this question: Include a Blazor Webassembly project into an existing ASP.NET Core project but my scenario is different:

• I already have an ASP.NET Core website https://www.example.com with many pages.

• I now want to add a page like Feature.cshtml at https://www.example.com/feature, which has content like this:

<!-- Other content: header, texts, etc -->

<app>
    Blazor app here
</app>

<!-- Other content: more text, footer, scripts, etc -->

The Blazor app does not need to know about the URL, I will just use it for nice Component features, similar to Web Component.

Can I achieve this? If possible, without a separte Blazor WebAssembly project but it's okay if I have to. Also would be great if I can host more than one app (at https://www.example.com/feature1 and https://www.example.com/feature2) on a website.

Answer 1

I have successfully add a Blazor WebAssembly app to an existing ASP.NET Core app. You can check the demo repository here on GitHub. I also wrote the detailed step-by-step instruction there.

Step-by-step guide

1. Setup a new Blazor WebAssembly App (B)

• Create a new Blazor WebAssembly App project, for example DemoBlazorInsideWeb.BlazorApp.

• Update your router in App.razor to show the Index page for all routes:

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <!-- Delete everything here -->
    </Found>
    <NotFound>
        <!-- Add this here -->
        <LayoutView Layout="@typeof(MainLayout)">
            <Index />
        </LayoutView>
    </NotFound>
</Router>

• Optionally delete @page in your Index.razor file so no URL can ever be routed to it. This is to prevent a route accidentally match it.

• Optionally delete index.html file in your wwwroot folder. However you may want to keep the content somewhere to copy its content later.

Note
You can still use Routing if you want to serve multiple apps on the same website (even though you have to pack all those apps inside this single project)

2. Setup your (existing) ASP.NET Core website (A)

• Add the Blazor project as Reference to your ASP.NET Core website project (A refers to or depends on B).

• Install Microsoft.AspNetCore.Components.WebAssembly.Server Nuget package:

dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Server

• In your app startup (Program.cs or Startup.cs), add app.UseBlazorFrameworkFiles() before app.UseStaticFiles():

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

• In order to debug WASM app, you need to:

  • Add app.UseWebAssemblyDebugging(); in Development environment:

    if (!app.Environment.IsDevelopment())
    {
        // Usually the template has this block
    }
    else // And you add this block
    {
        app.UseWebAssemblyDebugging();
    }
    

  • Add inspectUri property to your launchSettings.json file (you should find it in Properties folder). Add it to whichever profile you use, https and/or IIS Express:

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

3. Setup the new web (Feature) page

In the ASP.NET Core Razor Page that you want to add the Blazor app, you need to setup Blazor's content

• Add the HTML and Javascript content:

<!-- Other Razor code -->

<div id="app">
    <!-- Loading content before Blazor loads. You can copy it from index.html file -->
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<!-- Other Razor code -->

<!-- Add the script where relevant to your project -->
<script src="_framework/blazor.webassembly.js"></script>

• You should also refer to the Blazor's CSS file, or simply move its content to your own ASP.NET Core project:

<!-- You need to have Heads section in your Layout -->
@section Heads {
    <link rel="stylesheet" href="~/css/app.css" />
}