Skip to content

Commit 7cf9fe5

Browse files
PMEds28PMEds28
authored
Merge pull request #270590 from Eskibear/js-refresh
[AppConfig] Support dynamic configuration for JavaScript
2 parents 2cd6d25 + f2e28e1 commit 7cf9fe5

File tree

2 files changed

+217
-0
lines changed

2 files changed

+217
-0
lines changed

‎articles/azure-app-configuration/TOC.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,8 @@
8686
href: enable-dynamic-configuration-java-spring-app.md
8787
- name: Python
8888
href: enable-dynamic-configuration-python.md
89+
- name: JavaScript
90+
href: enable-dynamic-configuration-javascript.md
8991
- name: Azure Kubernetes Service
9092
href: enable-dynamic-configuration-azure-kubernetes-service.md
9193
- name: Enable dynamic configuration using push model

‎articles/azure-app-configuration/enable-dynamic-configuration-javascript.md

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
---
2+
title: Use dynamic configuration in JavaScript
3+
titleSuffix: Azure App Configuration
4+
description: Learn how to dynamically update configuration data for JavaScript.
5+
services: azure-app-configuration
6+
author: eskibear
7+
ms.service: azure-app-configuration
8+
ms.devlang: javascript
9+
ms.topic: tutorial
10+
ms.date: 03/27/2024
11+
ms.custom: devx-track-js
12+
ms.author: yanzh
13+
#Customer intent: As a JavaScript developer, I want to dynamically update my app to use the latest configuration data in Azure App Configuration.
14+
---
15+
# Tutorial: Use dynamic configuration in JavaScript
16+
17+
In this tutorial, you learn how to enable dynamic configuration in your JavaScript applications.
18+
The example in this tutorial builds on the sample application introduced in the JavaScript quickstart.
19+
Before you continue, finish [Create a JavaScript app with Azure App Configuration](./quickstart-javascript-provider.md).
20+
21+
## Prerequisites
22+
23+
- Finish the quickstart [Create a JavaScript app with Azure App Configuration](./quickstart-javascript-provider.md).
24+
25+
## Add key-values
26+
27+
Add the following key-value to your Azure App Configuration store. For more information about how to add key-values to a store using the Azure portal or the CLI, go to [Create a key-value](./quickstart-azure-app-configuration-create.md#create-a-key-value).
28+
29+
| Key | Value | Label | Content type |
30+
|----------------|-------------------|-------------|--------------------|
31+
| *message* | *Hello World!* | Leave empty | Leave empty |
32+
| *sentinel* | *1* | Leave empty | Leave empty |
33+
34+
> [!NOTE]
35+
> A *sentinel key* is a key that you update after you complete the change of all other keys. Your app monitors the sentinel key. When a change is detected, your app refreshes all configuration values. This approach helps to ensure the consistency of configuration in your app and reduces the overall number of requests made to your Azure App Configuration store, compared to monitoring all keys for changes.
36+
37+
## Reload data from App Configuration
38+
39+
The following examples show how to use refreshable configuration values in console applications.
40+
Choose the following instructions based on how your application consumes configuration data loaded from App Configuration, either as a `Map` or a configuration object.
41+
42+
1. Open the file *app.js* and update the `load` function. Add a `refreshOptions` parameter to enable the refresh and configure refresh options. The loaded configuration will be updated when a change is detected on the server. By default, a refresh interval of 30 seconds is used, but you can override it with the `refreshIntervalInMs` property.
43+
44+
### [Use configuration as Map](#tab/configuration-map)
45+
46+
```javascript
47+
// Connecting to Azure App Configuration using connection string
48+
const settings = await load(connectionString, {
49+
// Setting up to refresh when the sentinel key is changed
50+
refreshOptions: {
51+
enabled: true,
52+
watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
53+
}
54+
});
55+
```
56+
57+
### [Use configuration as object](#tab/configuration-object)
58+
59+
The configuration object is constructed by calling `constructConfigurationObject` function.
60+
To ensure an up-to-date configuration, update the configuration object in the `onRefresh` callback triggered whenever a configuration change is detected and the configuration is updated.
61+
62+
```javascript
63+
// Connecting to Azure App Configuration using connection string
64+
const settings = await load(connectionString, {
65+
// Setting up to refresh when the sentinel key is changed
66+
refreshOptions: {
67+
enabled: true,
68+
watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
69+
}
70+
});
71+
72+
// Constructing configuration object
73+
let config = settings.constructConfigurationObject();
74+
75+
// Setting up callback to ensure `config` object is updated once configuration is changed.
76+
settings.onRefresh(() => {
77+
config = settings.constructConfigurationObject();
78+
});
79+
80+
```
81+
---
82+
83+
1. Setting up `refreshOptions` alone won't automatically refresh the configuration. You need to call the `refresh` method to trigger a refresh. This design prevents unnecessary requests to App Configuration when your application is idle. You should include the `refresh` call where your application activity occurs. This is known as **activity-driven configuration refresh**. For example, you can call `refresh` when processing an incoming message or an order, or inside an iteration where you perform a complex task. Alternatively, you can use a timer if your application is always active. In this example, `refresh` is called in a loop for demonstration purposes. Even if the `refresh` call fails for any reason, your application will continue to use the cached configuration. Another attempt will be made when the configured refresh interval has passed and the `refresh` call is triggered by your application activity. Calling `refresh` is a no-op before the configured refresh interval elapses, so its performance impact is minimal even if it's called frequently.
84+
85+
Add the following code to poll configuration changes of watched key-values.
86+
87+
### [Use configuration as Map](#tab/configuration-map)
88+
89+
```javascript
90+
// Polling for configuration changes every 5 seconds
91+
while (true) {
92+
await sleepInMs(5000); // Waiting before the next refresh
93+
await settings.refresh(); // Refreshing the configuration setting
94+
console.log(settings.get("message")); // Consume current value of message from a Map
95+
}
96+
```
97+
98+
### [Use configuration as object](#tab/configuration-object)
99+
100+
```javascript
101+
// Polling for configuration changes every 5 seconds
102+
while (true) {
103+
await sleepInMs(5000); // Waiting before the next refresh
104+
await settings.refresh(); // Refreshing the configuration setting
105+
console.log(config.message); // Consume current value of message from an object
106+
}
107+
```
108+
109+
---
110+
111+
1. Now the file *app.js* should look like the following code snippet:
112+
113+
### [Use configuration as Map](#tab/configuration-map)
114+
115+
```javascript
116+
const sleepInMs = require("util").promisify(setTimeout);
117+
const { load } = require("@azure/app-configuration-provider");
118+
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
119+
120+
async function run() {
121+
// Connecting to Azure App Configuration using connection string
122+
const settings = await load(connectionString, {
123+
// Setting up to refresh when the sentinel key is changed
124+
refreshOptions: {
125+
enabled: true,
126+
watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
127+
}
128+
});
129+
130+
// Polling for configuration changes every 5 seconds
131+
while (true) {
132+
await sleepInMs(5000); // Waiting before the next refresh
133+
await settings.refresh(); // Refreshing the configuration setting
134+
console.log(settings.get("message")); // Consume current value of message from a Map
135+
}
136+
}
137+
138+
run().catch(console.error);
139+
```
140+
### [Use configuration as object](#tab/configuration-object)
141+
142+
```javascript
143+
const sleepInMs = require("util").promisify(setTimeout);
144+
const { load } = require("@azure/app-configuration-provider");
145+
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
146+
147+
async function run() {
148+
// Connecting to Azure App Configuration using connection string
149+
const settings = await load(connectionString, {
150+
// Setting up to refresh when the sentinel key is changed
151+
refreshOptions: {
152+
enabled: true,
153+
watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
154+
}
155+
});
156+
157+
// Constructing configuration object
158+
let config = settings.constructConfigurationObject();
159+
160+
// Setting up callback to ensure `config` object is updated once configuration is changed.
161+
settings.onRefresh(() => {
162+
config = settings.constructConfigurationObject();
163+
});
164+
165+
// Polling for configuration changes every 5 seconds
166+
while (true) {
167+
await sleepInMs(5000); // Waiting before the next refresh
168+
await settings.refresh(); // Refreshing the configuration setting
169+
console.log(config.message); // Consume current value of message from an object
170+
}
171+
}
172+
173+
run().catch(console.error);
174+
```
175+
176+
---
177+
178+
## Run the application
179+
180+
1. Run your script:
181+
182+
```console
183+
node app.js
184+
```
185+
186+
1. Verify Output:
187+
188+
```console
189+
Hello World!
190+
```
191+
It continues to print "Hello World!" in a new line every 5 seconds.
192+
193+
1. Update the following key-values to the Azure App Configuration store. Update value of the key `message` first and then `sentinel`.
194+
195+
| Key | Value | Label | Content type |
196+
|----------------|---------------------------|-------------|--------------------|
197+
| *message* | *Hello World - Updated!* | Leave empty | Leave empty |
198+
| *sentinel* | *2* | Leave empty | Leave empty |
199+
200+
1. Once the values are updated, the updated value is printed after the refresh interval.
201+
202+
```console
203+
Hello World - Updated!
204+
```
205+
206+
## Clean up resources
207+
208+
[!INCLUDE [azure-app-configuration-cleanup](../../includes/azure-app-configuration-cleanup.md)]
209+
210+
## Next steps
211+
212+
In this tutorial, you enabled your JavaScript app to dynamically refresh configuration settings from Azure App Configuration. To learn how to use an Azure managed identity to streamline the access to Azure App Configuration, continue to the next tutorial.
213+
214+
> [!div class="nextstepaction"]
215+
> [Managed identity integration](./howto-integrate-azure-managed-service-identity.md)

0 commit comments

Comments
 (0)