Add client-side Blazor to existing Asp.Net Core 3.1 App

Question

I'm trying to render a client-side Blazor App in a view of a controller of an existing Asp.Net Core 3.1 App.

I started following this guide and I created an empty app from the template. I found out that what I need is:

1. These nuget packages:

   <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.2.0-preview1.20073.1" />
   <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.2.0-preview1.20073.1" PrivateAssets="all" />
   <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.2.0-preview1.20073.1" PrivateAssets="all" />
   <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview1.20073.1" />
   

2. This code in Program.Main:

   var builder = WebAssemblyHostBuilder.CreateDefault(args);
   builder.RootComponents.Add<App>("app");
   await builder.Build().RunAsync();
   

3. This HTML code in the View for the Blazor App 'entry point':

   <app>Loading...</app>
   
   <div id="blazor-error-ui">
       An unhandled error has occurred.
       <a href="" class="reload">Reload</a>
       <a class="dismiss">????</a>
   </div>
   <script src="_framework/blazor.webassembly.js"></script>
   

4. The .razor components:
   • App.razor
   • _Imports.razor
   • Shared/MainLayout.razor
   • Shared/NavMenu.razor

This should be it, but I get the error (can add full stack trace if you need):

---> Mono.Cecil.AssemblyResolutionException: Failed to resolve assembly: 'Microsoft.AspNetCore.Mvc.Razor, Version=3.1.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'

Where can I find that nuget package version? Do I need an assembly binding? I tried without success with:

<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.0" />

EDIT

Adding the following packages solved that issue:

<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.2.0" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor" Version="2.2.0" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.RazorPages" Version="2.2.0" />
<PackageReference Include="Microsoft.AspNetCore.Authentication" Version="2.2.0" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.2.0" />

But now I have a different error:

C:\Program Files\dotnet\sdk\3.1.101\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\Microsoft.NET.Sdk.Razor.Component.targets(106,5): error : rzc generate exited with code 1.

And Visual Studio (16.4.4) crashes as soon as I open any .razor file

Answer 1

Add the following packages in your project :

<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.2.0-preview1.20073.1" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.2.0-preview1.20073.1" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview1.20073.1" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.2.0-preview1.20073.1" />

In your Startup.Configure method add:

app.UseClientSideBlazorFiles<BlazorApp.Program>()
   .UseEndpoints(endpoints =>
   {
       endpoints.MapFallbackToClientSideBlazor<BlazorApp.Program>("blazor");
   });

Where "blazor" is the relative uri to your razor view hosting the blazor app.
and BlazorApp.Program the type of your blazor app Program

If you want it in 2 separates projects then the Blazor app project must have those packages :

<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.2.0-preview1.20073.1" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.2.0-preview1.20073.1" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.2.0-preview1.20073.1" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview1.20073.1" />

and the server project this one :

<PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.2.0-preview1.20073.1" />