Blazor WebAssembly with gRPC-Web code-first approach

1. Blazor.Server - Prepare the ASP.NET Core host

services.AddCodeFirstGrpc(config => { config.ResponseCompressionLevel = System.IO.Compression.CompressionLevel.Optimal; });

app.UseGrpcWeb(new GrpcWebOptions() { DefaultEnabled = true });

2. Blazor.Shared - Define the service contract (code-first)

[ServiceContract]
public interface IMyService
{
	Task DoSomething(MyServiceRequest request);
}
[DataContract]
public class MyServiceResult
{
	[DataMember(Order = 1)]
	public string NewText { get; set; }
	[DataMember(Order = 2)]
	public int NewValue { get; set; }
}
[DataContract]
public class MyServiceRequest
{
	[DataMember(Order = 1)]
	public string Text { get; set; }
	[DataMember(Order = 2)]
	public int Value { get; set; }
}

3. Blazor.Server - Implement and publish the service

public class MyService : IMyService
{
	public Task DoSomething(MyServiceRequest request)
	{
		return Task.FromResult(new MyServiceResult()
		{
			NewText = request.Text + " from server",
			NewValue = request.Value + 1
		});
	}
}

app.UseEndpoints(endpoints =>
{
	endpoints.MapGrpcService<MyService>();
	// ...
}

4. Blazor.Client (Blazor Web Assembly) - consume the service

4A. Direct consumption of the service

var handler = new Grpc.Net.Client.Web.GrpcWebHandler(Grpc.Net.Client.Web.GrpcWebMode.GrpcWeb, new HttpClientHandler());
using (var channel = Grpc.Net.Client.GrpcChannel.ForAddress("https://localhost:44383/", new Grpc.Net.Client.GrpcChannelOptions() { HttpClient = new HttpClient(handler) }))
{
	var testFacade = channel.CreateGrpcService<IMyService>();
	this.result = await testFacade.DoSomething(request);
}

4B. Consumption via dependency injection

builder.Services.AddSingleton(services =>
{
	// Get the service address from appsettings.json
	var config = services.GetRequiredService<IConfiguration>();
	var backendUrl = config["BackendUrl"];
	// If no address is set then fallback to the current webpage URL
	if (string.IsNullOrEmpty(backendUrl))
	{
		var navigationManager = services.GetRequiredService<NavigationManager>();
		backendUrl = navigationManager.BaseUri;
	}
	// Create a channel with a GrpcWebHandler that is addressed to the backend server.
	//
	// GrpcWebText is used because server streaming requires it. If server streaming is not used in your app
	// then GrpcWeb is recommended because it produces smaller messages.
	var httpHandler = new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler());
	return GrpcChannel.ForAddress(
		backendUrl,
		new GrpcChannelOptions
		{
			HttpHandler = httpHandler,
			//CompressionProviders = ...,
			//Credentials = ...,
			//DisposeHttpClient = ...,
			//HttpClient = ...,
			//LoggerFactory = ...,
			//MaxReceiveMessageSize = ...,
			//MaxSendMessageSize = ...,
			//ThrowOperationCanceledOnCancellation = ...,
		});
});

builder.Services.AddTransient<IMyService>(services =>
{
	var grpcChannel = services.GetRequiredService<GrpcChannel>();
	return grpcChannel.CreateGrpcService<IMyService>();
});

@inject	IMyService MyService
@code
{
	async Task Submit()
	{
		this.result = await MyService.DoSomething(request);
	}
}

Advanced scenarios

References, Credits

Known Issues