Convert standalone app to use gRPC for weather forecast

Author: SteveSandersonMS

Standalone/BlazorGrpcStandalone/BlazorGrpcStandalone.csproj

@@ -10,6 +10,23 @@
     <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.1.0-preview4.19579.2" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.1.0-preview4.19579.2" />
     <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.1.0-preview4.19579.2" PrivateAssets="all" />
+
+    <!-- Needed temporarily until the next Blazor WebAssembly preview release -->
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Mono" Version="3.2.0-preview1.20052.1" />
+
+    <!-- gRPC-Web packages -->
+    <PackageReference Include="Google.Protobuf" Version="3.11.2" />
+    <PackageReference Include="Grpc.Net.Client" Version="2.27.0-dev202001100801" />
+    <PackageReference Include="Grpc.Net.Client.Web" Version="2.27.0-dev202001100801" />
+    <PackageReference Include="Grpc.Tools" Version="2.27.0-dev202001081219">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
+  </ItemGroup>
+
+  <ItemGroup>
+    <!-- Share .proto file with backend server to ensure consistency. Alternatively you could copy it into this project. -->
+    <Protobuf Include="..\SampleBackendGrpcServer\Protos\weather.proto" />
   </ItemGroup>
 
 </Project>

Standalone/BlazorGrpcStandalone/Messages/WeatherForecast.cs

@@ -0,0 +1,19 @@
+using System;
+using Google.Protobuf.WellKnownTypes;
+
+namespace BlazorGrpc // Note that the namespace must match the generated type
+{
+    public partial class WeatherForecast
+    {
+        // Properties for the underlying data are generated from the .proto file
+        // This partial class just adds some extra convenience properties
+
+        public DateTime Date
+        {
+            get => DateTimeStamp.ToDateTime();
+            set { DateTimeStamp = Timestamp.FromDateTime(value.ToUniversalTime()); }
+        }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+}

Standalone/BlazorGrpcStandalone/Pages/FetchData.razor

@@ -1,5 +1,6 @@
 @page "/fetchdata"
-@inject HttpClient Http
+@using BlazorGrpc
+@inject WeatherForecasts.WeatherForecastsClient WeatherForecastsClient
 
 <h1>Weather forecast</h1>
 
@@ -35,21 +36,10 @@ else
 }
 
 @code {
-    private WeatherForecast[] forecasts;
+    private IList<WeatherForecast> forecasts;
 
     protected override async Task OnInitializedAsync()
     {
-        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
-    }
-
-    public class WeatherForecast
-    {
-        public DateTime Date { get; set; }
-
-        public int TemperatureC { get; set; }
-
-        public string Summary { get; set; }
-
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+        forecasts = (await WeatherForecastsClient.GetWeatherAsync(new Empty())).Forecasts;
     }
 }

Standalone/BlazorGrpcStandalone/Startup.cs

@@ -1,12 +1,26 @@
+using BlazorGrpc;
+using Grpc.Net.Client;
+using Grpc.Net.Client.Web;
 using Microsoft.AspNetCore.Components.Builder;
 using Microsoft.Extensions.DependencyInjection;
+using System.Net.Http;
 
 namespace BlazorGrpcStandalone
 {
     public class Startup
     {
         public void ConfigureServices(IServiceCollection services)
         {
+            services.AddSingleton(services =>
+            {
+                // Create a gRPC-Web channel pointing to the backend server
+                var httpClient = new HttpClient(new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler()));
+
+                var channel = GrpcChannel.ForAddress("https://localhost:5001", new GrpcChannelOptions { HttpClient = httpClient });
+
+                // Now we can instantiate gRPC clients for this channel
+                return new WeatherForecasts.WeatherForecastsClient(channel);
+            });
         }
 
         public void Configure(IComponentsApplicationBuilder app)

Standalone/BlazorGrpcStandalone/_Imports.razor

@@ -5,3 +5,4 @@
 @using Microsoft.JSInterop
 @using BlazorGrpcStandalone
 @using BlazorGrpcStandalone.Shared
+@using Google.Protobuf.WellKnownTypes

Standalone/SampleBackendGrpcServer/Protos/weather.proto

@@ -3,7 +3,7 @@ syntax = "proto3";
 import "google/protobuf/empty.proto";
 import "google/protobuf/timestamp.proto";
 
-option csharp_namespace = "SampleBackendGrpc";
+option csharp_namespace = "BlazorGrpc";
 
 package WeatherForecast;
 

Standalone/SampleBackendGrpcServer/SampleBackendGrpcServer.csproj

@@ -9,7 +9,8 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Grpc.AspNetCore" Version="2.24.0" />
+    <PackageReference Include="Grpc.AspNetCore" Version="2.27.0-dev202001100801" />
+    <PackageReference Include="Grpc.AspNetCore.Web" Version="2.27.0-dev202001100801" />
   </ItemGroup>
 
 </Project>

Standalone/SampleBackendGrpcServer/Services/WeatherForecastService.cs

@@ -3,7 +3,7 @@
 using System.Threading.Tasks;
 using Google.Protobuf.WellKnownTypes;
 using Grpc.Core;
-using SampleBackendGrpc;
+using BlazorGrpc;
 
 namespace SampleBackendGrpcServer.Services
 {

Standalone/SampleBackendGrpcServer/Startup.cs

@@ -14,6 +14,7 @@ public class Startup
         public void ConfigureServices(IServiceCollection services)
         {
             services.AddGrpc();
+            services.AddCors();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
@@ -25,10 +26,14 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             }
 
             app.UseRouting();
+            app.UseCors();
+            app.UseGrpcWeb();
 
             app.UseEndpoints(endpoints =>
             {
-                endpoints.MapGrpcService<WeatherForecastsService>();
+                endpoints.MapGrpcService<WeatherForecastsService>().EnableGrpcWeb()
+                    .RequireCors(cors => cors.AllowAnyHeader().AllowAnyMethod()
+                        .WithOrigins("http://localhost:54070", "https://localhost:44316"));
 
                 endpoints.MapGet("/", async context =>
                 {