02-01-2020, 07:37 AM
A new experiment: Call .NET gRPC services from the browser with gRPC-Web
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/a-new-experiment-call-net-grpc-services-from-the-browser-with-grpc-web.png" width="58" height="58" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/a-new-experiment-call-net-grpc-services-from-the-browser-with-grpc-web.png" width="58" height="58" alt="Avatar" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 photo avatar-default"></p>
<p>James</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>January 27th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>I’m excited to announce experimental support for gRPC-Web with .NET. gRPC-Web allows gRPC to be called from browser-based apps like JavaScript SPAs or Blazor WebAssembly apps.</p>
<p>gRPC-Web for .NET promises to bring many of gRPC’s great features to browser apps:</p>
<ul>
<li>Strongly-typed code-generated clients</li>
<li>Compact Protobuf messages</li>
<li>Server streaming</li>
</ul>
<h2>What is gRPC-Web</h2>
<p>It is impossible to implement the gRPC HTTP/2 spec in the browser because there is no browser API with enough fine-grained control over HTTP requests. <a href="https://github.com/grpc/grpc/blob/master/doc/PROTOCOL-WEB.md">gRPC-Web</a> solves this problem by being compatible with HTTP/1.1 and HTTP/2.</p>
<p>gRPC-Web is not a new technology. There is a stable <a href="https://github.com/grpc/grpc-web">gRPC-Web JavaScript client</a>, and a <a href="https://blog.envoyproxy.io/envoy-and-grpc-web-a-fresh-new-alternative-to-rest-6504ce7eb880">proxy for translating between gRPC and gRPC-Web</a> for services. The new experimental packages allow an ASP.NET Core gRPC app to support gRPC-Web <strong>without</strong> a proxy, and allow the .NET Core gRPC client to call gRPC-Web services. (great for Blazor WebAssembly apps!)</p>
<h2>New opportunites with gRPC-Web</h2>
<ul>
<li><strong>Call ASP.NET Core gRPC apps from the browser</strong> – Browser APIs can’t call gRPC HTTP/2. gRPC-Web offers a compatible alternative.
<ul>
<li>JavaScript SPAs</li>
<li>.NET Blazor Web Assembly apps</li>
</ul>
</li>
<li><strong>Host ASP.NET Core gRPC apps in IIS and Azure App Service</strong> – Some servers, such as IIS and Azure App Service, currently can’t host gRPC services. While this is actively being worked on, gRPC-Web offers an interesting alternative that works in every environment today.</li>
<li><strong>Call gRPC from non-.NET Core platforms</strong> – Some .NET platforms <code>HttpClient</code> doesn’t support HTTP/2. gRPC-Web can be used to call gRPC services on these platforms (e.g. Blazor WebAssembly, Xamarin).</li>
</ul>
<p>Note that there is a small performance cost to gRPC-Web, and two gRPC features are no longer supported: client streaming and bi-directional streaming. (server streaming is still supported!)</p>
<h2>Server gRPC-Web instructions</h2>
<p>If you are new to gRPC in .NET, there is a <a href="https://docs.microsoft.com/aspnet/core/tutorials/grpc/grpc-start">simple tutorial to get you started</a>.</p>
<p>gRPC-Web does not require any changes to your services, the only modification is startup configuration. To enable gRPC-Web with an ASP.NET Core gRPC service, add a reference to the <em>Grpc.AspNetCore.Web</em> package. Configure the app to use gRPC-Web by adding <code>AddGrpcWeb(...)</code> and <code>UseGrpcWeb()</code> in the startup file:</p>
<p><em>Startup.cs</em></p>
<pre><code class="csharp">public void ConfigureServices(IServiceCollection services)
{ services.AddGrpc();
} public void Configure(IApplicationBuilder app)
{ app.UseRouting(); // Add gRPC-Web middleware after routing and before endpoints app.UseGrpcWeb(); app.UseEndpoints(endpoints => { endpoints.MapGrpcService<GreeterService>().EnableGrpcWeb(); });
}
</code></pre>
<p>Some additional configuration may be required to call gRPC-Web from the browser, such as configuring the app to support CORS.</p>
<h2>Client gRPC-Web instructions</h2>
<p>The JavaScript gRPC-Web client has <a href="https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld#write-client-code">instructions</a> for setting up a gRPC-Web client to use in browser JavaScript SPAs.</p>
<p>Calling gRPC-Web with a .NET client is the same as regular gRPC, the only modification is how the channel is created. To enable gRPC-Web, add a reference to the <em>Grpc.Net.Client.Web</em> package. Configure the channel to use the <code>GrpcWebHandler</code>:</p>
<pre><code class="csharp">// Configure a channel to use gRPC-Web
var handler = new GrpcWebHandler(GrpcWebMode.GrpcWebText, new HttpClientHandler());
var channel = GrpcChannel.ForAddress("https://localhost:5001", new GrpcChannelOptions { HttpClient = new HttpClient(handler) }); var client = Greeter.GreeterClient(channel);
var response = await client.SayHelloAsync(new GreeterRequest { Name = ".NET" });
</code></pre>
<p>To see gRPC-Web with .NET in action, take a moment to read a great blog post written by Steve Sanderson that uses <a href="https://blog.stevensanderson.com/2020/01/15/2020-01-15-grpc-web-in-blazor-webassembly/">gRPC-Web in Blazor WebAssembly</a>.</p>
<h2>Try gRPC-Web with ASP.NET Core today</h2>
<p>Preview packages are on NuGet:</p>
<p>Documentation for using gRPC-Web with .NET Core can be found <a href="https://docs.microsoft.com/aspnet/core/grpc/browser">here</a>.</p>
<p>gRPC-Web for .NET is an experimental project, not a committed product. We want to test that our approach to implementing gRPC-Web works, and get feedback on whether this approach is useful to .NET developers compared to the traditional way of setting up gRPC-Web via a proxy. Please add your feedback here or at the <a href="https://github.com/grpc/grpc-dotnet">https://github.com/grpc/grpc-dotnet</a> to ensure we build something that developers like and are productive with.</p>
<p>Thanks!</p>
<div class="authorinfoarea">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/a-new-experiment-call-net-grpc-services-from-the-browser-with-grpc-web-1.png" width="96" height="96" alt="Avatar" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 photo avatar-default"></div>
</p></div>
</div>
https://www.sickgaming.net/blog/2020/01/...-grpc-web/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/a-new-experiment-call-net-grpc-services-from-the-browser-with-grpc-web.png" width="58" height="58" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/a-new-experiment-call-net-grpc-services-from-the-browser-with-grpc-web.png" width="58" height="58" alt="Avatar" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 photo avatar-default"></p>
<p>James</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>January 27th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>I’m excited to announce experimental support for gRPC-Web with .NET. gRPC-Web allows gRPC to be called from browser-based apps like JavaScript SPAs or Blazor WebAssembly apps.</p>
<p>gRPC-Web for .NET promises to bring many of gRPC’s great features to browser apps:</p>
<ul>
<li>Strongly-typed code-generated clients</li>
<li>Compact Protobuf messages</li>
<li>Server streaming</li>
</ul>
<h2>What is gRPC-Web</h2>
<p>It is impossible to implement the gRPC HTTP/2 spec in the browser because there is no browser API with enough fine-grained control over HTTP requests. <a href="https://github.com/grpc/grpc/blob/master/doc/PROTOCOL-WEB.md">gRPC-Web</a> solves this problem by being compatible with HTTP/1.1 and HTTP/2.</p>
<p>gRPC-Web is not a new technology. There is a stable <a href="https://github.com/grpc/grpc-web">gRPC-Web JavaScript client</a>, and a <a href="https://blog.envoyproxy.io/envoy-and-grpc-web-a-fresh-new-alternative-to-rest-6504ce7eb880">proxy for translating between gRPC and gRPC-Web</a> for services. The new experimental packages allow an ASP.NET Core gRPC app to support gRPC-Web <strong>without</strong> a proxy, and allow the .NET Core gRPC client to call gRPC-Web services. (great for Blazor WebAssembly apps!)</p>
<h2>New opportunites with gRPC-Web</h2>
<ul>
<li><strong>Call ASP.NET Core gRPC apps from the browser</strong> – Browser APIs can’t call gRPC HTTP/2. gRPC-Web offers a compatible alternative.
<ul>
<li>JavaScript SPAs</li>
<li>.NET Blazor Web Assembly apps</li>
</ul>
</li>
<li><strong>Host ASP.NET Core gRPC apps in IIS and Azure App Service</strong> – Some servers, such as IIS and Azure App Service, currently can’t host gRPC services. While this is actively being worked on, gRPC-Web offers an interesting alternative that works in every environment today.</li>
<li><strong>Call gRPC from non-.NET Core platforms</strong> – Some .NET platforms <code>HttpClient</code> doesn’t support HTTP/2. gRPC-Web can be used to call gRPC services on these platforms (e.g. Blazor WebAssembly, Xamarin).</li>
</ul>
<p>Note that there is a small performance cost to gRPC-Web, and two gRPC features are no longer supported: client streaming and bi-directional streaming. (server streaming is still supported!)</p>
<h2>Server gRPC-Web instructions</h2>
<p>If you are new to gRPC in .NET, there is a <a href="https://docs.microsoft.com/aspnet/core/tutorials/grpc/grpc-start">simple tutorial to get you started</a>.</p>
<p>gRPC-Web does not require any changes to your services, the only modification is startup configuration. To enable gRPC-Web with an ASP.NET Core gRPC service, add a reference to the <em>Grpc.AspNetCore.Web</em> package. Configure the app to use gRPC-Web by adding <code>AddGrpcWeb(...)</code> and <code>UseGrpcWeb()</code> in the startup file:</p>
<p><em>Startup.cs</em></p>
<pre><code class="csharp">public void ConfigureServices(IServiceCollection services)
{ services.AddGrpc();
} public void Configure(IApplicationBuilder app)
{ app.UseRouting(); // Add gRPC-Web middleware after routing and before endpoints app.UseGrpcWeb(); app.UseEndpoints(endpoints => { endpoints.MapGrpcService<GreeterService>().EnableGrpcWeb(); });
}
</code></pre>
<p>Some additional configuration may be required to call gRPC-Web from the browser, such as configuring the app to support CORS.</p>
<h2>Client gRPC-Web instructions</h2>
<p>The JavaScript gRPC-Web client has <a href="https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld#write-client-code">instructions</a> for setting up a gRPC-Web client to use in browser JavaScript SPAs.</p>
<p>Calling gRPC-Web with a .NET client is the same as regular gRPC, the only modification is how the channel is created. To enable gRPC-Web, add a reference to the <em>Grpc.Net.Client.Web</em> package. Configure the channel to use the <code>GrpcWebHandler</code>:</p>
<pre><code class="csharp">// Configure a channel to use gRPC-Web
var handler = new GrpcWebHandler(GrpcWebMode.GrpcWebText, new HttpClientHandler());
var channel = GrpcChannel.ForAddress("https://localhost:5001", new GrpcChannelOptions { HttpClient = new HttpClient(handler) }); var client = Greeter.GreeterClient(channel);
var response = await client.SayHelloAsync(new GreeterRequest { Name = ".NET" });
</code></pre>
<p>To see gRPC-Web with .NET in action, take a moment to read a great blog post written by Steve Sanderson that uses <a href="https://blog.stevensanderson.com/2020/01/15/2020-01-15-grpc-web-in-blazor-webassembly/">gRPC-Web in Blazor WebAssembly</a>.</p>
<h2>Try gRPC-Web with ASP.NET Core today</h2>
<p>Preview packages are on NuGet:</p>
<p>Documentation for using gRPC-Web with .NET Core can be found <a href="https://docs.microsoft.com/aspnet/core/grpc/browser">here</a>.</p>
<p>gRPC-Web for .NET is an experimental project, not a committed product. We want to test that our approach to implementing gRPC-Web works, and get feedback on whether this approach is useful to .NET developers compared to the traditional way of setting up gRPC-Web via a proxy. Please add your feedback here or at the <a href="https://github.com/grpc/grpc-dotnet">https://github.com/grpc/grpc-dotnet</a> to ensure we build something that developers like and are productive with.</p>
<p>Thanks!</p>
<div class="authorinfoarea">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/02/a-new-experiment-call-net-grpc-services-from-the-browser-with-grpc-web-1.png" width="96" height="96" alt="Avatar" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 photo avatar-default"></div>
</p></div>
</div>
https://www.sickgaming.net/blog/2020/01/...-grpc-web/