Aspire doesn't replace http client Uri with actual address in blazor webassembly standalone app because it don't have appsettings.json

[Regestea]

Describe the bug

i referenced the blazor project to Aspire app host so this is my aspire app host code

using AnswerMe.Aspire.AppHost;
    
    var builder = DistributedApplication.CreateBuilder(args);
    
    var identityServerDb=builder.AddPostgres("identityserver", password: builder.CreateStablePassword("AnswerMeDB-password"))
        .WithDataVolume()
        .WithPgAdmin()
        .AddDatabase("IdentityServerDb");
    
    var identityServerApi = builder.AddProject<Projects.IdentityServer_Api>("identityserverapi")
        .WithReference(identityServerDb);
    
    var client = builder.AddProject<Projects.AnswerMe_Client>("answermeclient")
        .WithReference(identityServerApi);
    
    builder. Build().Run();

and this is my blazor code to add HTTP client

builder.Services.AddHttpClient(nameof(HttpClients.IdentityServer),
    client => { client.BaseAddress = new("http://identityserverapi"); });

so as you can see in the result it doesn't replace the http://identityserverapi with the actual address

and also i found the builder.Configuration.GetConnectionString("identityserverapi"); doesn't work because we don't have appsettings.json in blazor wasm so i think Aspire doesn't work fo the blazor wasm

[yarseyah]

Have you added builder.AddServiceDefaults() and app.MapDefaultEndpoints() to ensure the service discovery is included in your web application?

Service discovery doesn't work on the Wasm side, you need to look into Yarp on the web-server side of the Blazor solution and redirect to the API.

[Regestea]

@yarseyah I tried to add builder.AddServiceDefaults() in Wasm project program.cs file but it gave me a lot of error, and also we don't have app in Blazor Web assembly standalone so I can't use app.MapDefaultEndpoints()and also I take looked at builder.Configuration of my blazor project and it's almost empty

[yarseyah]

I'm not sure there are any Aspire components that make sense for the Blazor Wasm. You can add service discovery, etc., to the Blazor Server, but your client is entirely standalone—you want to send your API calls to the server and have the server, via Yarp, redirect your requests to the API.

[fgilde]

If your client project is still <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> you need to change this to <Project Sdk="Microsoft.NET.Sdk.Web"> and then you need to use the WebApplicationBuilder instead of the WebAssemblyHostBuilder
I tried this in my project as well and I was able to compile and run it but with many many problems later on. Like Authentication and so on. So my Client Project wasnt working anymore so I rollback my changes

If you want to try it on your project https://learn.microsoft.com/de-de/aspnet/core/migration/70-80?view=aspnetcore-9.0&tabs=visual-studio

[ixAtomic]

If your client project is still <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> you need to change this to <Project Sdk="Microsoft.NET.Sdk.Web"> and then you need to use the WebApplicationBuilder instead of the WebAssemblyHostBuilder I tried this in my project as well and I was able to compile and run it but with many many problems later on. Like Authentication and so on. So my Client Project wasnt working anymore so I rollback my changes

If you want to try it on your project https://learn.microsoft.com/de-de/aspnet/core/migration/70-80?view=aspnetcore-9.0&tabs=visual-studio

Doesnt that just make the application run server side?

[BenjaminCharlton]

I had the same requirement as described above.

Yes, you can add the URLs to web APIs that your Blazor WebAssembly (client) app needs to call in the client's appsettings.json files, and that works ok. You can even specify different URLs in for different environments in appSettings.{environmentName}.json and that works fine too. However, you'll have to remember to maintain the endpoints in the client app if they change in the distributed app, and that's exactly the pain-point that Aspire is designed to address.

I made a Nuget package that expands the existing functionality of Aspire to work for Blazor WebAssembly (client) apps:

• https://www.nuget.org/packages/Aspire4Wasm/
• https://github.com/BenjaminCharlton/Aspire4Wasm

If you install the Nuget package in your AppHost project and follow the instructions in the README.md then your distributed application host will put the service discovery information in the appropriate appsettings.{environment}.json file of the Blazor WebAssembly (client) app. I've targeted .NET 8 and 9.

It's only five more classes and it doesn't change any of the existing codebase of Aspire.

Please can you let me know if you like the implementation and contribute improvements on GitHub if you wish?
I would like to submit this as a pull request for the Aspire team to (hopefully) merge.

It's as simple as the below (in Program.cs of your AppHost project)

var builder = DistributedApplication.CreateBuilder(args);

var inventoryApi = builder.AddProject<Projects.AspNetCoreWebApi>("inventoryapi");
var billingApi = builder.AddProject<Projects.SomeOtherWebApi>("billingapi");

builder.AddProject<Projects.Blazor>("blazorserverapp")
    .AddWebAssemblyClient<Projects.Blazor_Client>("blazorwasmclient")
    .WithReference(inventoryApi)
    .WithReference(billingApi);

builder.Build().Run();

Then in Program.cs of the client app:

builder.Services.AddServiceDiscovery();
builder.Services.ConfigureHttpClientDefaults(static http =>
{
    http.AddServiceDiscovery();
});

builder.Services.AddHttpClient<IInventoryService, InventoryService>(
    client =>
    {
        client.BaseAddress = new Uri("https+http://inventoryapi");
    });

    builder.Services.AddHttpClient<IBillingService, BillingService>(
    client =>
    {
        client.BaseAddress = new Uri("https+http://billingapi");
    });

[BenjaminCharlton]

I've just sent a pull request to the Aspire team to integrate the Aspire4Wasm functionality into the framework. It's here: #7162

I said:

These changes allow Aspire service discovery to work in a hosted Blazor WebAssembly app. It basically integrates my Nuget package Aspire4Wasm into Aspire (with the addition of a few classes and changing none of the existing ones). The changes allow an Aspire AppHost to define the web API (or APIs) that a Blazor app should access, and to pass that service discovery information to the app by writing to its appsettings.json files.

It does not make the developer experience with Blazor in Aspire totally seamless. For example, I'm still having difficulty with stand-alone Blazor WebAssembly apps, and I haven't figured out how to stop the app launching on a random port as well as the one specified in launchsettings.json. However, it is a big step in the right direction. If you want to see what it does before accepting the changes, please try the Nuget package Aspire4Wasm (version 3.0.0 at the time of writing).

Maybe this will get accepted and prompt further improvements for Blazor developers working with Aspire. I believe Aspire makes perfect sense for Blazor Wasm and the two technologies could work very well together given the chance.