BlazorFly.Grpc

BlazorFly.Grpc is a library for manual testing of your gRPC services through Blazor-based generated UI. The main goal is to provide easy to install and integrate library with simple UI and intuitive usage.

Notes

To use this library in your project you need to enable Blazor support. For more info see official documentation. This library uses Server-side Blazor, for now it cannot be used with Client-side Blazor due to gRPC usage problems itself. Do not try to use in Client-side apps!

Setup

Requirements

.Net Core 3.0+

Installation

• Install the BlazorFly.Grpc package.
• Install the Grpc.Net.ClientFactory package.

Registration

• Register BlazorFly services in the Startup

public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            
            // Add BlazorFly services and specify your gRPC client
            services.AddBlazorFlyGrpc(typeof(TestService.TestServiceClient));
            
            // There is also an overloaded version with collection of clients
            services.AddBlazorFlyGrpc(
                new List<Type> 
                { 
                  typeof(TestService.TestServiceClient),
                  typeof(AnotherService.AnotherServiceClient) 
                });
            
            // If you want to pass default metadata to all of you 
            // requests - additionally register metadata provider:
            services.AddBlazorFlyGrpc(typeof(TestService.TestServiceClient), () =>
            {
                var metadata = new Metadata();
                metadata.Add(new Metadata.Entry("testkey", "testvalue"));
                return metadata;
            });
            
            // Register you gRPC clients in DI via HttpClientFactory integration,
            // so generated component can get access and use them later
            services.AddGrpcClient<TestService.TestServiceClient>(options =>
            {
                options.Address = new Uri("https://localhost:5001");
            });
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }

Class-based Blazor component integration

• BlazorFly registrates IGrpcViewTypeProvider service in the DI, so you should inject it to your 'wrapper' component, like this:

[Route("grpcView")]
    public class GrpcView : ComponentBase
    {
        [Inject]
        public IGrpcViewTypeProvider TypeProvider { get; set; }

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenComponent(0, TypeProvider.GetGrpcViewType());
            builder.CloseComponent();
        }
    }

Markdown-based Blazor component integration

• If you don't want to create class-based 'wrapper' component as described above, you can use it in your another Blazor component, like this:

• Add using to your _Imports.razor

@using BlazorFly.Grpc;

• Create GrpcView.razor component or use existing component and made appropriate changes like described below:

@page "/grpcView"

@GrpcViewComponent

@code {
    [Inject] IGrpcViewTypeProvider GrpcViewTypeProvider { get; set; }

    public RenderFragment GrpcViewComponent { get; set; }

    protected override void OnInitialized()
    {
        GrpcViewComponent = builder =>
        {
            builder.OpenComponent(0, GrpcViewTypeProvider.GetGrpcViewType());
            builder.CloseComponent();
        };   
        
        base.OnInitialized();
    }
}

Component route registration

• 'Wrapper' component is registered at 'grpcView' route, so change you router to make it accessible:

<NavLink class="nav-link" href="grpcView">
    <span class="oi oi-plus" aria-hidden="true"></span> Grpc View
</NavLink>

Gallery

UI usage

As you can see on the screens above - there is 4 method, for all gRPC call types. Each method representation includes:

• Request input field

This field contains serialized representation of your request model in the JSON format. Editable field

• Execute button

Press this button to start request processing

• Clear button

Press this button if you want to clear response value field

• Cancel button

Press this button if you want to stop current request processing. Request cancellation token will be used

• Response field

This field contains serialized representation of your response model in the JSON format. Non-editable field

Examples

You can find example projects which contains more detailed and practical example of setup and usage.

Tests

You can find basic tests in the test project. It heavily uses cloned repo of this prototype testing library.

Authors

• Hellevar - Initial work - Hellevar

Versions

• 0.9.0 - added ability to register and use several clients, added metadata provider
• 0.8.0 - initial work done, ability to register and use single client per page