Add Aspire.Hosting.Blazor integration for Blazor WebAssembly apps

Aspire.slnx

@@ -75,6 +75,7 @@
     <Project Path="src/Aspire.Hosting.SqlServer/Aspire.Hosting.SqlServer.csproj" />
     <Project Path="src/Aspire.Hosting.Tasks/Aspire.Hosting.Tasks.csproj" />
     <Project Path="src/Aspire.Hosting.Valkey/Aspire.Hosting.Valkey.csproj" />
+    <Project Path="src/Aspire.Hosting.Blazor/Aspire.Hosting.Blazor.csproj" />
     <Project Path="src/Aspire.Hosting.Yarp/Aspire.Hosting.Yarp.csproj" />
     <Project Path="src/Aspire.Hosting/Aspire.Hosting.csproj" />
     <Project Path="src/Aspire.TypeSystem/Aspire.TypeSystem.csproj" />
@@ -112,6 +113,14 @@
     <File Path="playground/README.md" />
     <Project Path="playground/Playground.ServiceDefaults/Playground.ServiceDefaults.csproj" />
   </Folder>
+  <Folder Name="/playground/AspireWithBlazorHosted/">
+    <Project Path="playground/AspireWithBlazorHosted/AspireWithBlazorHosted.AppHost/AspireWithBlazorHosted.AppHost.csproj" />
+    <Project Path="playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Server/AspireWithBlazorHosted.csproj" />
+    <Project Path="playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/AspireWithBlazorHosted.Client.csproj" />
+    <Project Path="playground/AspireWithBlazorHosted/AspireWithBlazorHosted.ClientServiceDefaults/AspireWithBlazorHosted.ClientServiceDefaults.csproj" />
+    <Project Path="playground/AspireWithBlazorHosted/AspireWithBlazorHosted.WeatherApi/AspireWithBlazorHosted.WeatherApi.csproj" />
+    <Project Path="playground/AspireWithBlazorHosted/AspireWithBlazorHosted.ServiceDefaults/AspireWithBlazorHosted.ServiceDefaults.csproj" />
+  </Folder>
   <Folder Name="/playground/AspireWithJavaScript/">
     <Project Path="playground/AspireWithJavaScript/AspireJavaScript.AppHost/AspireJavaScript.AppHost.csproj" />
     <Project Path="playground/AspireWithJavaScript/AspireJavaScript.MinimalApi/AspireJavaScript.MinimalApi.csproj" />
@@ -487,6 +496,7 @@
     <Project Path="tests/Aspire.Hosting.Testing.Tests/Aspire.Hosting.Testing.Tests.csproj" />
     <Project Path="tests/Aspire.Hosting.Tests/Aspire.Hosting.Tests.csproj" />
     <Project Path="tests/Aspire.Hosting.Valkey.Tests/Aspire.Hosting.Valkey.Tests.csproj" />
+    <Project Path="tests/Aspire.Hosting.Blazor.Tests/Aspire.Hosting.Blazor.Tests.csproj" />
     <Project Path="tests/Aspire.Hosting.Yarp.Tests/Aspire.Hosting.Yarp.Tests.csproj" />
   </Folder>
   <Folder Name="/tests/TestingAppHost1/">

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.AppHost/AspireWithBlazorHosted.AppHost.csproj

@@ -0,0 +1,29 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <OutputType>Exe</OutputType>
+    <TargetFramework>$(DefaultTargetFramework)</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <IsAspireHost>true</IsAspireHost>
+    <UserSecretsId>a1b2c3d4-e5f6-7890-abcd-ef1234567890</UserSecretsId>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Compile Include="..\..\KnownResourceNames.cs" Link="KnownResourceNames.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <AspireProjectOrPackageReference Include="Aspire.Hosting" />
+    <AspireProjectOrPackageReference Include="Aspire.Hosting.AppHost" />
+    <AspireProjectOrPackageReference Include="Aspire.Hosting.Blazor" />
+    <!-- AppHost runs on .NET 10; pin Http to 10.x to match Aspire.Hosting -->
+    <PackageReference Include="Microsoft.Extensions.Http" VersionOverride="$(MicrosoftExtensionsHttpPreviewVersion)" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\AspireWithBlazorHosted.Server\AspireWithBlazorHosted.csproj" />
+    <ProjectReference Include="..\AspireWithBlazorHosted.WeatherApi\AspireWithBlazorHosted.WeatherApi.csproj" />
+  </ItemGroup>
+
+</Project>

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.AppHost/Program.cs

@@ -0,0 +1,9 @@
+var builder = DistributedApplication.CreateBuilder(args);
+
+var weatherApi = builder.AddProject<Projects.AspireWithBlazorHosted_WeatherApi>("weatherapi");
+
+builder.AddProject<Projects.AspireWithBlazorHosted>("blazorapp")
+    .ProxyService(weatherApi)
+    .ProxyTelemetry();
+
+builder.Build().Run();

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.AppHost/Properties/launchSettings.json

@@ -0,0 +1,17 @@
+{
+  "profiles": {
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:17199",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "DOTNET_ENVIRONMENT": "Development",
+        "DOTNET_DASHBOARD_OTLP_ENDPOINT_URL": "https://localhost:21199",
+        "DOTNET_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "https://localhost:18890",
+        "DOTNET_RESOURCE_SERVICE_ENDPOINT_URL": "https://localhost:22199"
+      }
+    }
+  }
+}

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/AspireWithBlazorHosted.Client.csproj

@@ -0,0 +1,21 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>$(DefaultTargetFramework)</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
+    <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
+    <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables" VersionOverride="8.0.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\AspireWithBlazorHosted.ClientServiceDefaults\AspireWithBlazorHosted.ClientServiceDefaults.csproj" />
+  </ItemGroup>
+
+</Project>

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/Pages/Counter.razor

@@ -0,0 +1,19 @@
+@page "/counter"
+@rendermode InteractiveWebAssembly
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    private int currentCount = 0;
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/Pages/Weather.razor

@@ -0,0 +1,68 @@
+@page "/weather"
+@rendermode InteractiveWebAssembly
+@inject IHttpClientFactory HttpClientFactory
+
+<PageTitle>Weather</PageTitle>
+
+<h1>Weather</h1>
+
+<p>This component demonstrates fetching data from the WeatherAPI service via Aspire service discovery.</p>
+
+@if (errorMessage != null)
+{
+    <div class="alert alert-danger">@errorMessage</div>
+}
+else if (forecasts == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Temp. (C)</th>
+                <th>Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var forecast in forecasts)
+            {
+                <tr>
+                    <td>@forecast.Date.ToShortDateString()</td>
+                    <td>@forecast.TemperatureC</td>
+                    <td>@forecast.TemperatureF</td>
+                    <td>@forecast.Summary</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}
+
+@code {
+    private WeatherForecast[]? forecasts;
+    private string? errorMessage;
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            var client = HttpClientFactory.CreateClient("weatherapi");
+            forecasts = await client.GetFromJsonAsync<WeatherForecast[]>("weatherforecast");
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Failed to fetch weather data: {ex.Message}";
+        }
+    }
+
+    public class WeatherForecast
+    {
+        public DateOnly Date { get; set; }
+        public int TemperatureC { get; set; }
+        public string? Summary { get; set; }
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+}

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/Program.cs

@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Hosting;
+using OpenTelemetry.Metrics;
+using OpenTelemetry.Trace;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+
+// Environment variables are injected via JS initializer into MonoConfig.environmentVariables.
+// They are available via Environment.GetEnvironmentVariable() but NOT automatically in IConfiguration.
+// Service Discovery reads from IConfiguration, so we add environment variables to configuration.
+builder.Configuration.AddEnvironmentVariables();
+
+// Add Aspire service defaults (OpenTelemetry, service discovery, resilience)
+builder.AddBlazorClientServiceDefaults();
+
+// Named HttpClient for the weather API - uses service discovery to resolve "weatherapi"
+builder.Services.AddHttpClient("weatherapi", client =>
+{
+    client.BaseAddress = new Uri("https+http://weatherapi");
+});
+
+var host = builder.Build();
+
+// WebAssembly does not support IHostedService, so TelemetryHostedService is never started.
+// We must force initialization of MeterProvider and TracerProvider manually.
+// See: https://github.com/dotnet/aspire/issues/2816
+_ = host.Services.GetService<MeterProvider>();
+_ = host.Services.GetService<TracerProvider>();
+
+await host.RunAsync();

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/_Imports.razor

@@ -0,0 +1,9 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using AspireWithBlazorHosted.Client

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/wwwroot/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.Client/wwwroot/appsettings.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

playground/AspireWithBlazorHosted/AspireWithBlazorHosted.ClientServiceDefaults/AspireWithBlazorHosted.ClientServiceDefaults.csproj

@@ -0,0 +1,23 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>$(DefaultTargetFramework)</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <SupportedPlatform Include="browser" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" />
+    <PackageReference Include="Microsoft.Extensions.Http.Resilience" />
+    <PackageReference Include="Microsoft.Extensions.ServiceDiscovery" />
+    <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" />
+    <PackageReference Include="OpenTelemetry.Extensions.Hosting" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.Http" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.Runtime" />
+  </ItemGroup>
+
+</Project>