# Set up Blazor hosting in the AppHost

<Image
  src={blazorIcon}
  alt="Blazor logo"
  width={100}
  height={100}
  class:list={'float-inline-left icon'}
  data-zoom-off
/>

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`](/get-started/app-host/) project.

If you're new to this integration, start with [Get started with Blazor hosting](/integrations/dotnet/blazor-get-started/). For how apps connect through the gateway and service discovery properties, see [Connect Blazor apps and APIs](../blazor-connect/).

## Installation

To start building an Aspire app that uses Blazor hosting, install the [📦 Aspire.Hosting.Blazor](https://www.nuget.org/packages/Aspire.Hosting.Blazor) NuGet package:

```bash title="Terminal"
aspire add Aspire.Hosting.Blazor
```

<LearnMore>
  Learn more about [`aspire add`](/reference/cli/commands/aspire-add/) in the
  command reference.
</LearnMore>

Or, choose a manual installation approach:

```csharp title="C# — AppHost.cs"
#:package Aspire.Hosting.Blazor@*
```

```xml title="XML — AppHost.csproj"
<PackageReference Include="Aspire.Hosting.Blazor" Version="*" />
```

```bash title="Terminal"
aspire add Aspire.Hosting.Blazor
```

<LearnMore>
  Learn more about [`aspire add`](/reference/cli/commands/aspire-add/) in the
  command reference.
</LearnMore>

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

```json title="aspire.config.json" ins={3}
{
  "packages": {
    "Aspire.Hosting.Blazor": "13.4.0"
  }
}
```

## Add Blazor WebAssembly project

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

```csharp title="C# — AppHost.cs"
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();
```

```typescript title="TypeScript — apphost.mts"
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.

```csharp title="C# — AppHost.cs"
var builder = DistributedApplication.CreateBuilder(args);

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

builder.Build().Run();
```

```typescript title="TypeScript — apphost.mts"
import { createBuilder } from './.aspire/modules/aspire.mjs';

const builder = await createBuilder();

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

await builder.build().run();
```

:::note
`WithExternalHttpEndpoints()` / `withExternalHttpEndpoints()` marks the gateway endpoint as externally accessible so browser traffic can reach your app.
:::

## Associate a client app with the gateway

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

```csharp title="C# — AppHost.cs"
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();
```

```typescript title="TypeScript — apphost.mts"
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();
```
**Note:** When you reference API endpoints from a Blazor app resource, Aspire publishes
  service discovery connection properties to the consuming app. For details and
  examples, see [Connect Blazor apps and APIs](../blazor-connect/).

## See also

- [Get started with Blazor hosting](/integrations/dotnet/blazor-get-started/)
- [Connect Blazor apps and APIs](/integrations/dotnet/blazor-connect/)
- [Aspire integrations overview](/integrations/overview/)