Skip to content

Commit dce06fe

Browse files
zhiyuanliang-mszhiyuanliang-ms
committed
update
1 parent ca7890a commit dce06fe

File tree

6 files changed

+63
-51
lines changed

6 files changed

+63
-51
lines changed

‎articles/azure-app-configuration/howto-targetingfilter-javascript.md renamed to ‎articles/azure-app-configuration/how-to-targetingfilter-javascript.md

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ A _Beta_ feature flag with targeting filter. [Create the feature flag](./howto-t
2525

2626
In this section, you create a web application that uses the [_Beta_ feature flag](./howto-targetingfilter.md) to control the access to the beta version of a web page.
2727

28-
### Initial project setup
28+
### Setup a Node.js Express project
2929

3030
1. Create a folder called `targeting-filter-tutorial` and initialize the project.
3131

@@ -43,75 +43,60 @@ In this section, you create a web application that uses the [_Beta_ feature flag
4343
npm install express
4444
```
4545

46-
### Connect to Azure App Configuration
47-
48-
You connect to Azure App Configuration to load feature flags, enable automatic refresh, and create a `FeatureManager` object for accessing feature flags later. A middleware is added to refresh configuration before each request.
49-
5046
1. Create a new file named *app.js* and add the following code.
5147

5248
```js
5349
const express = require("express");
5450
const server = express();
5551
const port = "8080";
5652
53+
server.listen(port, () => {
54+
console.log(`Server is running at http://localhost:${port}`);
55+
});
56+
```
57+
58+
### Connect to Azure App Configuration
59+
60+
1. Update the *app.js* and add the following code.
61+
62+
```js
63+
// Existing code ...
5764
const appConfigEndpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
5865
const { DefaultAzureCredential } = require("@azure/identity");
5966
const { load } = require("@azure/app-configuration-provider");
67+
const { FeatureManager, ConfigurationMapFeatureFlagProvider } = require("@microsoft/feature-management");
6068
6169
let appConfig;
6270
let featureManager;
6371
6472
async function initializeConfig() {
65-
try {
66-
appConfig = await load(appConfigEndpoint, new DefaultAzureCredential(), {
67-
featureFlagOptions: {
68-
enabled: true,
69-
refresh: {
70-
enabled: true
71-
}
73+
appConfig = await load(appConfigEndpoint, new DefaultAzureCredential(), {
74+
featureFlagOptions: {
75+
enabled: true,
76+
refresh: {
77+
enabled: true
7278
}
73-
});
74-
} catch(error) {
75-
console.error("Failed to load configuration:", error);
76-
process.exit(1);
77-
}
79+
}
80+
});
7881
79-
featureManager = new FeatureManager(new ConfigurationMapFeatureFlagProvider(appConfig));
82+
const ffProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
83+
featureManager = new FeatureManager(ffProvider);
8084
}
8185
8286
// Use a middleware to refresh the configuration before each request.
8387
server.use((req, res, next) => {
8488
appConfig.refresh();
8589
next();
8690
});
91+
// Existing code ...
8792
```
8893
89-
### Use the feature flag
90-
91-
1. Add the following code to the *app.js* file. You configure the route handler so that the server will serve different contents based on whether the **Beta** feature flag is enabled.
94+
You connect to Azure App Configuration to load feature flags, enable automatic refresh, and create a `FeatureManager` object for accessing feature flags later. A middleware is added to refresh configuration before each request.
9295
93-
```js
94-
server.get("/", async (req, res) => {
95-
const isBetaEnabled = await featureManager.isEnabled("Beta");
96-
const [title, message] = isBetaEnabled
97-
? ["Beta Page", "This is a beta page."]
98-
: ["Home Page", "Welcome."];
99-
100-
res.send(
101-
`<!DOCTYPE html>
102-
<html>
103-
<head><title>${title}</title></head>
104-
<body style="display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
105-
<h1 style="text-align: center; font-size: 5rem;">${message}</h1>
106-
</body>
107-
</html>`
108-
);
109-
});
110-
```
111-
112-
1. Complete the application. It will initialize the configuration and then start the express server.
96+
1. Update the code to ensure the Express server starts only after the configuration has been successfully initialized.
11397
11498
```js
99+
// Existing code ...
115100
initializeConfig()
116101
.then(() => {
117102
// Start the express server.
@@ -121,6 +106,33 @@ You connect to Azure App Configuration to load feature flags, enable automatic r
121106
})
122107
```
123108
109+
### Use the feature flag
110+
111+
Add the following code to the *app.js* file to configure the route handler for the Express server. The server will serve different contents based on whether the **Beta** feature flag is enabled.
112+
113+
```js
114+
// Existing code ...
115+
server.get("/", async (req, res) => {
116+
const isBetaEnabled = await featureManager.isEnabled("Beta");
117+
const [title, message] = isBetaEnabled
118+
? ["Beta Page", "This is a beta page."]
119+
: ["Home Page", "Welcome."];
120+
121+
res.send(
122+
`<!DOCTYPE html>
123+
<html>
124+
<head><title>${title}</title></head>
125+
<body style="display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
126+
<h1 style="text-align: center; font-size: 5rem;">${message}</h1>
127+
</body>
128+
</html>`
129+
);
130+
});
131+
132+
initializeConfig()
133+
// Existing code ...
134+
```
135+
124136
## Enable targeting for the web application
125137
126138
A targeting context is required when evaluating features with targeting enabled. To explicitly provide this context for feature evaluation, you can pass it as a parameter to the `featureManager.isEnabled` method.
@@ -171,12 +183,12 @@ You use ambient targeting context in this tutorial.
171183
1. When constructing the `FeatureManager`, pass the targeting context accessor to the `FeatureManagerOptions`.
172184
173185
```js
174-
featureManager = new FeatureManager(featureFlagProvider, {
186+
featureManager = new FeatureManager(ffProvider, {
175187
targetingContextAccessor: targetingContextAccessor
176188
});
177189
```
178190
179-
Your complete application code should look like the following:
191+
After completing the previous steps, your _app.js_ file should now contain the following complete implementation.
180192
181193
```js
182194
const express = require("express");
@@ -227,7 +239,8 @@ async function initializeConfig() {
227239
}
228240
});
229241
230-
featureManager = new FeatureManager(new ConfigurationMapFeatureFlagProvider(appConfig), {
242+
const ffProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
243+
featureManager = new FeatureManager(ffProvider, {
231244
targetingContextAccessor: targetingContextAccessor
232245
});
233246
}
@@ -263,10 +276,6 @@ initializeConfig()
263276
console.log(`Server is running at http://localhost:${port}`);
264277
});
265278
})
266-
.catch((error) => {
267-
console.error("Failed to load configuration:", error);
268-
process.exit(1);
269-
});
270279
```
271280
272281

‎articles/azure-app-configuration/howto-variant-feature-flags-javascript.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ In this tutorial, you use a variant feature flag to manage experiences for diffe
6262
}
6363
});
6464
65-
featureManager = new FeatureManager(new ConfigurationMapFeatureFlagProvider(appConfig));
65+
const ffProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
66+
featureManager = new FeatureManager(ffProvider);
6667
}
6768
6869
function startServer() {

‎articles/azure-app-configuration/media/howto-targetingfilter-javascript/beta-disabled.png renamed to ‎articles/azure-app-configuration/media/how-to-targetingfilter-javascript/beta-disabled.png

File renamed without changes.

‎articles/azure-app-configuration/media/howto-targetingfilter-javascript/beta-enabled.png renamed to ‎articles/azure-app-configuration/media/how-to-targetingfilter-javascript/beta-enabled.png

File renamed without changes.

‎articles/azure-app-configuration/media/howto-targetingfilter-javascript/beta-not-targeted.png renamed to ‎articles/azure-app-configuration/media/how-to-targetingfilter-javascript/beta-not-targeted.png

File renamed without changes.

‎articles/azure-app-configuration/quickstart-feature-flag-javascript.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ Add a feature flag called *Beta* to the App Configuration store and leave **Labe
7070
});
7171

7272
// Create a feature manager which will evaluate the feature flag
73-
const fm = new FeatureManager(new ConfigurationMapFeatureFlagProvider(appConfig));
73+
const ffProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
74+
const fm = new FeatureManager(ffProvider);
7475

7576
while (true) {
7677
await appConfig.refresh(); // Refresh to get the latest feature flag settings
@@ -107,7 +108,8 @@ Add a feature flag called *Beta* to the App Configuration store and leave **Labe
107108
});
108109

109110
// Create a feature manager which will evaluate the feature flag
110-
const fm = new FeatureManager(new ConfigurationMapFeatureFlagProvider(appConfig));
111+
const ffProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
112+
const fm = new FeatureManager(ffProvider);
111113

112114
while (true) {
113115
await appConfig.refresh(); // Refresh to get the latest feature flag settings

0 commit comments

Comments
 (0)