Set up Blazor hosting in the AppHost

Цей контент ще не доступний вашою мовою.

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:

TypeScript
C#

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.5.3"
  }
}

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="*" />

Add Blazor WebAssembly project

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

TypeScript
C#

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();

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();

Add Blazor Gateway

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

TypeScript
C#

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

const builder = await createBuilder();

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

await builder.build().run();

var builder = DistributedApplication.CreateBuilder(args);

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

builder.Build().Run();

Associate a client app with the gateway

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

TypeScript
C#

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();

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();