Skip to content

Commit 5d44975

Browse files
zhiyuanliang-mszhiyuanliang-ms
committed
update
1 parent 8ba2a45 commit 5d44975

File tree

1 file changed

+107
-85
lines changed

1 file changed

+107
-85
lines changed

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

Lines changed: 107 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ In this tutorial, you use a variant feature flag to manage experiences for diffe
4444
const express = require("express");
4545
const server = express();
4646
47+
const appConfigEndpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
4748
const { DefaultAzureCredential } = require("@azure/identity");
4849
const { load } = require("@azure/app-configuration-provider");
4950
const { FeatureManager, ConfigurationMapFeatureFlagProvider } = require("@microsoft/feature-management");
@@ -109,98 +110,119 @@ In this tutorial, you use a variant feature flag to manage experiences for diffe
109110
110111
1. Create a new file named *index.html* and add the following code:
111112
112-
```html
113-
<!DOCTYPE html>
114-
<html lang="en">
115-
<head>
116-
<meta charset="UTF-8">
117-
<title>Quote of the Day</title>
118-
<style>
119-
.heart-button {
120-
background-color: transparent;
121-
border: none;
122-
cursor: pointer;
123-
font-size: 24px;
124-
}
113+
```html
114+
<!DOCTYPE html>
115+
<html lang="en">
116+
<head>
117+
<meta charset="UTF-8">
118+
<title>Quote of the Day</title>
119+
<style>
120+
.heart-button {
121+
background-color: transparent;
122+
border: none;
123+
cursor: pointer;
124+
font-size: 24px;
125+
}
125126
126-
.heart-button:hover {
127-
background-color: #F0F0F0;
128-
}
129-
</style>
130-
</head>
131-
<body>
132-
<div style="display: flex; flex-direction: column; min-height: 100vh; background-color: #f4f4f4;">
133-
<header style="background-color: white; border-bottom: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: center; font-family: 'Arial', sans-serif; font-size: 16px;">
134-
<div style="font-size: 1.25em; color: black;">QuoteOfTheDay</div>
135-
</header>
136-
137-
<main style="display: flex; justify-content: center; align-items: center; flex-grow: 1;">
138-
<div style="background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 700px; position: relative; text-align: left;">
139-
<div id="quote-content">
140-
<h2 id="greeting">Quote of the Day</h2>
141-
<blockquote style="font-size: 2em; font-style: italic; color: #4EC2F7; margin: 0 0 20px 0; line-height: 1.4;">
142-
<p>"You cannot change what you are, only what you do."</p>
143-
<footer style="font-size: 0.55em; color: black; font-family: 'Arial', sans-serif; font-style: normal; font-weight: bold;">— Philip Pullman</footer>
144-
</blockquote>
145-
<div style="position: absolute; top: 10px; right: 10px; display: flex;">
146-
<button class="heart-button" id="like-button">
147-
<span id="heart-icon" style="color: #ccc">♥</span>
148-
</button>
149-
</div>
150-
</div>
151-
<div id="loading" style="display: none;">
152-
<p>Loading</p>
127+
.heart-button:hover {
128+
background-color: #F0F0F0;
129+
}
130+
</style>
131+
</head>
132+
<body>
133+
<div style="display: flex; flex-direction: column; min-height: 100vh; background-color: #f4f4f4;">
134+
<header style="background-color: white; border-bottom: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: center; font-family: 'Arial', sans-serif; font-size: 16px;">
135+
<div style="font-size: 1.25em; color: black;">QuoteOfTheDay</div>
136+
</header>
137+
138+
<main style="display: flex; justify-content: center; align-items: center; flex-grow: 1;">
139+
<div style="background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 700px; position: relative; text-align: left;">
140+
<div id="quote-content">
141+
<h2 id="greeting">Quote of the Day</h2>
142+
<blockquote style="font-size: 2em; font-style: italic; color: #4EC2F7; margin: 0 0 20px 0; line-height: 1.4;">
143+
<p>"You cannot change what you are, only what you do."</p>
144+
<footer style="font-size: 0.55em; color: black; font-family: 'Arial', sans-serif; font-style: normal; font-weight: bold;">— Philip Pullman</footer>
145+
</blockquote>
146+
<div style="position: absolute; top: 10px; right: 10px; display: flex;">
147+
<button class="heart-button" id="like-button">
148+
<span id="heart-icon" style="color: #ccc">♥</span>
149+
</button>
150+
</div>
151+
</div>
152+
<div id="loading" style="display: none;">
153+
<p>Loading</p>
154+
</div>
153155
</div>
154-
</div>
155-
</main>
156-
</div>
157-
158-
<script>
159-
document.addEventListener('DOMContentLoaded', function() {
160-
const urlParams = new URLSearchParams(window.location.search);
161-
const currentUser = urlParams.get('userId') || '';
162-
let liked = false;
163-
164-
const greetingElement = document.getElementById('greeting');
165-
const heartIcon = document.getElementById('heart-icon');
166-
const likeButton = document.getElementById('like-button');
167-
const quoteContent = document.getElementById('quote-content');
168-
const loadingElement = document.getElementById('loading');
169-
170-
async function init() {
171-
quoteContent.style.display = 'none';
172-
loadingElement.style.display = 'block';
156+
</main>
157+
</div>
158+
159+
<script>
160+
document.addEventListener('DOMContentLoaded', function() {
161+
const urlParams = new URLSearchParams(window.location.search);
162+
const currentUser = urlParams.get('userId') || '';
163+
let liked = false;
173164
174-
const response = await fetch(`/api/getGreetingMessage?userId=${currentUser}`, {
175-
method: "GET"
176-
});
177-
const result = await response.json();
178-
greetingElement.textContent = result.message || "Quote of the Day";
179-
quoteContent.style.display = 'block';
180-
loadingElement.style.display = 'none';
181-
}
182-
183-
likeButton.addEventListener('click', async function() {
184-
if (!liked) {
185-
const response = await fetch("/api/like", {
186-
method: "POST",
187-
headers: { "Content-Type": "application/json" },
188-
body: JSON.stringify({ UserId: currentUser }),
189-
});
165+
const greetingElement = document.getElementById('greeting');
166+
const heartIcon = document.getElementById('heart-icon');
167+
const likeButton = document.getElementById('like-button');
168+
const quoteContent = document.getElementById('quote-content');
169+
const loadingElement = document.getElementById('loading');
170+
171+
async function init() {
172+
quoteContent.style.display = 'none';
173+
loadingElement.style.display = 'block';
174+
175+
const response = await fetch(`/api/getGreetingMessage?userId=${currentUser}`, {
176+
method: "GET"
177+
});
178+
const result = await response.json();
179+
greetingElement.textContent = result.message || "Quote of the Day";
180+
quoteContent.style.display = 'block';
181+
loadingElement.style.display = 'none';
190182
}
191-
liked = !liked;
192-
heartIcon.style.color = liked ? 'red' : '#ccc';
193-
});
194183
195-
init();
196-
});
197-
</script>
198-
</body>
199-
</html>
200-
```
184+
likeButton.addEventListener('click', async function() {
185+
if (!liked) {
186+
const response = await fetch("/api/like", {
187+
method: "POST",
188+
headers: { "Content-Type": "application/json" },
189+
body: JSON.stringify({ UserId: currentUser }),
190+
});
191+
}
192+
liked = !liked;
193+
heartIcon.style.color = liked ? 'red' : '#ccc';
194+
});
195+
196+
init();
197+
});
198+
</script>
199+
</body>
200+
</html>
201+
```
202+
203+
## Run the application
204+
205+
1. Set the environment variable named **AZURE_APPCONFIG_ENDPOINT** to the endpoint of your App Configuration store found under the *Overview* of your store in the Azure portal.
206+
207+
If you use the Windows command prompt, run the following command and restart the command prompt to allow the change to take effect:
208+
209+
```cmd
210+
setx AZURE_APPCONFIG_ENDPOINT "<endpoint-of-your-app-configuration-store>"
211+
```
212+
213+
If you use PowerShell, run the following command:
201214
202-
1. Launch the application.
215+
```powershell
216+
$Env:AZURE_APPCONFIG_ENDPOINT = "<endpoint-of-your-app-configuration-store>"
217+
```
218+
219+
If you use macOS or Linux, run the following command:
220+
221+
```bash
222+
export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'
223+
```
203224
225+
1. Run the application.
204226
205227
```bash
206228
node server.js

0 commit comments

Comments
 (0)