Blazor WASM-SignalR tutorial update (#17937)

Author: guardrex

aspnetcore/tutorials/signalr-blazor-webassembly.md

@@ -5,7 +5,7 @@ description: Create a chat app that uses ASP.NET Core SignalR with Blazor WebAss
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
-ms.date: 04/16/2020
+ms.date: 04/21/2020
 no-loc: [Blazor, SignalR]
 uid: tutorials/signalr-blazor-webassembly
 ---
@@ -160,7 +160,7 @@ In the **BlazorSignalRApp.Server** project, create a *Hubs* (plural) folder and
 
 [!code-csharp[](signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Server/Hubs/ChatHub.cs)]
 
-## Add SignalR services and an endpoint for the SignalR hub
+## Add services and an endpoint for the SignalR hub
 
 1. In the **BlazorSignalRApp.Server** project, open the *Startup.cs* file.
 
@@ -170,15 +170,13 @@ In the **BlazorSignalRApp.Server** project, create a *Hubs* (plural) folder and
    using BlazorSignalRApp.Server.Hubs;
    ```
 
-1. Add the SignalR services to `Startup.ConfigureServices`:
+1. Add SignalR and Response Compression Middleware services to `Startup.ConfigureServices`:
 
-   ```csharp
-   services.AddSignalR();
-   ```
+   [!code-csharp[](signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Server/Startup.cs?name=snippet_ConfigureServices&highlight=3,5-9)]
 
-1. In `Startup.Configure` between the endpoints for the default controller route and the client-side fallback, add an endpoint for the hub:
+1. In `Startup.Configure` between the endpoints for controllers and the client-side fallback, add an endpoint for the hub:
 
-   [!code-csharp[](signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Server/Startup.cs?name=snippet&highlight=4)]
+   [!code-csharp[](signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Server/Startup.cs?name=snippet_UseEndpoints&highlight=4)]
 
 ## Add Razor component code for chat
 
@@ -194,7 +192,7 @@ In the **BlazorSignalRApp.Server** project, create a *Hubs* (plural) folder and
 
 # [Visual Studio](#tab/visual-studio)
 
-1. In **Solution Explorer**, select the **BlazorSignalRApp.Server** project. Press **Ctrl+F5** to run the app without debugging.
+1. In **Solution Explorer**, select the **BlazorSignalRApp.Server** project. Press <kbd>F5</kbd> to run the app with debugging or <kbd>Ctrl</kbd>+<kbd>F5</kbd> to run the app without debugging.
 
 1. Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.
 
@@ -206,7 +204,13 @@ In the **BlazorSignalRApp.Server** project, create a *Hubs* (plural) folder and
 
 # [Visual Studio Code](#tab/visual-studio-code)
 
-1. Select **Debug** > **Run Without Debugging** from the toolbar.
+1. When VS Code offers to create a launch profile for the Server app (*.vscode/launch.json*), the `program` entry appears similar to the following to point to the app's assembly (`{APPLICATION NAME}.Server.dll`):
+
+   ```json
+   "program": "${workspaceFolder}/Server/bin/Debug/netcoreapp3.1/{APPLICATION NAME}.Server.dll"
+   ```
+
+1. Press <kbd>F5</kbd> to run the app with debugging or <kbd>Ctrl</kbd>+<kbd>F5</kbd> to run the app without debugging.
 
 1. Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.
 
@@ -218,7 +222,7 @@ In the **BlazorSignalRApp.Server** project, create a *Hubs* (plural) folder and
 
 # [Visual Studio for Mac](#tab/visual-studio-mac)
 
-1. In the **Solution** sidebar, select the **BlazorSignalRApp.Server** project. From the menu, select **Run** > **Start Without Debugging**.
+1. In the **Solution** sidebar, select the **BlazorSignalRApp.Server** project. Press <kbd>⌘</kbd>+<kbd>↩</kbd>** to run the app with debugging or <kbd>⌥</kbd>+<kbd>⌘</kbd>+<kbd>↩</kbd> to run the app without debugging.
 
 1. Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.
 

aspnetcore/tutorials/signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Client/BlazorSignalRApp.Client.csproj

@@ -6,11 +6,11 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <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" />
-    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="3.1.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0-preview4.20210.8" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0-preview4.20210.8" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0-preview4.20210.8" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="3.1.3" />
+    <PackageReference Include="System.Net.Http.Json" Version="3.2.0-preview5.20210.3" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\Shared\BlazorSignalRApp.Shared.csproj" />

aspnetcore/tutorials/signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Client/Pages/FetchData.razor

@@ -40,7 +40,7 @@ else
 
     protected override async Task OnInitializedAsync()
     {
-        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast");
+        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
     }
 
 }

aspnetcore/tutorials/signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Client/Program.cs

@@ -1,8 +1,9 @@
 using System;
+using System.Net.Http;
 using System.Collections.Generic;
 using System.Threading.Tasks;
 using System.Text;
-using Microsoft.AspNetCore.Blazor.Hosting;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Microsoft.Extensions.DependencyInjection;
 
 namespace BlazorSignalRApp.Client
@@ -14,6 +15,8 @@ public static async Task Main(string[] args)
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
             builder.RootComponents.Add<App>("app");
 
+            builder.Services.AddSingleton(new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
             await builder.Build().RunAsync();
         }
     }

aspnetcore/tutorials/signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Client/_Imports.razor

@@ -1,4 +1,5 @@
 @using System.Net.Http
+@using System.Net.Http.Json
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web

aspnetcore/tutorials/signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Server/BlazorSignalRApp.Server.csproj

@@ -5,7 +5,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.2.0-preview1.20073.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.0-preview4.20210.8" />
   </ItemGroup>
 
   <ItemGroup>

aspnetcore/tutorials/signalr-blazor-webassembly/samples/3.x/BlazorSignalRApp/Server/Startup.cs

@@ -1,29 +1,30 @@
-using BlazorSignalRApp.Server.Hubs;
+using System.Linq;
 using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.HttpsPolicy;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.ResponseCompression;
+using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
-using System.Linq;
+using BlazorSignalRApp.Server.Hubs;
 
 namespace BlazorSignalRApp.Server
 {
     public class Startup
     {
-        // This method gets called by the runtime. Use this method to add services to the container.
-        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
+        #region snippet_ConfigureServices
         public void ConfigureServices(IServiceCollection services)
         {
             services.AddSignalR();
-            services.AddMvc();
+            services.AddControllersWithViews();
             services.AddResponseCompression(opts =>
             {
                 opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                     new[] { "application/octet-stream" });
             });
         }
+        #endregion
 
-        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         {
 
@@ -32,20 +33,26 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             if (env.IsDevelopment())
             {
                 app.UseDeveloperExceptionPage();
-                app.UseBlazorDebugging();
+                app.UseWebAssemblyDebugging();
+            }
+            else
+            {
+                app.UseExceptionHandler("/Error");
+                app.UseHsts();
             }
 
+            app.UseHttpsRedirection();
+            app.UseBlazorFrameworkFiles();
             app.UseStaticFiles();
-            app.UseClientSideBlazorFiles<Client.Program>();
 
             app.UseRouting();
 
-            #region snippet
+            #region snippet_UseEndpoints
             app.UseEndpoints(endpoints =>
             {
-                endpoints.MapDefaultControllerRoute();
+                endpoints.MapControllers();
                 endpoints.MapHub<ChatHub>("/chatHub");
-                endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
+                endpoints.MapFallbackToFile("index.html");
             });
             #endregion
         }