Tutorial: Use dynamic configuration in JavaScript

In this tutorial, you learn how to enable dynamic configuration in your JavaScript applications. The example in this tutorial builds on the sample application introduced in the JavaScript quickstart. Before you continue, finish Create a JavaScript app with Azure App Configuration.

Prerequisites

• Finish the quickstart Create a JavaScript app with Azure App Configuration.

Add key-values

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.

Reload data from App Configuration

The following examples show how to use refreshable configuration values in console applications. Choose the following instructions based on how your application consumes configuration data loaded from App Configuration, either as a Map or a configuration object.

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.

   • Use configuration as Map
   • Use configuration as object

   // Connecting to Azure App Configuration using connection string
   const settings = await load(connectionString, {
       // Setting up to refresh when the sentinel key is changed
       refreshOptions: {
           enabled: true,
           watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
       }
   });
   

2. 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.

   Add the following code to poll configuration changes of watched key-values.

   • Use configuration as Map
   • Use configuration as object

   // Polling for configuration changes every 5 seconds
   while (true) {
       await sleepInMs(5000); // Waiting before the next refresh
       await settings.refresh(); // Refreshing the configuration setting
       console.log(settings.get("message")); // Consume current value of message from a Map
   }
   

3. Now the file app.js should look like the following code snippet:

   • Use configuration as Map
   • Use configuration as object

   const sleepInMs = require("util").promisify(setTimeout);
   const { load } = require("@azure/app-configuration-provider");
   const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
   
   async function run() {
       // Connecting to Azure App Configuration using connection string
       const settings = await load(connectionString, {
           // Setting up to refresh when the sentinel key is changed
           refreshOptions: {
               enabled: true,
               watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
           }
       });
   
       // Polling for configuration changes every 5 seconds
       while (true) {
           await sleepInMs(5000); // Waiting before the next refresh
           await settings.refresh(); // Refreshing the configuration setting
           console.log(settings.get("message")); // Consume current value of message from a Map
       }
   }
   
   run().catch(console.error);
   

Run the application

1. Run your script:

   node app.js
   

2. Verify Output:

   Hello World!
   

   It continues to print "Hello World!" in a new line every 5 seconds.

3. Update the following key-values to the Azure App Configuration store. Update value of the key message first and then sentinel.

   Key	Value	Label	Content type
   message	Hello World - Updated!	Leave empty	Leave empty
   sentinel	2	Leave empty	Leave empty

4. Once the values are updated, the updated value is printed after the refresh interval.

   Hello World - Updated!
   

Clean up resources

If you don't want to continue using the resources created in this article, delete the resource group you created here to avoid charges.

1. Sign in to the Azure portal, and select Resource groups.
2. In the Filter by name box, enter the name of your resource group.
3. In the result list, select the resource group name to see an overview.
4. Select Delete resource group.
5. You're asked to confirm the deletion of the resource group. Enter the name of your resource group to confirm, and select Delete.

After a few moments, the resource group and all its resources are deleted.

Next steps

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.