CODEWITHSUNDEEP
blazorblazor-webassemblydotnet-aspire
Regestea
Regestea

Reputation: 792

how to add Aspire to blazor webassembly standalone app in .net 8

when i create new blazor webassembly project in visual studio i check the enlist in .net aspire orchestration box and it will be add to my project enter image description here

but when I started my project I couldn't see any blazor project running on Aspire

enter image description here

I have a few project with APIs and single blazor webassembly project and I want to add Aspire to them but it doesn't run blazor webassembly part

and also I tried to add it manually so my API was added but for blazor webassembly I getting error enter image description here

Upvotes: 2

Views: 2554

Answers (2)

benjamin
benjamin

Reputation: 1654

I had the same requirement as described above: to use Aspire with Blazor WebAssembly (client) apps.

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:

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");
    });

Upvotes: 1

Brian Parker
Brian Parker

Reputation: 14573

In the host project add a project reference to the WebAssembly application.

In the program.cs of the Host project BlazorApp38.AppHost add. enter image description here Select the WebAssembly project.

enter image description here

The source generator should then kick in. Projects.BlazorApp38 should be defined.

In program.cs cs simply add

builder.AddProject<Projects.BlazorApp38>("webapp");

var builder = DistributedApplication.CreateBuilder(args);
builder.AddProject<Projects.BlazorApp38>("webapp");
builder.Build().Run();

It should look like this.

Remember this app will be running in the clients browser..

enter image description here

I recommend using a hosted app with something like yarp to proxy to the internal api's of the distributed app, that's the point of using a framework like Aspire right?. The client can make secure calls to its host which uses a reverse proxy to resolve the internal aspire endpoint(s).

Upvotes: 5

Related Questions