For an Aspire host that defines a stand-alone Blazor WebAssembly client and a web API

In your AppHost project

1. Install Aspire4Wasm.AppHost via the Nuget package.
2. In Program.cs: a. Add the Web Api project(s) the usual way, with builder.AddProject. b. Add the stand-alone Blazor WebAssembly project(s) with builder.AddStandaloneBlazorWebAssemblyProject. c. Chain calls to WithReference in one or both directions. That is, the client(s) need(s) a reference to any API(s) and the API(s) need a reference any client(s) that call it. If you've configured AllowAnyOrigin in CORS (which isn't very isn't very secure) then your API(s) won't need references to clients.
3. For example:

In your stand-alone Blazor WebAssembly project

1. Install Aspire4Wasm.WebAssembly via the Nuget package.
2. In Program.cs: a. Call builder.AddServiceDefaults(). This adds Aspire service discovery to your Blazor WebAssembly app and also configures every HttpClient to use it by default. b. Configure your services that call APIs like this: builder.Services.AddHttpClient<WeatherApiClient>(client => client.BaseAddress = new Uri("https+http://api")); where (in this case) "api" is the arbitrary resource name you gave to the web API in the AppHost's Program.cs.
3. Example:

4. Change Properties\launchSettings.json so that launchBrowser is false. You want your Aspire dashboard to launch when you run your app, not your Blazor app. If your Blazor app launches directly it will be at a randomly assigned port in Kestrel and nothing will work.

In your ASP .NET Core Web API project

1. Install Aspire4Wasm.WebApi via the Nuget package.
2. In Program.cs a. Call builder.AddServiceDefaults(); This adds Aspire service discovery to your ASP .NET Core Web API so it can find the references you passed to your API clients. b. Configure CORS using one of the helper methods on builder.Configuration. They are GetServiceEndpoint(string, string), GetServiceEndpoints(string) and GetServiceEndpoints(params string). Assuming your app has one client, the simplest overload will work fine. The example below assumes you named the client resource "blazor" in your Aspire AppHost.

For an Aspire host that defines a hosted Blazor WebAssembly client and a web API

In your AppHost project

1. Install Aspire4Wasm.AppHost via the Nuget package.
2. In Program.cs: a. Add the Web Api project(s) the usual way, with builder.AddProject. b. Add your Blazor Server project with builder.AddProject as usual, then chain a call to AddWebAssemblyClient to add your client app. c. Chain calls to WithReference in one or both directions. That is, the client(s) need(s) a reference to any API(s) and the API(s) need a reference any client(s) that call it. If you've configured AllowAnyOrigin in CORS (which isn't very isn't very secure) then your API(s) won't need references to clients.
3. Example:

In your Blazor Server project

No Aspire4Wasm Nuget package necessary in this project.

In your Blazor WebAssembly project

1. Install Aspire4Wasm.WebAssembly via the Nuget package.
2. In Program.cs: a. Call builder.AddServiceDefaults(). This adds Aspire service discovery to your Blazor WebAssembly app and also configures every HttpClient to use it by default. b. Configure your services that call APIs like this: builder.Services.AddHttpClient<IWeatherClient, WeatherApiClient>(client => client.BaseAddress = new Uri("https+http://api")); where (in this case) "api" is the arbitrary resource name you gave to the web API in the AppHost's Program.cs. The above example assumes that you're going to use one implementation of IWeatherClient when the page is rendered (or pre-rendered) on the server, and a different implementation when it is rendered on the client. This pattern will be familiar for people accustomed to InteractiveAuto render mode.
3. Example:

4. Change Properties\launchSettings.json so that launchBrowser is false. You want your Aspire dashboard to launch when you run your app, not your Blazor app. If your Blazor app launches directly it will be at a randomly assigned port in Kestrel and nothing will work.

In your ASP .NET Core Web API project

1. Install Aspire4Wasm.WebApi via the Nuget package.
2. In Program.cs a. Call builder.AddServiceDefaults(); This adds Aspire service discovery to your ASP .NET Core Web API so it can find the references you passed to your API clients. b. Configure CORS using one of the helper methods on builder.Configuration. They are GetServiceEndpoint(string, string), GetServiceEndpoints(string) and GetServiceEndpoints(params string). Assuming your app has one client, the simplest overload will work fine. The example below assumes you named your Blazor host project "hostedblazor" in your Aspire AppHost. That's right, you're using the name you gave to your Blazor Server host project here, but it will also grant access to your Blazor WebAssembly client project.

What it's doing under the hood

All the examples use Aspire4Wasm's default behaviour. That is, AppHost will write the service discovery information for all the referenced resources into the appsettings.{environmentName}.json file of your client apps for you. It uses the following structure. The structure is important because it allows Aspire to "discover" the information on the client.

Custom behaviours (optional)

If you want to serialize the service discovery information some other way in your WebAssembly application (for example, in a different JSON file, or in an XML file) you can.

1. First create a custom implementation of IServiceDiscoveryInfoSerializer
2. Then in the Program.cs of your AppHost, pass your custom implementation to the call to AddWebAssemblyClient via the WebAssemblyProjectBuilderOptions class, like this:

If you choose to make a custom implementation of IServiceDiscoveryInfoSerializer, you only need to override one method:

Note: If you choose to override the default behaviour with an output format that Aspire can't read from your WebAssembly client app, you'll also need to override the discovery behaviour on the client, which is outside the scope of what I've developed here.

Tips and Troubleshooting

I'll document here whenever I encounter a problem and (hopefully) how to overcome it.

1. I recommend extracting the names of your Aspire resources (e.g. "billingapi" and "inventoryapi") into a string constant in a project shared by the AppHost and all the other projects. That way, you can be sure the name is consistent throughout the whole solution.
2. Change Properties\launchSettings.json so that launchBrowser is false in all projects except your AppHost. You want your Aspire dashboard to launch when you run your app, not your Blazor apps. If your Blazor apps do launch directly, they'll be at a randomly assigned port in Kestrel and nothing will work.

<<<<<<< HEAD

var webApi = builder.AddProject<Projects.InMyCountry_WebApi>("inventoryApi") .WithReference(blazorServer); // This will pass the endpoint URL of the Blazor app to the web API so that it can be added as a trusted origin in CORS.

blazorServer.AddWebAssemblyClient<Projects.InMyCountry_UI_Client>("blazorWasmClient") // Now we can add the Blazor WebAssembly (client) app in the Aspire4Wasm package. .WithReference(webApi); // And pass the Blazor client a reference to the web API

builder.Build().Run();

services__webclientapp__http__0 = http://localhost:56481 services__webclientapp__https__0 = http://localhost:56480

var builder = WebApplication.CreateBuilder(args); builder.AddServiceDefaults();

var clients = GetAllowedOrigins(builder.Configuration, "blazorWasmClient"); // Get the clients from the environment variables. The second argument needs to be the resource name you passed when calling AddWebAssemblyClient in Program.cs of the AppHost project.

builder.Services.AddCors(options => { options.AddDefaultPolicy(policy => { policy.WithOrigins(clients); // Add the clients as allowed origins for cross origin resource sharing. policy.AllowAnyMethod(); policy.WithHeaders("X-Requested-With"); policy.AllowCredentials(); }); });

private static string[] GetAllowedOrigins(ConfigurationManager config, string resourceName) { var configSection = config.GetSection($"services:{resourceName}"); var clients = new List<string>(); foreach (var protocol in new[] { "http", "https" }) { var subSection = configSection.GetSection(protocol); foreach (var child in subSection.GetChildren()) { var value = child.Get<string>(); if (!string.IsNullOrWhiteSpace(value)) { clients.Add(value); } } }

}

// Etc.