Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Is there any way to use ServiceDiscovery for client (aka browser) apps? #1536

Open
paule96 opened this issue Jan 3, 2024 · 8 comments
Open

Is there any way to use ServiceDiscovery for client (aka browser) apps? #1536

paule96 opened this issue Jan 3, 2024 · 8 comments
Labels
area-samples area-service-discovery
Milestone
Backlog

Comments

@paule96
Copy link
Contributor

paule96 commented Jan 3, 2024

Hi aspire team,

in my last try to use aspire I tried to add a blazor webassembly app to my project.

What I did so far is the following:

Add the blazor project to the aspire host with a reference to the backend:

using Aspire.Hosting;
var builder = DistributedApplication.CreateBuilder(args);

var server = builder.AddProject<Projects.ElsaServer>("elsaServer");
var webApp = builder.AddProject<Projects.ElsaStudio>("elsaStudio")
    .WithReference(server);

var app = builder.Build();
await app.RunAsync();

Now I added the required packages to get service discovery to my blazor project

    <PackageReference Include="Microsoft.Extensions.Http.Resilience" Version="8.0.0" />
    <PackageReference Include="Microsoft.Extensions.ServiceDiscovery" Version="8.0.0-preview.3.24052.7" />

Then I added in my Program.cs of my blazor project the following lines:

builder.Services.AddServiceDiscovery();
builder.Services.ConfigureHttpClientDefaults(http =>
{
    // Turn on resilience by default
    http.AddStandardResilienceHandler();

    // Turn on service discovery by default
    http.UseServiceDiscovery();
});

Then I use as BaseAddress for my httpClient http://elsaServer/elsa/api

But when I run my blazor application I always get a HTTP Request from the browser on http://elsaServer/elsa/api and not on http://localhost:43432/elsa/api.

Something seems to not work here. And I don't know how to fix it.

So what I would wish to do is something like:

builder.Services.AddServiceDiscovery("http://aspireHost/serviceDiscovery");

So you can specify in you client apps where aspire lives and provide an API that the clients can use to discover the services
@DamianEdwards
Copy link
Member

The service discovery system requires configuration to have the service name mapped to the actual underlying endpoint address. For server apps composed into the Aspire AppHost project, this happens automatically by injecting environment variables into the processes when they start, that have names that follow the service discovery system's configuration-based provider (and because ASP.NET Core configuration defaults to reading from environment variables, it works).

For browser apps, there's no such automatic flowing of configuration for service discovery. You'll need to somehow flow the configuration details to the browser. If the HTML is initially server-rendered, you could emit the details there into the page in some format, e.g. data- attributes on the <body> tag, etc., and then author a custom implementation of IServiceDiscoveryEndPointResolver in your Blazor client app that reads from wherever you injected the data to. You could instead host an endpoint yourself that the implementation calls to from the browser to resolve addresses.

I might have a go at putting together a sample as this question has come up a few times and it would be good to have something to point at.

@DamianEdwards DamianEdwards mentioned this issue Jan 12, 2024
Open
@paule96
Copy link
Contributor Author

paule96 commented Jan 15, 2024

@DamianEdwards maybe it would be nice to have a example how to host static content in aspire. Or what is the best way. I mean you can always deploy some kind of static website server but there are so many options out there that it could be a bit overwhelming to choose and also to build a good integration for it to aspire.

@ReubenBond
Copy link
Member

ReubenBond commented Jan 19, 2024 •
edited
Loading

Service Discovery does not support client-side apps today since, as @DamianEdwards said, there is no automatic flowing of configuration from the host to the client application. In the eShop sample, we use YARP to act as a proxy when the client needs to contact another service. In particular, loading images from the catalog: https://github.com/dotnet/eShop/blob/3b49f61a888656b038b5f044b0d4c5096fc9f073/src/WebApp/Program.cs#L29

For the MAUI frontend, we map each API which is needed by the app using a similar strategy here: https://github.com/dotnet/eShop/blob/3b49f61a888656b038b5f044b0d4c5096fc9f073/src/Mobile.Bff.Shopping/Program.cs#L12-L36

EDIT to clarify: in the eShop sample, instead of the clients communicating directly with backend API services, they only communicate directly with the service which the app is hosted on. That service proxies communication to the correct backend, using service discovery.

@yarseyah
Copy link

Is anything special needed to be done for the forwarder to make it work with Aspire's service discovery, e.g. I have added the following forwarder to Wasm Server:

app.MapForwarder("/api/weatherforecast", "http://apiservice", "/weatherforecast");

but I get the following error:

System.Net.Http.HttpRequestException: nodename nor servname provided, or not known (apiservice:80)

If I implement a new API in the server, and use HttpClient to manually make a call to the microservice, using the same http://apiservice it correctly communicates, so the service resolution works in the server, but not as part of the Yarp MapForwarder.

@davidfowl
Copy link
Member

@yarseyah yes, add a reference to Microsoft.Extensions.ServiceDiscovery.Yarp, and call AddHttpForwarderWithServiceDiscovery.

@davidfowl davidfowl mentioned this issue Jan 27, 2024
Closed
4 tasks
@davidfowl davidfowl added this to the Backlog milestone Mar 10, 2024
This was referenced May 26, 2024
Closed
Closed
@1iveowl
Copy link

1iveowl commented Jul 22, 2024 •
edited
Loading

@yarseyah yes, add a reference to Microsoft.Extensions.ServiceDiscovery.Yarp, and call AddHttpForwarderWithServiceDiscovery.

@davidfowl, as far as I can tell, adding a reference to Microsoft.Extensions.ServiceDiscovery.Yarp will not work for blazor webassembly clients, because Microsoft.Extensions.ServiceDiscovery.Yarp has a dependency to Microsoft.AspNetCore.App.

Trying to add Microsoft.Extensions.ServiceDiscovery.Yarp results in:

`Severity Code Description Project File Line Suppression State
Error (active) NETSDK1082 There was no runtime pack for Microsoft.AspNetCore.App available for the specified RuntimeIdentifier 'browser-wasm'. MyBlazor.Client C:\Program Files\dotnet\sdk\8.0.303\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.Sdk.FrameworkReferenceResolution.targets 491  
`

@DamianEdwards
Copy link
Member

@1iveowl that package would be added to the server project in the case of an ASP.NET Core hosted Blazor WASM project, if using YARP to forward requests from the Blazor WASM app to another backend service.

@BenjaminCharlton BenjaminCharlton mentioned this issue Jan 20, 2025
Closed
10 tasks
@BenjaminCharlton
Copy link

I believe this pull request (if it gets accepted) will do what you need with service discovery, @paule96.

In the meantime, this Nuget package does exactly the same thing for you. It doesn't make the Aspire developer experience with Blazor totally seamless, but it does overcome your particular problem. I'd be glad of feedback on the repo if you decide to try it.

@BenjaminCharlton BenjaminCharlton mentioned this issue Feb 11, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-samples area-service-discovery
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
8 participants
@davidfowl @ReubenBond @DamianEdwards @yarseyah @paule96 @maddymontaquila @1iveowl @BenjaminCharlton