From b57e6e279093b8c47ddfdcc1302d5226a804bcbc Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 5 Nov 2024 08:35:44 -0500 Subject: [PATCH 1/6] Map Static Assets isn't middleware --- aspnetcore/blazor/file-downloads.md | 2 +- .../blazor/fundamentals/static-files.md | 28 +++++++++---------- .../tutorials/movie-database-app/part-1.md | 2 +- .../aspnetcore-9/includes/blazor.md | 8 +++--- .../includes/web_asset_delivery.md | 4 +-- 5 files changed, 22 insertions(+), 22 deletions(-) diff --git a/aspnetcore/blazor/file-downloads.md b/aspnetcore/blazor/file-downloads.md index e36a0e004eec..a55425f3353b 100644 --- a/aspnetcore/blazor/file-downloads.md +++ b/aspnetcore/blazor/file-downloads.md @@ -20,7 +20,7 @@ Files can be downloaded from the app's own static assets or from any other locat :::moniker range=">= aspnetcore-9.0" -* ASP.NET Core apps use Map Static Assets Middleware or Static File Middleware to serve files to clients of server-side apps. For more information, see . +* ASP.NET Core apps use Map Static Assets routing endpoint conventions or Static File Middleware to serve files to clients of server-side apps. For more information, see . * The guidance in this article also applies to other types of file servers that don't use .NET, such as Content Delivery Networks (CDNs). :::moniker-end diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 6eab79935e3f..8cc21383820d 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -14,20 +14,20 @@ uid: blazor/fundamentals/static-files This article describes Blazor app configuration for serving static files. -## Static asset middleware +## Static assets *This section applies to server-side Blazor apps.* :::moniker range=">= aspnetcore-9.0" -Serving static assets is managed by either of the two middlewares described in the following table. +Serving static assets is managed by either routing endpoint conventions or a middleware described in the following table. -Middleware | API | .NET Version | Description +Feature | API | .NET Version | Description --- | --- | :---: | --- -Map Static Assets | | .NET 9 or later | Optimizes the delivery of static assets to clients. -Static Files | | All .NET versions | Serves static assets to clients without the optimizations of Map Static Assets Middleware but useful for some tasks that Map Static Assets Middleware isn't capable of managing. +Map Static Assets routing endpoint conventions | | .NET 9 or later | Optimizes the delivery of static assets to clients. +Static Files Middleware | | All .NET versions | Serves static assets to clients without the optimizations of Map Static Assets but useful for some tasks that Map Static Assets isn't capable of managing. -Configure Map Static Assets Middleware by calling in the app's request processing pipeline, which performs the following: +Configure Map Static Assets by calling in the app's request processing pipeline, which performs the following: * Sets the [ETag](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) and [Last-Modified](https://developer.mozilla.org/docs/Web/HTTP/Headers/Last-Modified) headers. * Sets [caching headers](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control). @@ -36,13 +36,13 @@ Configure Map Static Assets Middleware by calling in most situations. However, Map Static Assets Middleware is optimized for serving the assets from known locations in the app at build and publish time. If the app serves assets from other locations, such as disk or embedded resources, should be used. +Map Static Assets can replace in most situations. However, Map Static Assets is optimized for serving the assets from known locations in the app at build and publish time. If the app serves assets from other locations, such as disk or embedded resources, should be used. -Map Static Assets Middleware () replaces calling in apps that serve Blazor WebAssembly framework files, and explicitly calling in a Blazor Web App isn't necessary because the API is automatically called when invoking . +Map Static Assets () replaces calling in apps that serve Blazor WebAssembly framework files, and explicitly calling in a Blazor Web App isn't necessary because the API is automatically called when invoking . -Map Static Assets Middleware provides the following benefits that aren't available when calling : +Map Static Assets provides the following benefits that aren't available when calling : * Build-time compression for all the assets in the app, including JavaScript (JS) and stylesheets but excluding image and font assets that are already compressed. [Gzip](https://tools.ietf.org/html/rfc1952) (`Content-Encoding: gz`) compression is used during development. Gzip with [Brotli](https://tools.ietf.org/html/rfc7932) (`Content-Encoding: br`) compression is used during publish. * [Fingerprinting](https://developer.mozilla.org/docs/Glossary/Fingerprinting) for all assets at build time with a [Base64](https://developer.mozilla.org/docs/Glossary/Base64)-encoded string of the [SHA-256](xref:System.Security.Cryptography.SHA256) hash of each file's content. This prevents reusing an old version of a file, even if the old file is cached. Fingerprinted assets are cached using the [`immutable` directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#directives), which results in the browser never requesting the asset again until it changes. For browsers that don't support the `immutable` directive, a [`max-age` directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#directives) is added. @@ -61,22 +61,22 @@ When [Interactive WebAssembly or Interactive Auto render modes](xref:blazor/fund * During WebAssembly boot, Blazor retrieves the URL, imports the module, and calls a function to retrieve the asset collection and reconstruct it in memory. The URL is specific to the content and cached forever, so this overhead cost is only paid once per user until the app is updated. * The resource collection is also exposed at a human-readable URL (`_framework/resource-collection.js`), so JS has access to the resource collection for [enhanced navigation](xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling) or to implement features of other frameworks and third-party components. -Map Static Assets Middleware doesn't provide features for minification or other file transformations. Minification is usually handled by custom code or [third-party tooling](xref:blazor/fundamentals/index#community-links-to-blazor-resources). +Map Static Assets doesn't provide features for minification or other file transformations. Minification is usually handled by custom code or [third-party tooling](xref:blazor/fundamentals/index#community-links-to-blazor-resources). -Static File Middleware () is useful in the following situations that Map Static Assets Middleware () can't handle: +Static File Middleware () is useful in the following situations that Map Static Assets () can't handle: * Applying a path prefix to Blazor WebAssembly static asset files, which is covered in the [Prefix for Blazor WebAssembly assets](#prefix-for-blazor-webassembly-assets) section. * Configuring file mappings of extensions to specific content types and setting static file options, which is covered in the [File mappings and static file options](#file-mappings-and-static-file-options) section. For more information, see . -## Consume assets with Map Static File Middleware +## Deliver assets with Map Static Assets routing endpoint conventions *This section applies to server-side Blazor apps.* -Assets are consumed via the `ComponentBase.Assets` property, which resolves the fingerprinted URL for a given asset. In the following example, Bootstrap, the Blazor project template app stylesheet (`app.css`), and the [CSS isolation stylesheet](xref:blazor/components/css-isolation) are linked in a root component, typically the `App` component (`Components/App.razor`): +Assets are delivered via the `ComponentBase.Assets` property, which resolves the fingerprinted URL for a given asset. In the following example, Bootstrap, the Blazor project template app stylesheet (`app.css`), and the [CSS isolation stylesheet](xref:blazor/components/css-isolation) are linked in a root component, typically the `App` component (`Components/App.razor`): ```razor diff --git a/aspnetcore/blazor/tutorials/movie-database-app/part-1.md b/aspnetcore/blazor/tutorials/movie-database-app/part-1.md index f809bbbbf711..591dedf6ac40 100644 --- a/aspnetcore/blazor/tutorials/movie-database-app/part-1.md +++ b/aspnetcore/blazor/tutorials/movie-database-app/part-1.md @@ -331,7 +331,7 @@ app.UseAntiforgery(); :::moniker range=">= aspnetcore-9.0" -Map Static Assets Middleware () maps static files, such as images, scripts, and stylesheets, produced during the build as endpoints: +Map Static Assets routing endpoint conventions () maps static files, such as images, scripts, and stylesheets, produced during the build as endpoints: ```csharp app.MapStaticAssets(); diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index ebe19d8ee6e8..cc0d17f8d246 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -30,12 +30,12 @@ For more information, see . +* The [Optimize static web asset delivery](#optimize-static-web-asset-delivery) section of this article. +* . ### Detect rendering location, interactivity, and assigned render mode at runtime diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md b/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md index 69636d34ed7d..3757b87480f3 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md @@ -1,4 +1,4 @@ -### Optimizing static web asset delivery +### Optimize static web asset delivery Following production best practices for serving static assets requires a significant amount of work and technical expertise. Without optimizations like compression, caching, and [fingerprints](https://en.wikipedia.org/wiki/Fingerprint_(computing)): @@ -16,7 +16,7 @@ Creating performant web apps requires optimizing asset delivery to the browser. * Use a [CDN](/microsoft-365/enterprise/content-delivery-networks?view=o365-worldwide&preserve-view=true) to serve the assets closer to the user. * Minimize the size of assets served to the browser. This optimization doesn't include minification. -[`MapStaticAssets`](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) is a new middleware that helps optimize the delivery of static assets in an app. It's designed to work with all UI frameworks, including Blazor, Razor Pages, and MVC. It's typically a drop-in replacement for [UseStaticFiles](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles): +[`MapStaticAssets`](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) is a new feature that optimizes the delivery of static assets in an app. It's designed to work with all UI frameworks, including Blazor, Razor Pages, and MVC. It's typically a drop-in replacement for [`UseStaticFiles`](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles): ```diff var builder = WebApplication.CreateBuilder(args); From 78ee6971a65e481d980ab369dcc57c0a40b2caf1 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:05:43 -0500 Subject: [PATCH 2/6] Map Static Assets updates --- .../blazor/fundamentals/static-files.md | 4 +- aspnetcore/migration/80-90.md | 37 ++++++++++++++----- .../aspnetcore-9/includes/blazor.md | 2 +- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index 8cc21383820d..c7c98fb6505e 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -76,12 +76,12 @@ For more information, see . -Assets are delivered via the `ComponentBase.Assets` property, which resolves the fingerprinted URL for a given asset. In the following example, Bootstrap, the Blazor project template app stylesheet (`app.css`), and the [CSS isolation stylesheet](xref:blazor/components/css-isolation) are linked in a root component, typically the `App` component (`Components/App.razor`): +Assets are delivered via the property, which resolves the fingerprinted URL for a given asset. In the following example, Bootstrap, the Blazor project template app stylesheet (`app.css`), and the [CSS isolation stylesheet](xref:blazor/components/css-isolation) (based on an app's namespace of `BlazorSample`) are linked in a root component, typically the `App` component (`Components/App.razor`): ```razor - + ``` ## Import maps diff --git a/aspnetcore/migration/80-90.md b/aspnetcore/migration/80-90.md index a32a5682b719..942e9b715f0a 100644 --- a/aspnetcore/migration/80-90.md +++ b/aspnetcore/migration/80-90.md @@ -70,20 +70,39 @@ In the project file, update each [`Microsoft.AspNetCore.*`](https://www.nuget.or ``` -## Replace UseStaticFiles with MapStaticAssets +## Replace `UseStaticFiles` with `MapStaticAssets` -Blazor has different update instructions for `MapStaticAssets` than Razor Pages and ASP.NET Core MVC. +Blazor has different update instructions for implementing Map Static Assets routing endpoint conventions than ASP.NET Core Razor Pages and MVC. -### Blazor web apps +### Blazor Web App implementation -* Replace [UseStaticFiles](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles) with [MapStaticAssets](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) in `Program.cs` -* Update explicit references to static assets in `.razor` files to use the `@Assets["asset-path"]` API. This should ***NOT*** be done for the Blazor framework scripts (`*blazor.\*.js*`). -* Update the root `App.razor` component to include the `` component in the head. +* Replace with in the app's `Program` file: -### Razor Pages and ASP.NET Core MVC based apps + ```diff + - app.UseStaticFiles(); + + app.MapStaticAssets(); + ``` -* Replace [UseStaticFiles](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles) with [MapStaticAssets](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) in `Program.cs` -* Chain a call to `.WithStaticAssets` after `MapRazorPages` or `MapControllerRoute` in `Program.cs`. For an example, see the +* Assets are delivered via the property, which resolves the fingerprinted URL for a given asset. Update explicit references to static assets in Razor component files (`.razor`) to use `@Assets["{ASSET PATH}"]`, where the `{ASSET PATH}` placeholder is the path to the asset. This should ***NOT*** be done for the Blazor framework scripts (`blazor.*.js`). In the following example, Bootstrap, the Blazor project template app stylesheet (`app.css`), and the [CSS isolation stylesheet](xref:blazor/components/css-isolation) (based on an app's namespace of `BlazorSample`) are linked in a root component, typically the `App` component (`Components/App.razor`): + + ```razor + + + + ``` + +* Add the Import Map component () to the `` content of the app's root component, typically the `App` component (`App.razor`): + + ```razor + + ``` + +For more information, see . + +### ASP.NET Core Razor Pages and MVC implementation + +* Replace with in `Program.cs`. +* Chain a call to `.WithStaticAssets` after `MapRazorPages` or `MapControllerRoute` in `Program.cs`. For an example, see the . * Add `` to the head of the main layout file. ## Blazor diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index cc0d17f8d246..20c40985fa98 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -30,7 +30,7 @@ For more information, see ) is a new feature that helps optimize the delivery of static assets in any ASP.NET Core app, including Blazor apps. For more information, see the following resources: From 5a46e0a78be5a604b209f716efcc531855dcb349 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:09:56 -0500 Subject: [PATCH 3/6] Updates --- aspnetcore/fundamentals/static-files.md | 6 +++--- .../aspnetcore-9/includes/web_asset_delivery.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/aspnetcore/fundamentals/static-files.md b/aspnetcore/fundamentals/static-files.md index 66c685bf8d01..79a0f98ecfbe 100644 --- a/aspnetcore/fundamentals/static-files.md +++ b/aspnetcore/fundamentals/static-files.md @@ -49,14 +49,14 @@ Creating performant web apps requires optimizing asset delivery to the browser. * Use a [CDN](/microsoft-365/enterprise/content-delivery-networks?view=o365-worldwide&preserve-view=true) to serve the assets closer to the user. * Minimize the size of assets served to the browser. This optimization doesn't include minification. -[`MapStaticAssets`](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) is a middleware that helps optimize the delivery of static assets in an app. It's designed to work with all UI frameworks, including Blazor, Razor Pages, and MVC. + are routing endpoint conventions that optimize the delivery of static assets in an app. It's designed to work with all UI frameworks, including Blazor, Razor Pages, and MVC. [`UseStaticFiles`](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles) also serves static files, but it doesn't provide the same level of optimization as `MapStaticAssets`. For a comparison of `UseStaticFiles` and `MapStaticAssets`, see [Optimizing static web asset delivery ](xref:aspnetcore-9#optimizing-static-web-asset-delivery). ### Serve files in web root -The default web app templates call the [`MapStaticAssets`](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) method in `Program.cs`, which enables static files to be served: +The default web app templates call the method in `Program.cs`, which enables static files to be served: [!code-csharp[](~/fundamentals/static-files/samples/9.x/StaticFilesSample/Program.cs?name=snippet&highlight=15)] @@ -102,7 +102,7 @@ The preceding code makes static files publicly available in the local cache for ## Static file authorization -The ASP.NET Core templates call [`MapStaticAssets`](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) before calling . Most apps follow this pattern. When the Static File Middleware is called before the authorization middleware: +The ASP.NET Core templates call before calling . Most apps follow this pattern. When the Static File Middleware is called before the authorization middleware: * No authorization checks are performed on the static files. * Static files served by the Static File Middleware, such as those under `wwwroot`, are publicly accessible. diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md b/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md index 3757b87480f3..25fd8dc78b36 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/web_asset_delivery.md @@ -16,7 +16,7 @@ Creating performant web apps requires optimizing asset delivery to the browser. * Use a [CDN](/microsoft-365/enterprise/content-delivery-networks?view=o365-worldwide&preserve-view=true) to serve the assets closer to the user. * Minimize the size of assets served to the browser. This optimization doesn't include minification. -[`MapStaticAssets`](/dotnet/api/microsoft.aspnetcore.builder.staticassetsendpointroutebuilderextensions.mapstaticassets) is a new feature that optimizes the delivery of static assets in an app. It's designed to work with all UI frameworks, including Blazor, Razor Pages, and MVC. It's typically a drop-in replacement for [`UseStaticFiles`](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles): + is a new feature that optimizes the delivery of static assets in an app. It's designed to work with all UI frameworks, including Blazor, Razor Pages, and MVC. It's typically a drop-in replacement for [`UseStaticFiles`](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles): ```diff var builder = WebApplication.CreateBuilder(args); From 31563b18d14f35b2d0de6770700e3a753cd6fcfe Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:16:45 -0500 Subject: [PATCH 4/6] Updates --- aspnetcore/migration/80-90.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/migration/80-90.md b/aspnetcore/migration/80-90.md index 942e9b715f0a..d2f2fd7ce4ff 100644 --- a/aspnetcore/migration/80-90.md +++ b/aspnetcore/migration/80-90.md @@ -97,7 +97,7 @@ Blazor has different update instructions for implementing Map Static Assets rout ``` -For more information, see . +For more information, see . ### ASP.NET Core Razor Pages and MVC implementation From 9e9fec43f7ff7c063a2a4d6b77ea2b1c19d30148 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:18:59 -0500 Subject: [PATCH 5/6] Updates --- aspnetcore/blazor/fundamentals/static-files.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index c7c98fb6505e..fd272d125578 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -14,9 +14,7 @@ uid: blazor/fundamentals/static-files This article describes Blazor app configuration for serving static files. -## Static assets - -*This section applies to server-side Blazor apps.* +## Static asset delivery in server-side Blazor apps :::moniker range=">= aspnetcore-9.0" From e3e35b7a7293cccf15967dea14ad840df0ca9734 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:22:27 -0500 Subject: [PATCH 6/6] Updates --- aspnetcore/blazor/fundamentals/static-files.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index fd272d125578..aa581810b04d 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -86,13 +86,13 @@ Assets are delivered via the `) that defines the import map for module scripts. The `ImportMap` component is placed in `` content of the root component, typically the `App` component (`Components/App.razor`). +The Import Map component () represents an import map element (``) that defines the import map for module scripts. The Import Map component is placed in `` content of the root component, typically the `App` component (`Components/App.razor`). ```razor ``` -If a custom `ImportMapDefinition` isn't assigned to an `ImportMap` component, the import map is generated based on the app's assets. +If a custom isn't assigned to an Import Map component, the import map is generated based on the app's assets. The following examples demonstrate custom import map definitions and the import maps that they create. @@ -173,9 +173,9 @@ The preceding code results in the following import map: } ``` -Combine import map definitions (`ImportMapDefinition`) with `ImportMapDefinition.Combine`. +Combine import map definitions () with . -Import map created from a `ResourceAssetCollection` that maps static assets to their corresponding unique URLs: +Import map created from a that maps static assets to their corresponding unique URLs: ```csharp ImportMapDefinition.FromResourceCollection(