Set up Blazor hosting in the AppHost

Ce contenu n’est pas encore disponible dans votre langue.

This article is the reference for the Aspire Blazor hosting integration. It lists the AppHost APIs — with examples for both AppHost.cs and apphost.mts — that you use to model Blazor WebAssembly projects and a Blazor Gateway in your AppHost project.

If you’re new to this integration, start with Get started with Blazor hosting. For how apps connect through the gateway and service discovery properties, see Connect Blazor apps and APIs.

Installation

To start building an Aspire app that uses Blazor hosting, install the 📦 Aspire.Hosting.Blazor NuGet package:

C#
TypeScript

aspire add Aspire.Hosting.Blazor

Learn more about aspire add in the command reference.

Or, choose a manual installation approach:

#:package Aspire.Hosting.Blazor@*

<PackageReference Include="Aspire.Hosting.Blazor" Version="*" />

aspire add Aspire.Hosting.Blazor

Learn more about aspire add in the command reference.

This updates your aspire.config.json with the Blazor hosting package:

{
  "packages": {
    "Aspire.Hosting.Blazor": "13.4.0"
  }
}

Add Blazor WebAssembly project

Use AddBlazorWasmProject / addBlazorWasmProject to add a Blazor WebAssembly project to the AppHost model.

C#
TypeScript

var builder = DistributedApplication.CreateBuilder(args);

var api = builder.AddProject<Projects.MyApi>("api");

var blazorApp = builder.AddBlazorWasmProject("app", "../MyBlazorApp/MyBlazorApp.csproj");
blazorApp.WithReference(api);

builder.Build().Run();

import { createBuilder } from './.aspire/modules/aspire.mjs';

const builder = await createBuilder();

const api = await builder.addProject('api', '../MyApi/MyApi.csproj');

const blazorApp = await builder
  .addBlazorWasmProject('app', '../MyBlazorApp/MyBlazorApp.csproj')
  .withReference(await api.getEndpoint('http'));

await builder.build().run();

Add Blazor Gateway

Use AddBlazorGateway / addBlazorGateway to add the Blazor Gateway resource. The gateway is the browser-facing endpoint for your hosted Blazor app.

C#
TypeScript

var builder = DistributedApplication.CreateBuilder(args);

var gateway = builder.AddBlazorGateway("gateway")
    .WithExternalHttpEndpoints();

builder.Build().Run();

import { createBuilder } from './.aspire/modules/aspire.mjs';

const builder = await createBuilder();

const gateway = await builder
  .addBlazorGateway('gateway')
  .withExternalHttpEndpoints();

await builder.build().run();

Associate a client app with the gateway

Use WithBlazorClientApp / withBlazorClientApp to bind the WebAssembly project resource to the Blazor Gateway:

C#
TypeScript

var builder = DistributedApplication.CreateBuilder(args);

var weatherApi = builder.AddProject<Projects.WeatherApi>("weatherapi");

var blazorApp = builder.AddBlazorWasmProject("app", "../MyBlazorApp/MyBlazorApp.csproj");
blazorApp.WithReference(weatherApi);

var gateway = builder.AddBlazorGateway("gateway")
    .WithExternalHttpEndpoints();

gateway.WithBlazorClientApp(blazorApp);

builder.Build().Run();

import { createBuilder } from './.aspire/modules/aspire.mjs';

const builder = await createBuilder();

const weatherApi = await builder.addProject(
  'weatherapi',
  '../WeatherApi/WeatherApi.csproj'
);

const blazorApp = await builder
  .addBlazorWasmProject('app', '../MyBlazorApp/MyBlazorApp.csproj')
  .withReference(await weatherApi.getEndpoint('http'));

await builder
  .addBlazorGateway('gateway')
  .withExternalHttpEndpoints()
  .withBlazorClientApp(blazorApp);

await builder.build().run();