Skip to content

Blazor static asset delivery and fingerprinting #33010

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guardrex merged 13 commits into from
Jul 9, 2024
Merged

Blazor static asset delivery and fingerprinting #33010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
31a78bb
Blazor static asset delivery and fingerprinting
guardrex Jul 8, 2024
9198c56
Updates
guardrex Jul 8, 2024
3d75ad0
Updates
guardrex Jul 9, 2024
a6ff538
Updates
guardrex Jul 9, 2024
f4f44a0
Updates
guardrex Jul 9, 2024
de3d542
Updates
guardrex Jul 9, 2024
ced619c
Updates
guardrex Jul 9, 2024
615fd1f
Updates
guardrex Jul 9, 2024
b945731
Updates
guardrex Jul 9, 2024
9f92162
Updates
guardrex Jul 9, 2024
a4c13e3
Updates
guardrex Jul 9, 2024
215d7d1
Updates
guardrex Jul 9, 2024
0ef3253
Updates
guardrex Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions aspnetcore/blazor/components/class-libraries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,10 +173,30 @@ Add a page to the app that uses the `ExtraStyles` component from the RCL.
<ExtraStyles />
```

Link to the library's stylesheet in the app's `<head>` markup ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)).
Link to the library's stylesheet in the app's `<head>` markup ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)):

:::moniker-end

:::moniker range=">= aspnetcore-9.0"

Blazor Web Apps:

```html
<link href="@Assets["_content/ComponentLibrary/additionalStyles.css"]" rel="stylesheet">
```

Standalone Blazor WebAssembly apps:

```html
<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">
```

:::moniker-end

:::moniker range=">= aspnetcore-6.0 < aspnetcore-9.0"

```html
<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />
<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">
```

:::moniker-end
Expand Down
26 changes: 24 additions & 2 deletions aspnetcore/blazor/components/css-isolation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,34 @@ h1 {

## CSS isolation bundling

CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `<head>` tag ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `<link>` element is added by default to an app created from the Blazor project templates, where the placeholder `{ASSEMBLY NAME}` is the project's assembly name:
CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `<head>` tag ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `<link>` element is added by default to an app created from the Blazor project templates:

:::moniker range=">= aspnetcore-9.0"

Blazor Web Apps:

```html
<link href="@Assets["{ASSEMBLY NAME}.styles.css"]" rel="stylesheet">
```

Standalone Blazor WebAssembly apps:

```html
<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
```

:::moniker-end

:::moniker range="< aspnetcore-9.0"

```html
<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
```

:::moniker-end

The `{ASSEMBLY NAME}` placeholder is the project's assembly name.

:::moniker range="< aspnetcore-8.0"

The following example is from a hosted Blazor WebAssembly **:::no-loc text="Client":::** app. The app's assembly name is `BlazorSample.Client`, and the `<link>` is added by the Blazor WebAssembly project template when the project is created with the Hosted option (`-ho|--hosted` option using the .NET CLI or **ASP.NET Core Hosted** checkbox using Visual Studio):
Expand Down Expand Up @@ -90,7 +112,7 @@ At build time, a project bundle is created with the convention `obj/{CONFIGURATI

## Child component support

By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the placeholder `{COMPONENT NAME}` is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier.
By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the `{COMPONENT NAME}` placeholder is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier.

The following example shows a parent component called `Parent` with a child component called `Child`.

Expand Down
80 changes: 64 additions & 16 deletions aspnetcore/blazor/components/integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ Add an `App` component to the app, which serves as the root component, which is

`Components/App.razor`:

:::moniker range=">= aspnetcore-9.0"

```razor
<!DOCTYPE html>
<html lang="en">
Expand All @@ -100,7 +102,7 @@ Add an `App` component to the app, which serves as the root component, which is
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="BlazorSample.styles.css" />
<link rel="stylesheet" href="@Assets["{ASSEMBLY NAME}.styles.css"]" />
<HeadOutlet />
</head>

Expand All @@ -112,12 +114,34 @@ Add an `App` component to the app, which serves as the root component, which is
</html>
```

For the `<link>` element in the preceding example, change `BlazorSample` in the stylesheet's file name to match the app's project name. For example, a project named `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name:
:::moniker-end

```html
<link rel="stylesheet" href="ContosoApp.styles.css" />
:::moniker range="< aspnetcore-9.0"

```razor
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="{ASSEMBLY NAME}.styles.css" />
<HeadOutlet />
</head>

<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>

</html>
```

:::moniker-end

The `{ASSEMBLY NAME}` placeholder is the app's assembly name. For example, a project with an assembly name of `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name.

Add a `Pages` folder to the `Components` folder to hold routable Razor components.

Add the following `Welcome` component to demonstrate static SSR.
Expand Down Expand Up @@ -739,16 +763,18 @@ Add an `App` component to the `Components` folder with the following content.

`Components/App.razor`:

:::moniker range=">= aspnetcore-9.0"

```razor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{APP TITLE}</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["css/site.css"]" />
<link rel="stylesheet" href="@Assets["{APP NAMESPACE}.styles.css"]" />
<HeadOutlet />
</head>
<body>
Expand All @@ -761,19 +787,41 @@ Add an `App` component to the `Components` folder with the following content.
</html>
```

In the preceding code update the app title and stylesheet file name:
:::moniker-end

* For the `{APP TITLE}` placeholder in the `<title>` element, set the app's title. For example:
:::moniker range="< aspnetcore-9.0"

```html
<title>Blazor Sample</title>
```
```razor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{APP TITLE}</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" />
<link rel="stylesheet" href="{APP NAMESPACE}.styles.css" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js"></script>
<script src="_framework/blazor.web.js"></script>
</body>
</html>
```

* For the `{APP NAMESPACE}` placeholder in the stylesheet `<link>` element, set the app's namespace. For example:
:::moniker-end

```html
<link rel="stylesheet" href="/BlazorSample.styles.css" />
```
The `{APP NAMESPACE}` placeholder is the app's namespace.

The `{APP TITLE}` placeholder in the `<title>` element is the app's title. For example:

```html
<title>Blazor Sample</title>
```

Where services are registered, add services for Razor components and services to support rendering Interactive Server components.

Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/blazor/fundamentals/environments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ For more information on Blazor startup, see <xref:blazor/fundamentals/startup>.

Blazor WebAssembly apps can set the environment with the `blazor-environment` header.

In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the placeholder `{TARGET FRAMEWORK}` is the target framework:
In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the `{TARGET FRAMEWORK}` placeholder is the target framework:

```xml
<?xml version="1.0" encoding="UTF-8"?>
Expand Down
Loading