gRPC And Blazor WebAssembly App In .NET 6

syntax = "proto3";
option csharp_namespace = "GrpcClient";
package grpccars;
service Car {
    rpc GetCars(CarsRequest) returns(CarsResponse);
}
message CarsRequest {}
message CarsResponse {
    repeated CarResponse cars = 1;
}
message CarResponse {
    string name = 1;
}

<ItemGroup>
    <PackageReference Include="Grpc.AspNetCore" Version="2.46.0" />
    <PackageReference Include="Grpc.AspNetCore.Web" Version="2.46.0" />
</ItemGroup>

<ItemGroup>
    <Protobuf Include="Protos\car.proto" GrpcServices="Server" />
</ItemGroup>

Now, we will implement a simple method that will return a list of cars. This code is used to override and implement the message contract code.

CarsService.cs

using Grpc.Core;
using Grpc.Net.Client;
using GrpcClient;
namespace Grpc.Server {
    public class CarsService: Car.CarBase {
        public override async Task < CarsResponse > GetCars(CarsRequest request, ServerCallContext context) {
            CarsResponse response = new CarsResponse();
            response.Cars.Add(new CarResponse {
                Name = "Honda City"
            });
            response.Cars.Add(new CarResponse {
                Name = "Hyundai Kona"
            });
            response.Cars.Add(new CarResponse {
                Name = "Ford Endeavour"
            });
            return response;
        }
    }
}

In Program.cs we will add CORS policy and gRPC service middleware. Along with this we will add support for gRPC web that will allow apps to use HTTP/1.1 protocol to communicate. This support is required as web browsers do not support HTTP/2 protocol right now. With HTTP/1.1 support we will be able receive calls from blazor web assembly.

Progarm.cs

using Grpc.Server;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddGrpc(options => {
    options.EnableDetailedErrors = true;
    options.MaxReceiveMessageSize = 2 * 1024 * 1024; // 2 MB
    options.MaxSendMessageSize = 5 * 1024 * 1024; // 5 MB
});
builder.Services.AddCors(setupAction => {
    setupAction.AddDefaultPolicy(policy => {
        policy.AllowAnyHeader().AllowAnyOrigin().AllowAnyMethod().WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");
    });
});
var app = builder.Build();
app.UseCors();
app.UseRouting();
app.UseGrpcWeb(new GrpcWebOptions {
    DefaultEnabled = true
});
app.UseEndpoints(endpoints => {
    endpoints.MapGrpcService < CarsService > ();
});
app.Run();

In client projects add below packages, these packages are essential for code generation and protobuf support to interact with the server.

<ItemGroup>
  <PackageReference Include="Grpc.Net.Client.Web" Version="2.46.0" />
  <PackageReference Include="Google.Protobuf" Version="3.21.1" />
  <PackageReference Include="Grpc.Net.Client" Version="2.46.0" />
  <PackageReference Include="Grpc.Tools" Version="2.46.3">
    <PrivateAssets>all</PrivateAssets>
    <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
  </PackageReference>
</ItemGroup>

Make sure Client.csproj has the following code, this is for client side so GrpcServices=Client. In the above code we had GrpcServices=Server for Server side.

<ItemGroup>
	  <Protobuf Include="Protos\car.proto" GrpcServices="Client" />
</ItemGroup>

This is sample code to send RPC calls to the server endpoint.

Index.razor

@page "/"

<PageTitle>Index</PageTitle>

<h1>Cars from Grpc Service</h1>

@foreach(var car in model.Cars)
{
    <p>Name : @car.Name</p>
}    
@code {
    private GrpcClient.CarsResponse model = new GrpcClient.CarsResponse();
    protected override async Task OnInitializedAsync() {
        using
        var channel = GrpcChannel.ForAddress("https://localhost:7272/", new GrpcChannelOptions {
            HttpHandler = new GrpcWebHandler(new HttpClientHandler())
        });
        var client = new GrpcClient.Car.CarClient(channel);
        model = await client.GetCarsAsync(new GrpcClient.CarsRequest {});
    }
}

Run webassembly app and Grpc Server, below is the screenshot for reference.

That’s it! Now we can effortlessly develop our applications very rapidly. This will save our lot of boilerplate code for writing integrations and we can focus purely on business logic. I have uploaded code for reference. Please feel free to explore.