Blazor WebAssembly 3.2.0 Preview 1 is now available

• Version updated to 3.2.
• Simplified launch
• Download Size Improvements
• .NET SignalR Client Support

Start

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

Update existing project

• Update all links to Microsoft.AspNetCore.Blazor * packages to 3.2.0-preview1.20073.1.
• In  Program.cs  in the Blazor WebAssembly client project, replace  BlazorWebAssemblyHost.CreateDefaultBuilder() with  WebAssemblyHostBuilder.CreateDefault().
• Move the root component registrations in the Blazor WebAssembly client project from  Startup.Configure to  Program.cs by  calling  builder.RootComponents.Add<TComponent>( ).
• Blazor WebAssembly  Startup.ConfigureServices  Program.cs   builder.Services.
•  Startup.cs  Blazor WebAssembly client project.
• Blazor WebAssembly ASP.NET Core,  Server   app.UseClientSideBlazorFiles<Client.Startup>(...)  app.UseClientSideBlazorFiles<Client.Program>(...).

3.2

Simplified launch

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync();

        await host.RunAsync();
    }
}

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync(host.Configuration["WeatherServiceUrl"]);

        await host.RunAsync();
    }
}

Download Size Improvements

.NET SignalR Client Support

1. Create a Blazor WebAssembly application hosted on ASP.NET Core.
   
   

   dotnet new blazorwasm -ho -o BlazorSignalRApp

2. Add the ASP.NET Core SignalR client package to the Client project .
   
   

   cd BlazorSignalRApp
   dotnet add Client package Microsoft.AspNetCore.SignalR.Client

3. In the Server project, add the following Hub / ChatHub.cs class .
   
   

   using System.Threading.Tasks;
   using Microsoft.AspNetCore.SignalR;
   
   namespace BlazorSignalRApp.Server.Hubs
   {
       public class ChatHub : Hub
       {
           public async Task SendMessage(string user, string message)
           {
               await Clients.All.SendAsync("ReceiveMessage", user, message);
           }
       }
   }
   

4. In the Server project, add the SignalR services in the method Startup.ConfigureServices.
   
   

   services.AddSignalR();
   

5. Also add the endpoint for ChatHubat Startup.Configure.
   
   

   .UseEndpoints(endpoints =>
   {
       endpoints.MapDefaultControllerRoute();
       endpoints.MapHub<ChatHub>("/chatHub");
       endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
   });
   

6. Update Pages / Index.razor in the Client project with the following markup.
   
   

   @using Microsoft.AspNetCore.SignalR.Client
   @page "/"
   @inject NavigationManager NavigationManager
   
   <div>
       <label for="userInput">User:</label>
       <input id="userInput" @bind="userInput" />
   </div>
   <div class="form-group">
       <label for="messageInput">Message:</label>
       <input id="messageInput" @bind="messageInput" />
   </div>
   <button @onclick="Send" disabled="@(!IsConnected)">Send Message</button>
   
   <hr />
   
   <ul id="messagesList">
       @foreach (var message in messages)
       {
           <li>@message</li>
       }
   </ul>
   
   @code {
       HubConnection hubConnection;
       List<string> messages = new List<string>();
       string userInput;
       string messageInput;
   
       protected override async Task OnInitializedAsync()
       {
           hubConnection = new HubConnectionBuilder()
               .WithUrl(NavigationManager.ToAbsoluteUri("/chatHub"))
               .Build();
   
           hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
           {
               var encodedMsg = user + " says " + message;
               messages.Add(encodedMsg);
               StateHasChanged();
           });
   
           await hubConnection.StartAsync();
       }
   
       Task Send() => hubConnection.SendAsync("SendMessage", userInput, messageInput);
   
       public bool IsConnected => hubConnection.State == HubConnectionState.Connected;
   }
   

7. Create and run a Server project
   
   

   cd Server
   dotnet run
   

8. Open the application in two separate browser tabs to communicate in real time through SignalR.
   

Known Issues

• Starting a new Blazor WebAssembly application hosted on ASP.NET Core from the command line generates a warning:
  
  

  CSC : warning CS8034: Unable to load Analyzer assembly C:\Users\user\.nuget\packages\microsoft.aspnetcore.components.analyzers\3.1.0\analyzers\dotnet\cs\Microsoft.AspNetCore.Components.Analyzers.dll : Assembly with same name is already loaded.
  

  • Solution: This warning can be ignored or removed using the <DisableImplicitComponentsAnalyzers>true</DisableImplicitComponentsAnalyzers> MSBuild property  .

Reviews