[11.0 P5] Blazor Preview 5 updates

aspnetcore/blazor/debug.md

@@ -85,6 +85,35 @@ Unsupported scenarios for Blazor WebAssembly apps include:
 
 :::moniker-end
 
+:::moniker range=">= aspnetcore-11.0"
+
+## Blazor WebAssembly Gateway
+
+<!-- UPDATE 11.0 - Link to package when it's out.
+
+     [`Microsoft.AspNetCore.Components.Gateway`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Gateway)
+-->
+
+`Microsoft.AspNetCore.Components.Gateway` is a lightweight ASP.NET Core host for serving standalone Blazor WebAssembly apps during development and production.
+
+The Gateway is a full ASP.NET Core host, not merely a static-file dev tool, so standalone Blazor WebAssembly apps feature:
+
+* Built-in SPA fallback routing: Requests that don't match a static asset fall back to `index.html`, so client-side routes such as `/orders/42` work on browser refresh and direct navigation without a custom MSBuild target.
+* Multiple Blazor WebAssembly clients per host: A single Gateway instance can serve more than one Blazor WebAssembly client under different path prefixes, configured through its `ClientApps` section. This is the integration point .NET Aspire uses to host Blazor WebAssembly clients alongside backend services in a single AppHost run.
+* Built-in YARP reverse-proxy infrastructure: YARP is bundled with the Gateway, providing the foundation for forwarding backend traffic alongside the WebAssembly client and enabling the Aspire multi-client scenarios.
+
+To adopt the Gateway in an existing standalone Blazor WebAssembly app that targets .NET 11 or later, reference the `Microsoft.AspNetCore.Components.Gateway` package in the app's project file.
+
+[!INCLUDE[](~/includes/package-reference.md)]
+
+Custom routing code and middleware aren't required by the app. Fallback endpoints come from the static web assets manifest the SDK emits when the `StaticWebAssetSpaFallbackEnabled` property is set in the app's project file, which is present by default in standalone Blazor WebAssembly apps created from the project template:
+
+```xml
+<StaticWebAssetSpaFallbackEnabled>true</StaticWebAssetSpaFallbackEnabled>
+```
+
+:::moniker-end
+
 ## Prerequisites
 
 This section explains the prerequisites for debugging.
@@ -133,6 +162,8 @@ Installing the C# Dev Kit automatically installs the following additional extens
 
 If you encounter warnings or errors, you can [open an issue (`microsoft/vscode-dotnettools` GitHub repository)](https://github.com/microsoft/vscode-dotnettools/issues) describing the problem.
 
+:::moniker range="< aspnetcore-11.0"
+
 ### App configuration prerequisites
 
 *The guidance in this subsection applies to client-side debugging.*
@@ -152,6 +183,8 @@ The placeholder values for the WebSocket protocol (`wsProtocol`), host (`url.hos
 
 [!INCLUDE[](~/includes/default-launch-profile-for-dotnet-cli.md)]
 
+:::moniker-end
+
 ## Packages
 
 :::moniker range=">= aspnetcore-8.0"

aspnetcore/blazor/fundamentals/configuration.md

@@ -373,3 +373,22 @@ The following Razor component retrieves the settings with the [`@inject`](xref:m
 ```
 
 Not all of the ASP.NET Core Options features are supported in Razor components. For example, <xref:Microsoft.Extensions.Options.IOptionsSnapshot%601> and <xref:Microsoft.Extensions.Options.IOptionsMonitor%601> configuration is supported, but recomputing option values for these interfaces isn't supported outside of reloading the app by either requesting the app in a new browser tab or selecting the browser's reload button. Merely calling [`StateHasChanged`](xref:blazor/components/lifecycle#state-changes-statehaschanged) doesn't update snapshot or monitored option values when the underlying configuration changes.
+
+:::moniker range=">= aspnetcore-11.0"
+
+### Environment variables in Blazor WebAssembly configuration
+
+Blazor WebAssembly applications access environment variables through <xref:Microsoft.Extensions.Configuration.IConfiguration>. This enables runtime configuration without rebuilding the app, making it easier to deploy the same build to different environments.
+
+In the following example, the `API_ENDPOINT` and `ENABLE_FEATURE_X` environment variables are automatically included in configuration:
+
+```csharp
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+
+var apiEndpoint = builder.Configuration["API_ENDPOINT"];
+var featureFlag = builder.Configuration["ENABLE_FEATURE_X"];
+```
+
+Environment variables are loaded into the configuration system alongside other configuration sources, such as app settings (`appsettings.json`), providing a unified way to access configuration values regardless of their source.
+
+:::moniker-end

aspnetcore/blazor/fundamentals/environments.md

@@ -289,6 +289,36 @@ App settings from the `appsettings.{ENVIRONMENT}.json` file are loaded by the ap
 
 :::moniker-end
 
+:::moniker range=">= aspnetcore-11.0"
+
+## `EnvironmentBoundary` component
+
+<!-- UPDATE 11.0 - API Browser cross-links -->
+
+Use the `EnvironmentBoundary` component for conditional rendering based on the hosting environment. This component provides a consistent way to render content based on the current environment across both server-side and client-side hosting models.
+
+The `EnvironmentBoundary` component accepts `Include` and `Exclude` parameters for specifying environment names. The component performs case-insensitive matching.
+
+```razor
+@using Microsoft.AspNetCore.Components.Web
+
+<EnvironmentBoundary Include="Development">
+    <div class="alert alert-warning">
+        Debug mode enabled
+    </div>
+</EnvironmentBoundary>
+
+<EnvironmentBoundary Include="Development,Staging">
+    <p>Pre-production environment</p>
+</EnvironmentBoundary>
+
+<EnvironmentBoundary Exclude="Production">
+    <p>@DateTime.Now</p>
+</EnvironmentBoundary>
+```
+
+:::moniker-end
+
 ## Read the environment in a Blazor WebAssembly app
 
 Obtain the app's environment in a component by injecting <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment> and reading the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment.Environment> property.

aspnetcore/blazor/fundamentals/navigation.md

@@ -1165,11 +1165,42 @@ For more information on JavaScript isolation with JavaScript modules, see <xref:
 
 :::moniker-end
 
+:::moniker range=">= aspnetcore-11.0"
+
+## Navigate to an element at the current URI
+
+<!-- UPDATE 11.0 - API Browser cross-links and improve the example -->
+
+Use the `GetUriWithHash` extension method to construct a URI with a hash fragment. This helper method provides an efficient, zero-allocation way to append hash fragments to the current URI. The following example demonstrates two use cases:
+
+* Inline call that jumps to Section 1 (`id="section-1"`) of the rendered page.
+* Method call that receives a section identifier (`sectionId`) and navigates to the section of the page.
+
+```razor
+@inject NavigationManager Navigation
+
+<a href="@Navigation.GetUriWithHash("section-1")">
+    Jump to Section 1
+</a>
+
+@code {
+    private void NavigateToSection(string sectionId)
+    {
+        var uri = Navigation.GetUriWithHash(sectionId);
+        Navigation.NavigateTo(uri);
+    }
+}
+```
+
+The method uses `string.Create` for optimal performance and works correctly with non-root base URIs (for example, when using `<base href="/app/">`).
+
+:::moniker-end
+
 :::moniker range=">= aspnetcore-8.0"
 
-## Navigate to named elements
+## Navigate to an element with a hashed (`#`) reference
 
-Navigate to a named element using the following approaches with a hashed (`#`) reference to the element. Routes to elements within the component and routes to elements in external components use root-relative paths. A leading forward slash (`/`) is optional.
+Navigate to an element using the following approaches with a hashed (`#`) reference to the element. Routes to elements within the component and routes to elements in external components use root-relative paths. A leading forward slash (`/`) is optional.
 
 Examples for each of the following approaches demonstrate navigation to an element with an `id` of `targetElement` in the `Counter` component:
 
@@ -1191,7 +1222,68 @@ Examples for each of the following approaches demonstrate navigation to an eleme
   Navigation.NavigateTo("/counter#targetElement");
   ```
 
-The following example demonstrates navigating to named H2 headings within a component and to external components.
+:::moniker-end
+
+:::moniker range=">= aspnetcore-11.0"
+
+The following example demonstrates navigating to an H2 heading in an external component.
+
+> [!NOTE]
+> For element navigation at the same URI, see [Navigate to an element at the current URI](#navigate-to-an-element-at-the-current-uri).
+
+In the `Home` (`Home.razor`) and `Counter` (`Counter.razor`) components, place the following markup at the bottoms of the existing component markup to serve as navigation targets. The `<div>` creates artificial vertical space to demonstrate browser scrolling behavior:
+
+```razor
+<div class="border border-info rounded bg-info" style="height:500px"></div>
+
+<h2 id="targetElement">Target H2 heading</h2>
+<p>Content!</p>
+```
+
+Add the following `FragmentRouting` component to the app.
+
+`FragmentRouting.razor`:
+
+```razor
+@page "/fragment-routing"
+@inject NavigationManager Navigation
+
+<PageTitle>Fragment routing</PageTitle>
+
+<h1>Fragment routing to elements</h1>
+
+<ul>
+    <li>
+        <a href="/#targetElement">
+            Anchor to the <code>Home</code> component
+        </a>
+    </li>
+    <li>
+        <a href="/counter#targetElement">
+            Anchor to the <code>Counter</code> component
+        </a>
+    </li>
+    <li>
+        <button @onclick="NavigateToElement">
+            Navigate with <code>NavigationManager</code> to the 
+            <code>Counter</code> component
+        </button>
+    </li>
+</ul>
+
+@code {
+    private void NavigateToElement()
+    {
+        Navigation.NavigateTo("/counter#targetElement");
+    }
+}
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-8.0 < aspnetcore-11.0"
+
+The following example demonstrates navigating to H2 headings within a component and to external components.
 
 In the `Home` (`Home.razor`) and `Counter` (`Counter.razor`) components, place the following markup at the bottoms of the existing component markup to serve as navigation targets. The `<div>` creates artificial vertical space to demonstrate browser scrolling behavior:
 
@@ -1212,7 +1304,7 @@ Add the following `FragmentRouting` component to the app.
 
 <PageTitle>Fragment routing</PageTitle>
 
-<h1>Fragment routing to named elements</h1>
+<h1>Fragment routing to elements</h1>
 
 <ul>
     <li>

aspnetcore/blazor/fundamentals/signalr.md

@@ -80,6 +80,31 @@ For security implications, see <xref:blazor/security/interactive-server-side-ren
 
 :::moniker-end
 
+:::moniker range=">= aspnetcore-11.0"
+
+### SignalR `ConfigureConnection` for Interactive Server components
+
+<!-- UPDATE 11.0 - API Browser cross-links -->
+
+Blazor provides access to configure the underlying SignalR connection options when using Interactive Server components through the `ConfigureConnection` property on `ServerComponentsEndpointOptions`. This enables configuration of `HttpConnectionDispatcherOptions` properties.
+
+```csharp
+app.MapRazorComponents<App>()
+    .AddInteractiveServerRenderMode(options =>
+    {
+        options.ConfigureConnection = dispatcherOptions =>
+        {
+            dispatcherOptions.CloseOnAuthenticationExpiration = true;
+            dispatcherOptions.AllowStatefulReconnects = true;
+            dispatcherOptions.ApplicationMaxBufferSize = 1024 * 1024;
+        };
+    });
+```
+
+This provides a clean, type-safe API for configuring SignalR connection settings without needing to inspect endpoint metadata.
+
+:::moniker-end
+
 :::moniker range=">= aspnetcore-6.0"
 
 ## Disable response compression for Hot Reload