Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/razfriman/BlazorGrpc
Blazor WebAssembly + gRPC Sample
https://github.com/razfriman/BlazorGrpc
Last synced: about 2 months ago
JSON representation
Blazor WebAssembly + gRPC Sample
- Host: GitHub
- URL: https://github.com/razfriman/BlazorGrpc
- Owner: razfriman
- License: mit
- Archived: true
- Created: 2019-09-30T06:55:00.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-04T10:40:01.000Z (about 4 years ago)
- Last Synced: 2024-06-29T03:35:40.931Z (3 months ago)
- Language: C#
- Homepage:
- Size: 227 KB
- Stars: 53
- Watchers: 8
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
UPDATE: This project is archived because this functionality has been built in directly thanks to `grpc-web`
---
# Blazor WebAssembly + ASP.NET Core + gRPC
[](https://github.com/razfriman/BlazorGrpc/actions)
This sample projects demonstrates how you can use the power of Blazor, ASP.NET Core, and gRPC to create a web application which can communicate with a backend that uses gRPC with maximum code reusability.
By simply defining our API contracts once via `.proto` files, the request/response objects are created for both the backend and frontend (Blazor). Additionally, code-generation creates the gRPC clients and gRPC servers we need to implement the services.
This means your client and server code can easily stay in sync.
## Projects
## BlazorGrpc.Protos
Contains `.proto` definitions used in the project
## BlazorGrpc.WeatherService
Simple gRPC service that returns dummy weather data
## BlazorGrpc.Api
Acts as a gRPC gateway (supporting unary gRPC calls).
Accepts incoming JSON POST requests by taking incoming requests and routing them to the correct gRPC service, and transforming the result back into JSON before returning the response.
Additionally, Swagger is generated from the API Gateway to create a human-readable view of the available request and response methods.
## BlazorGrpc.Web.Client
Blazor WebAssembly (Client-side Blazor) project.
Reuses the `.proto`-generated objects to perform gRPC requests through the `BlazorGrpc.Api` API gateway.
While we cannot make gRPC calls directly from the browser/WASM, this lets use reuse all of the existing request/reseponse models directly in the browser.
## BlazorGrpc.Web.Server
ASP.NET Core project hosting the Blazor WebAssembly project.
Exposes a `/Configuration` endpoint to easily pass data to the client project. In this case, it is passing the `apiUrl` for the client so we can dynamically change path to the api server.
---
## Getting Started (Docker)
A `docker-compose` configuration is provided so you can easily get started by running:
```
docker-compose up
```
### Services / Ports
The projects are exposed via the following ports:
Web Client: `http: 5101 / https: 5201`
API Gateway: `http: 5102 / https: 5202`
Weather gRPC Service: `http: 5103 / https: 5203` (Requires HTTPS/HTTP2)
Helpful links
`https://localhost:5201` - the Blazor client side application
`https://localhost:5202/swagger` - the gRPC API Gateway used to allow the Blazor app to communicate with the backend. Consider this like a BFF (backend-for-frontend).
`https://localhost:5202/health` - Health check page for the gRPC API Gateway
`https://localhost:5203/health` - Health check page for the gRPC weathe service
---
## Logging
ASP.NET Core 3 provides you with correlation IDs out of the box, so you can process these logs and get tracing between multiple services. In this example the API Gateway call that initiates the request to the `weather` gRPC service is tracked via the same ID. This is really helpful when you have multiple services and can see the path of an entire request.
```
api_1 | info: BlazorGrpc.Api.Controllers.WeatherServiceController[0] api_1 | [gRPC API Gateway ] [GetWeather] [12c15313-4723c328bfbb8586]
weather_1 | info: BlazorGrpc.WeatherService.Services.WeatherService[0] weather_1 | [gRPC Weather Service] [GetWeather] [12c15313-4723c328bfbb8586]
api_1 | info: BlazorGrpc.Api.Controllers.WeatherServiceController[0] api_1 | [gRPC API Gateway ] [GetWeather] [12c15315-4723c328bfbb8586]
weather_1 | info: BlazorGrpc.WeatherService.Services.WeatherService[0] weather_1 | [gRPC Weather Service] [GetWeather] [12c15315-4723c328bfbb8586]
```
## Screenshot
---
Any questions? You can reach me via [email protected] or https://razfriman.com