add server example

microsoft · zhiyuanliang-ms · Jan 16, 2025 · Jan 23, 2025 · Feb 7, 2025 · Feb 7, 2025
commit 7db4c1d41cc2e19bac9a60af31973d70e4f6a0cf
diff --git a/examples/express-app/config.json b/examples/express-app/config.json
@@ -0,0 +1,31 @@
+{
+  "feature_management": {
+    "feature_flags": [
+      {
+        "id": "Beta",
+        "enabled": true,
+        "conditions": {
+          "client_filters": [
+            {
+              "name": "Microsoft.Targeting",
+              "parameters": {
+                "Audience": {
+                  "Users": [
+                    "Jeff"
+                  ],
+                  "Groups": [
+                    {
+                      "Name": "Admin",
+                      "RolloutPercentage": 100
+                    }
+                  ],
+                  "DefaultRolloutPercentage": 40
+                }
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}
diff --git a/examples/express-app/package.json b/examples/express-app/package.json
@@ -0,0 +1,7 @@
+{
+    "dependencies": {
+        "@azure/app-configuration-provider": "latest",
+        "@microsoft/feature-management": "latest",
+        "express": "^4.21.2"
+    }
+}
diff --git a/examples/express-app/pages/beta.html b/examples/express-app/pages/beta.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Beta</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #ffffff;
+            color: #000000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 75vh;
+        }
+        h1 {
+            font-size: 5em;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <h1>Welcome to the Beta page!</h1>
+    </div>
+</body>
+</html>
diff --git a/examples/express-app/pages/index.html b/examples/express-app/pages/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Home</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #ffffff;
+            color: #000000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 75vh;
+        }
+        h1 {
+            font-size: 5em;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <h1>Hello World!</h1>
+    </div>
+</body>
+</html>
diff --git a/examples/express-app/server.mjs b/examples/express-app/server.mjs
@@ -0,0 +1,63 @@
+import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
+import fs from 'node:fs/promises';
+
+import { load } from "@azure/app-configuration-provider";
+const connectionString = "<your-connection-string>";;
+const appConfig = await load(connectionString, {
+    featureFlagOptions: {
+        enabled: true,
+        selectors: [{
+            keyFilter: "*"
+        }],
+        refresh: {
+            enabled: true
+        }
+    }
+});
+
+appConfig.onRefresh(() => {
+    console.log("Configuration has been refreshed.");
+});
+
+import { ConfigurationObjectFeatureFlagProvider, ConfigurationMapFeatureFlagProvider, FeatureManager } from "@microsoft/feature-management";
+
+/*
+You can use either ConfigurationObjectFeatureFlagProvider or ConfigurationMapFeatureFlagProvider to provide feature flags.
+We recommend using Azure App Configuration as the source of feature flags.
+*/
+// const config = JSON.parse(await fs.readFile("config.json"));
+// const featureProvider = new ConfigurationObjectFeatureFlagProvider(config);
+
+const featureProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
+const featureManager = new FeatureManager(featureProvider);
+
+const app = express();
+const PORT = 3000;
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const pageDir = path.join(__dirname, "pages");
+
+app.get("/", (req, res) => {
+    appConfig.refresh();
+    res.sendFile(path.join(pageDir, "index.html"));
+});
+
+app.get("/Beta", async (req, res) => {
+    appConfig.refresh();
+    const { userId, groups } = req.query;
+
+    if (await featureManager.isEnabled("Beta", { userId: userId, groups: groups ? groups.split(",") : [] })) {
+        res.sendFile(path.join(pageDir, "beta.html"));
+    } else {
+        res.status(404).send("Page not found");
+    }
+});
+
+// Start the server
+app.listen(PORT, () => {
+    console.log(`Server is running at http://localhost:${PORT}`);
+});