How To Create gRPC Server in .NET and Add gRPC-Web - C# & .NET

In gRPC world, there is no text-to-binary conversion, so the machines do not spend time to convert data to the format they can read.  However, gRPC utilizes HTTP/2 protocol, which is not yet supported with current browsers.  That is what gRPC-Web was introduced.  gRPC-Web uses HTTP/1.1 protocol in browsers.
 

반응형

In .NET 7, there is a new feature called JSON Transcoding, which uses Google API to convert data to be compatible with current browsers.  However, my tests has shown that this feature still requires maturity.  
 
If you have .NET gRPC server with gRPC-Web feature built-in, you would not need a separate gRPC-Web Envoy proxy, one less component to worry about.  This server can be used with any JavaScript-based or .NET apps.

---

1.  Create gRPC Server

The easiest way is to use a boilerplate template in Visual Studio 2022.  
 
New Project > Select ASP.NET Core gRPC Service 
 

728x90

---

2.  Add gRPC-Web Feature

 
a. Install Grpc.AspNetCore.Web library from Nuget package installer.  You can also install it using Package Manager Console by typing the following command:

install-package Grpc.AspNetCore.Web

b.  Add new lines of code in Program.cs file.  The code below is an example for adding GreeterService to gRPC-Web endpoints.

app.UseRouting();
app.UseGrpcWeb(); // THIS MUST BE LOCATED BETWEEN UseRouting() and UseEndpoints()!!!
app.UseEndpoints(endpoints =>
{
    endpoints.MapGrpcService<GreeterService>().EnableGrpcWeb();
});

Also you must delete or at least comment the following line so that there is no endpoint conflict:

app.MapGrpcService<GreeterService>();

You can set a service either gRPC or gRPC-Web, not both.

---

Using this example, GreeterService is now on gRPC-Web endpoint.  You can set up gRPC-Web clients on client apps and consume data using this service.

---

Frontend (React) Setup - Part 1:
https://ranku.tistory.com/161

React & gRPC-Web : PART 1 - How To Compile Protobuf in Windows Environment

 
Frontend (React) Setup - Part 2:
https://ranku.tistory.com/162

React & gRPC-Web : PART 2 - How To Get Data from gRPC-Web Server using the Protobuf Compilation Files

---