From c658c5ea74d949bcd9960b55211c171bc0cb44a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Sun, 18 Sep 2022 20:25:02 +0300 Subject: [PATCH] Update POST.md --- .../2022-09-18-Grpc-Demo-Part-2/POST.md | 57 ++++++++++++++++++- 1 file changed, 55 insertions(+), 2 deletions(-) diff --git a/docs/en/Community-Articles/2022-09-18-Grpc-Demo-Part-2/POST.md b/docs/en/Community-Articles/2022-09-18-Grpc-Demo-Part-2/POST.md index 9a50b7627d..e6f382d831 100644 --- a/docs/en/Community-Articles/2022-09-18-Grpc-Demo-Part-2/POST.md +++ b/docs/en/Community-Articles/2022-09-18-Grpc-Demo-Part-2/POST.md @@ -1,4 +1,57 @@ -# Consuming gRPC Services from Blazor Client Using gRPC-Web +# Consuming gRPC Services from Blazor WebAssembly Application Using gRPC-Web -TODO +> **WARNING: I've demonstrated [Using gRPC with the ABP Framework](https://community.abp.io/posts/using-grpc-with-the-abp-framework-2dgaxzw3) in my latest post. If you haven't seen it, you should read it before this article, since this is a continuation of that article.** + +In this second part, I will show how to consume the gRPC service from the Blazor WebAssembly application, using the gRPC-Web technology. + +This will be a short article, based on Microsoft's [gRPC-Web in ASP.NET Core gRPC apps](https://learn.microsoft.com/en-us/aspnet/core/grpc/grpcweb) and [Code-first gRPC services and clients with .NET](https://learn.microsoft.com/en-us/aspnet/core/grpc/code-first) documents. For more information, I suggest to check these documents. Let's get start... + +## Configuring the Server Side + +First of all, the server-side should support gRPC-Web. Follow the steps below to enable it: + +### Add Grpc.AspNetCore.Web Package + +Add [Grpc.AspNetCore.Web](https://www.nuget.org/packages/Grpc.AspNetCore.Web) NuGet package to the `ProductManagement.HttpApi.Host` project. + +### Add GrpcWeb Middleware + +Add the following line just before the `app.UseConfiguredEndpoints(...)` line to add the GrpcWeb middleware to your ASP.NET Core request pipeline: + +````csharp +app.UseGrpcWeb(new GrpcWebOptions { DefaultEnabled = true }); +```` + +### Configure Cors + +ABP's startup template already configures Cors when you create a new solution. However, we need to allow some extra headers in our Cors configuration. + +Add the following line just after the `.WithAbpExposedHeaders()` line in the `OnApplicationInitialization` method of the `ProductManagementHttpApiHostModule` class: + +````csharp +.WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding") +```` + +Finally, call `RequireCors` extension method just after the `MapGrpcService` calls: + +````csharp +app.UseConfiguredEndpoints(endpoints => +{ + endpoints + .MapGrpcService() + .RequireCors("__DefaultCorsPolicy"); // Configure Cors for the product service +}); +```` + +`__DefaultCorsPolicy` may seem a magic string here. Let me explain it: ABP startup template configures the default Cors policy with the `context.Services.AddCors(...)` method (you can see it in the source code). If we define a named policy, we should use the same name here. However, when we don't specify, ASP.NET Core uses `__DefaultCorsPolicy` as the policy name by default. If you don't want to use the magic string, you can resolve the `IOptions` service and get the `DefaultPolicyName` from the `CorsOption` object. + +Anyway, that's all on the server-side. We can work on he client now. + +## Configuring the Client Side + +`ProductManagement.Blazor` is the Blazor WebAssembly application in the solution I'd created in the [first article](https://community.abp.io/posts/using-grpc-with-the-abp-framework-2dgaxzw3). We will configure that project to be able to consume the server-side gRPC services from our Blazor application. + +### Add Client-side Nuget Packages + +Add [Grpc.Net.Client](https://www.nuget.org/packages/Grpc.Net.Client), [Grpc.Net.Client.Web](https://www.nuget.org/packages/Grpc.Net.Client.Web) and [protobuf-net.Grpc](https://www.nuget.org/packages/protobuf-net.Grpc) NuGet packages to the `ProductManagement.Blazor` project.