Skip to content

[dev-v5] Update the Icons Explorers for deployments #4251

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
merged 1 commit into from
Oct 17, 2025
Merged

[dev-v5] Update the Icons Explorers for deployments #4251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions examples/Demo/FluentUI.Explorers/Components/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="icon" href="data:," />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["FluentUI.Explorers.styles.css"]" />
<ImportMap />
Expand Down
1 change: 1 addition & 0 deletions examples/Demo/FluentUI.Explorers/Components/Pages/EmojiExplorer.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@page "/emoji-explorer"
@page "/emoji-explorer/embedded"
@inherits ExplorerBase

<PageTitle>FluentUI Blazor - Emojis explorer</PageTitle>
Expand Down
3 changes: 2 additions & 1 deletion examples/Demo/FluentUI.Explorers/Components/Pages/IconExplorer.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@page "/icon-explorer"
@page "/icon-explorer"
@page "/icon-explorer/embedded"
@inherits ExplorerBase

<PageTitle>FluentUI Blazor - Icons explorer</PageTitle>
Expand Down
30 changes: 29 additions & 1 deletion examples/Demo/FluentUI.Explorers/Program.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,38 @@
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

// Override any default CSP headers with our custom policy
app.Use(async (context, next) =>
{
context.Response.OnStarting(() =>
{
// Remove X-Frame-Options (it conflicts with CSP frame-ancestors)
context.Response.Headers.Remove("X-Frame-Options");

// Define allowed frame ancestors
string[] allowedFrameAncestors =
[
"'self'",
"https://localhost:7026",
"https://localhost:7062",
"https://fluentui-blazor.net",
"https://www.fluentui-blazor.net",
"https://preview.fluentui-blazor.net",
"https://fluentui-explorer-v5.azurewebsites.net"
];

// Set a single CSP header, replacing any that Blazor might have added
context.Response.Headers["Content-Security-Policy"] =
$"frame-ancestors {string.Join(" ", allowedFrameAncestors)};";

return Task.CompletedTask;
});
await next();
});

app.UseHttpsRedirection();

app.UseAntiforgery();
Expand Down
35 changes: 8 additions & 27 deletions examples/Demo/FluentUI.Explorers/ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,18 @@ of the Fluent UI Blazor library.
dotnet publish "FluentUI.Explorers.csproj" -c Release -o ./bin/Publish -f net9.0
```

## Update the Web.Config

To allow an external site to embed your site in an iframe,
you need to add a [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) item
the following to the generated ´web.config` file:

```xml
<configuration>
...
<system.webServer>
<httpProtocol>
<customHeaders>
<remove name="X-Frame-Options" />
<add name="Content-Security-Policy" value="frame-ancestors 'self' https://localhost:7026 https://fluentui-blazor.net https://www.fluentui-blazor.net https://fluentui-blazor-v5.azurewebsites.net" />
</customHeaders>
</httpProtocol>
</system.webServer>
...
</configuration>
```

## Deploy in Azure

1. Compress the resulting folder into a ZIP file.
4. Compress the resulting folder into a ZIP file.

```bash
Compress-Archive ./bin/Publish/* ./bin/FluentUI-Explorers.zip
```

2. Open Azure Portal and navigate to the Web App **fluentui-explorer** (Slot `v5`)
## Deploy to Azure

3. Use the Development **Tools / Advanced Tools** to drop the Zip file in the root folder.
1. Open Azure Portal and navigate to the Web App **fluentui-explorer** (Slot `v5`)
Use the Development **Tools / Advanced Tools** to drop the Zip file
in the `site/wwwroot` folder.

4. Check the deployment: https://fluentui-explorer-v5.azurewebsites.net
https://fluentui-explorer-v5.scm.azurewebsites.net/DebugConsole

2. Check the deployment: https://fluentui-explorer-v5.azurewebsites.net
Loading