How to setup Blazor Server with Blazor WASM with gRPC for virtual IIS application?

Matěj Rada 40

Hi,
I have simple Blazor Server without static files. It is only falling into Blazor WASM with static files using FallBackTo. There is gRPC an its Controller mapped on the main endpoint. Everythig is working on https://localhost. Once I try to deploy it on any IIS virtual application, I need to adjust base tag in index.html to this new route. From that, everything still working - even fallback. However Controller and gRPC communication is failing. What has to be done to support any IIS installation? (Seems to me, that I it somewhat expensive - to correct every endpoint - so I assume, that I am doing it wrong and there is simple setup with mapping or something like that.) URL is set in launch.json, so one would assume, that it can be corrected by this configuration.

Accepted answer

Rada Matěj 200

Now I understand everything. So, gRPC does not support IIS subpaths and we need to configure (HTTP2) handler:

public class GrpcSubdirectoryHandler : DelegatingHandler
    {
        private readonly Uri basePath;

        public GrpcSubdirectoryHandler(HttpMessageHandler innerHandler, Uri basePath)
            : base(innerHandler)
        {
            this.basePath = basePath;
        }

        protected override Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
        {
            var old = request.RequestUri;

            if (old == null)
            {
                return base.SendAsync(request, cancellationToken);
            }

            string url = $"{old.Scheme}://{old.Host}:{old.Port}{basePath.PathAndQuery}{old.AbsolutePath.TrimStart('/')}";
            request.RequestUri = new Uri(url, UriKind.Absolute);

            return base.SendAsync(request, cancellationToken);
        }
    }

Now channel:

var singleHttpHandler = new GrpcSubdirectoryHandler(new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler()), baseAddress);

builder.Services.AddSingleton(s =>
{
    string baseUri = s.GetRequiredService<NavigationManager>().BaseUri;
    var channel = GrpcChannel.ForAddress(baseUri, new GrpcChannelOptions { HttpHandler = singleHttpHandler });
    var client = new PersonContract.PersonContractClient(channel);
    return client;
});

Where GrpcWebHandler is absolutely important for HTTP2 usage. As for the rest of IIS subfolder routing, we can still enjoy full client-side WASM with all routing falling back, just that I need IIS subfolder input, it has to be solved on server-side CSHTML page. Since base tag is solved there, fallback just needs to be into that page:

app.MapFallbackToPage("/MainWASM");

__

@page
@model ANeT.WebGuard.Pages.MainWASMModel
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>WebGuard</title>
    <base href="@(HttpContext.Request.PathBase + (HttpContext.Request.PathBase.Value?.EndsWith('/') == true ? string.Empty : "/"))" />

So, I will map everything to specific virtual PATH and then just use URL rewritting to fit any IIS installation my customers do. This is working and tested solution.

1 additional answer

Bruce (SqlWork.com) 66,061 Reputation points

2024-05-10T16:41:23.12+00:00
when you set the base href="..", the browser uses this the base path for relative url even with fetch. but with the gRPC, you initial with the base path. you will need to add the virtual path to the gRPC setup.

var baseUri = services.GetRequiredService<NavigationManager>().BaseUri; // includes href var channel = GrpcChannel.ForAddress(baseUri, new GrpcChannelOptions { HttpClient = httpClient }); }

note: the launch url is just used by IIS, and the debugger to start the browser. if using core directly without IIS, it just uses the protocol and port.
Please sign in to rate this answer.
Rada Matěj 200 Reputation points

2024-05-13T06:52:25.9066667+00:00

That I have. However service is still mapped in URI base:

var app = builder.Build(); app.UsePathBase("/WebGuard"); // Configure the HTTP request pipeline. if (app.Environment.IsDevelopment()) { app.UseWebAssemblyDebugging(); } else { app.UseExceptionHandler("/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } //app.UseHttpsRedirection(); app.UseBlazorFrameworkFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseGrpcWeb(); app.MapRazorPages(); app.MapControllers(); app.MapGrpcService<ANeT.Server.Contracts.PersonContractService>() .EnableGrpcWeb(); //app.MapGrpcService<ANeT.Server.Contracts.MovieContractService>() // .EnableGrpcWeb(); app.MapFallbackToFile("index.html");

Now everything is working untill I want to call my gRPC service from .NET 8 WASM:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Status(StatusCode="Unimplemented", Detail="Bad gRPC response. HTTP status code: 404") Grpc.Core.RpcException: Status(StatusCode="Unimplemented", Detail="Bad gRPC response. HTTP status code: 404") at Grpc.Net.Client.Internal.HttpContentClientStreamReader2.<MoveNextCore>d__18[[ANeT.Contracts.Empty, ANeT.Contracts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[ANeT.Contracts.Person, ANeT.Contracts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext() at ANeT.WebGuardWASM.Shared.GrpcDataView3.<OnInitializedAsync>d__16[[ANeT.SharedData.Model.PersonModel, ANeT.SharedData, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[ANeT.Contracts.Person, ANeT.Contracts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[ANeT.Contracts.PersonContract.PersonContractClient, ANeT.Contracts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext() in C:\Users\and\source\ANeTWebGuard\ANeT.WebGuardWASM\Shared\GrpcDataView.razor.cs:line 33 at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync() at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Because it is routing to: https://localhost:44305/contracts.PersonContract/GetList

Not to: https://localhost:44305/WebGuard/contracts.PersonContract/GetList

Everything else is working on base tag:

<base href="/WebGuard/" />

Bruce (SqlWork.com) 66,061 Reputation points

2024-05-13T16:02:08.15+00:00

you configured the server code to strip "/WebGuard" from the url for routing, but you need to config the client gRPC code to add the path to the base url when defining the channel.

because you config the base url for a gRPC client channel, setting the browsers base href has no effect.

Matěj Rada 40 Reputation points

2024-05-13T16:18:33.1833333+00:00

Now I am just confused:

when you set the base href="..", the browser uses this the base path for relative url even with fetch

I was assuming, that so it means, that base tag shall resolve URL. Regardless, UsePathBase was just one of my attempts. With it or without it the result is gRPC call without /WebGuard/ subpath. One point is to configure it with defined subpath, another is to enable it working on any published path ... I literally do not understand what else should I set - server is set, channel has /WebGuard/, HttpClient has /WebGuard/, base tag has /WebGuard/. I even tried to map Blazor Server to /WebGuard/ and use endpoints on that map to run gRPC. Nothing seems to have any effect on Razor page gRPC call - still without /WebGuard/. And I have to configure it even for any subpath ... I was debugging both Blazor Server and Blazor WASM - every URL is correct ...

Bruce (SqlWork.com) 66,061 Reputation points

2024-05-13T20:13:40.5066667+00:00

but you are not calling fetch directly, you are using HttpClient(), which even though it will jsinterop to fetch to do the network call, it has no notion of a default base url. you must always set a base address and httpclient always passes an absolute url to fetch (so base href is not used). typically to configure HttpClient you would do something like this :

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

with client gRPC you also need to define BaseAddress used by HttpClient. you don't show this code so its hard to know what you got wrong.

Matěj Rada 40 Reputation points

2024-05-14T02:14:22.9133333+00:00

That I have as I said ... Both Channel and HttpClient are correctly set - Channel from Navigator (Debug says that /WebGuard/ is there) and HttpClient from HostEnvironment (Debug says that /WebGuard/ is there). Stil, Razor page is calling my service without /WebGuard/ ...

Rada Matěj 200 Reputation points

2024-05-14T05:15:52.1466667+00:00

The project is:

https://github.com/PacktPublishing/Building-Blazor-WebAssembly-Applications-with-gRPC/tree/main/ch5/02_demo_blazor/MediaLibrary

IIS configuration:

{ "iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { "applicationUrl": "http://localhost:1232", "sslPort": 44300 }, "iis": { "applicationUrl": "http://localhost/WebGuard", "sslPort": 44305 } }, "profiles": { "local": { "commandName": "IIS", "dotnetRunMessages": true, "launchBrowser": true, //"hotReloadEnabled": true, "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/WebGuard/_framework/debug/ws-proxy?browser={browserInspectUri}", "applicationUrl": "http://localhost/WebGuard", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development", "NO_PROXY": "localhost" } }

I've tried even this:

app.Map("/WebGuard", map => { map.UseGrpcWeb(); map.UseRouting(); map.UseEndpoints(endpoints => { endpoints.MapGrpcService<ANeT.Server.Contracts.PersonContractService>() .EnableGrpcWeb(); }); });

Client was always:

var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>("#app"); builder.RootComponents.Add<HeadOutlet>("head::after"); Uri baseAddress = new Uri(builder.HostEnvironment.BaseAddress); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = baseAddress }); builder.Services.AddAutoMapper(typeof(ANeT.SharedData.SharedMapperProfile)); var singleHttpClient = new HttpClient(new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler())) { BaseAddress = baseAddress }; builder.Services.AddSingleton(s => { var baseUri = s.GetRequiredService<NavigationManager>().BaseUri; var channel = GrpcChannel.ForAddress(baseUri, new GrpcChannelOptions { HttpClient = singleHttpClient }); var client = new PersonContract.PersonContractClient(channel); return client; });

(URL during Debug is always everywhere correct.)

The result after disabling cache still this:

POST https://localhost:44305/contracts.PersonContract/GetList net::ERR_ABORTED 404 (Not Found) S @ polyfills.ts:120 (anonymous) @ http.ts:70 Gr @ cancelable-promise.ts:20 $o @ http.ts:69 Co @ http.ts:48 (anonymous) @ invoke-js.ts:233 xl @ invoke-js.ts:276 $func349 @ 00b217ca:0x1fab3 $func245 @ 00b217ca:0x1bf5a $func238 @ 00b217ca:0xf141 $func272 @ 00b217ca:0x1d178 $func3184 @ 00b217ca:0xe8616 $func2504 @ 00b217ca:0xbe36c $func2510 @ 00b217ca:0xbeb90 $func2534 @ 00b217ca:0xc11e7 $mono_wasm_invoke_method_bound @ 00b217ca:0xa4f9 Module._mono_wasm_invoke_method_bound @ dotnet.native.8.0.4.74a9jgtx18.js:8 kr @ invoke-cs.ts:273 l.javaScriptExports.complete_task @ managed-exports.ts:142 (anonymous) @ marshal-to-cs.ts:335 Promise.then (async) mo @ marshal-to-cs.ts:329 (anonymous) @ marshal-to-cs.ts:83 (anonymous) @ invoke-js.ts:177 xl @ invoke-js.ts:276 $func349 @ 00b217ca:0x1fab3 $func245 @ 00b217ca:0x1bf5a $func238 @ 00b217ca:0xf141 $func272 @ 00b217ca:0x1d178 $func3184 @ 00b217ca:0xe8616 $func2504 @ 00b217ca:0xbe36c $func2503 @ 00b217ca:0xbe2fc $func1873 @ 00b217ca:0x9a3c2 $func349 @ 00b217ca:0x1fb37 $func245 @ 00b217ca:0x1bf5a $func238 @ 00b217ca:0xf141 $func272 @ 00b217ca:0x1d178 $func3184 @ 00b217ca:0xe8616 $func2504 @ 00b217ca:0xbe36c $func2510 @ 00b217ca:0xbeb90 $func2534 @ 00b217ca:0xc11e7 $mono_wasm_invoke_method_bound @ 00b217ca:0xa4f9 Module._mono_wasm_invoke_method_bound @ dotnet.native.8.0.4.74a9jgtx18.js:8 kr @ invoke-cs.ts:273 l.javaScriptExports.call_entry_point @ managed-exports.ts:60 Bc @ run.ts:44 callEntryPoint @ blazor.webassembly.js:1 mn @ blazor.webassembly.js:1 await in mn (async) fn @ blazor.webassembly.js:1 An @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1

Rada Matěj 200 Reputation points

2024-05-14T11:15:48.94+00:00

Am I stupid? How can that be?

Bruce (SqlWork.com) 66,061 Reputation points

2024-05-14T17:50:57.2+00:00

your not crazy. currently a subfolder path on a gRPC base address is not directly supported. you need to add a custom handler. see docs:

https://learn.microsoft.com/en-us/aspnet/core/grpc/troubleshoot?view=aspnetcore-8.0#calling-grpc-services-hosted-in-a-sub-directory

note: as gRPC encourages generated stubs, the subfolder path should be part of the api.

Matěj Rada 40 Reputation points

2024-05-14T18:45:01.5633333+00:00

I was chasing it for two days straight! No matter of Googling or Chat GPT. I was right the whole time - everything set correctly. Aaah. Thank you! OK, so you say, that I really need manually prepare every routing for IIS deployment into unspecified IIS path. I can handle it on server side - maby even with route rewriting. However Chat GPT was wrong, JS setting base tag is not working correctly - somehow WASM is loaded however with bunch of 404 scripts. So, must I say my customers to rewrite index.html for each deployment or prepare batch for base tag rewrite in IIS runtime or what?

Bruce (SqlWork.com) 66,061 Reputation points

2024-05-14T19:54:29.5333333+00:00

the issue with gRPC library is that it does not use the browsers base href, nor does it have OOTB support for a hosting subsite. you can create a handler to implement the feature. you could parse the baseUri to get the path (see my link).

if you want dynamic setting of base href at runtime rather than deploy, you can use a razor page host instead of index.html, and dynamically set the href. you can also have the website process the index.html and modify the href (parse or use token rather than using the static file handler (this is how I set the base href in my react sites hosted by asp.net).

note: gRPC is based on socket IO. socket connections are just a domain and port. in contrast gRPC-Web uses WebSockets. WebSockets allows a path to open the socket because it starts as a fetch (https get).
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to setup Blazor Server with Blazor WASM with gRPC for virtual IIS application?

1 additional answer

Your answer