Skip to content

Commit 562207f

Browse files
Erwinvandervalkmaartenba
Erwinvandervalk
authored and
maartenba
committed
BFF v4 - Expand multi-frontend docs
1 parent 1e5cedf commit 562207f

File tree

3 files changed

+372
-9
lines changed

3 files changed

+372
-9
lines changed

‎src/content/docs/bff/getting-started/index.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,5 @@ Currently, the most recent version is 4 (preview 1). If you're upgrading from a
1111
If you're starting a new BFF project, consider the following startup guides:
1212

1313
* [Single frontend BFF](/bff/getting-started/single-frontend)
14-
* [Single frontend BFF in V3 style](/bff/getting-started/single-frontend-v3)
1514
* [Multi-frontend BFF](/bff/getting-started/multi-frontend)
1615
* [Blazor](/bff/getting-started/blazor)

‎src/content/docs/bff/getting-started/multi-frontend.mdx

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,177 @@ sidebar:
88
text: v4
99
variant: tip
1010
---
11+
import { Code } from "astro/components";
12+
import { Tabs, TabItem } from "@astrojs/starlight/components";
13+
14+
Duende.BFF (Backend for Frontend) supports multiple frontends in a single BFF host. This is useful for scenarios where you want to serve several SPAs or frontend apps from the same backend, each with their own authentication and API proxying configuration.
15+
16+
:::note
17+
Multi-frontend support is available in Duende.BFF v4 and later. The v3 style wireup is not supported for this scenario.
18+
:::
19+
20+
## Prerequisites
21+
22+
- .NET 8.0 or later
23+
- Multiple frontend applications (e.g., React, Angular, Vue, or plain JavaScript)
24+
25+
## Setting Up A BFF Project for Multiple Frontends
26+
27+
### 1. Create A New ASP.NET Core Project
28+
29+
```sh
30+
dotnet new web -n MyMultiBffApp
31+
cd MyMultiBffApp
32+
```
33+
34+
### 2. Add The Duende.BFF NuGet Package
35+
36+
```sh
37+
dotnet add package Duende.BFF
38+
```
39+
40+
### 3. OpenID Connect Configuration
41+
42+
Configure OpenID Connect authentication for your BFF host. This is similar to the single frontend setup, but applies to all frontends unless overridden per frontend.
43+
44+
```csharp
45+
builder.Services.AddBff()
46+
.WithDefaultOpenIdConnectOptions(options =>
47+
{
48+
options.Authority = "https://demo.duendesoftware.com";
49+
options.ClientId = "interactive.confidential";
50+
options.ClientSecret = "secret";
51+
options.ResponseType = "code";
52+
options.ResponseMode = "query";
53+
54+
options.GetClaimsFromUserInfoEndpoint = true;
55+
options.SaveTokens = true;
56+
options.MapInboundClaims = false;
57+
58+
options.Scope.Clear();
59+
options.Scope.Add("openid");
60+
options.Scope.Add("profile");
61+
62+
// Add this scope if you want to receive refresh tokens
63+
options.Scope.Add("offline_access");
64+
})
65+
.WithDefaultCookieOptions(options =>
66+
{
67+
// Because we use an identity server that's configured on a different site
68+
// (duendesoftware.com vs localhost), we need to configure the SameSite property to Lax.
69+
// Setting it to Strict would cause the authentication cookie not to be sent after logging in.
70+
// The user would have to refresh the page to get the cookie.
71+
// Recommendation: Set it to 'strict' if your IDP is on the same site as your BFF.
72+
options.Cookie.SameSite = SameSiteMode.Lax;
73+
});
74+
75+
builder.Services.AddAuthorization();
76+
77+
var app = builder.Build();
78+
79+
app.UseAuthentication();
80+
app.UseRouting();
81+
82+
// adds antiforgery protection for local APIs
83+
app.UseBff();
84+
85+
// adds authorization for local and remote API endpoints
86+
app.UseAuthorization();
87+
88+
app.Run();
89+
```
90+
### 4. Configure BFF In `Program.cs`
91+
92+
{/* prettier-ignore */}
93+
<Tabs syncKey="bffFrontendConfig">
94+
{/* prettier-ignore */}
95+
<TabItem label="Static">
96+
97+
Register multiple frontends directly in code using `AddFrontends`:
98+
99+
```csharp
100+
builder.Services.AddBff()
101+
.AddFrontends(
102+
new BffFrontend(BffFrontendName.Parse("default-frontend"))
103+
.WithIndexHtmlUrl(new Uri("https://localhost:5005/static/index.html")),
104+
new BffFrontend(BffFrontendName.Parse("admin-frontend"))
105+
.WithIndexHtmlUrl(new Uri("https://localhost:5005/admin/index.html"))
106+
);
107+
108+
// ...existing code for authentication, authorization, etc.
109+
```
110+
111+
</TabItem>
112+
{/* prettier-ignore */}
113+
<TabItem label="From Config">
114+
115+
You can also load frontend configuration from an `IConfiguration` source, such as a JSON file:
116+
117+
Example `bffconfig.json`:
118+
119+
```json
120+
{
121+
"defaultOidcSettings": null,
122+
"defaultCookieSettings": null,
123+
"frontends": {
124+
"from_config": {
125+
"indexHtmlUrl": "https://localhost:5005/static/index.html",
126+
"matchingPath": "/from-config",
127+
"oidc": {
128+
"clientId": "bff.multi-frontend.config"
129+
},
130+
"remoteApis": [
131+
{
132+
"localPath": "/api/client-token",
133+
"targetUri": "https://localhost:5010",
134+
"tokenRequirement": "Client"
135+
}
136+
]
137+
}
138+
}
139+
}
140+
```
141+
142+
Load and use the configuration in `Program.cs`:
143+
144+
```csharp
145+
var bffConfig = new ConfigurationBuilder()
146+
.AddJsonFile("bffconfig.json")
147+
.Build();
148+
149+
builder.Services.AddBff()
150+
.LoadConfiguration(bffConfig);
151+
152+
// ...existing code for authentication, authorization, etc.
153+
```
154+
155+
</TabItem>
156+
</Tabs>
157+
158+
159+
### 5. Remote API Proxying
160+
161+
You can configure remote API proxying in two ways:
162+
163+
- **Single YARP proxy for all frontends:**
164+
You can set up a single YARP proxy for all frontends, as shown in the [Single Frontend Guide](/bff/getting-started/single-frontend#5-adding-remote-apis).
165+
166+
- **Direct proxying per frontend:**
167+
You can configure remote APIs for each frontend individually:
168+
169+
```csharp
170+
builder.Services.AddBff()
171+
.AddFrontends(
172+
new BffFrontend(BffFrontendName.Parse("default-frontend"))
173+
.WithIndexHtmlUrl(new Uri("https://localhost:5005/static/index.html"))
174+
.WithRemoteApis(
175+
new RemoteApi(LocalPath.Parse("/api/user-token"), new Uri("https://localhost:5010"))
176+
)
177+
);
178+
```
179+
180+
This allows each frontend to have its own set of proxied remote APIs.
181+
182+
### 6. Server Side Sessions
183+
184+
Server side session configuration is the same as in the single frontend scenario. See the [Single Frontend Guide](/bff/getting-started/single-frontend#6-adding-server-side-sessions) for details.

0 commit comments

Comments
 (0)