update

Author: zhiyuanliang-ms

examples/web-app/.env.template

@@ -0,0 +1,12 @@
+# You can define environment variables in .env file and load them with 'dotenv' package.
+# This is a template of related environment variables in examples.
+# To use this file directly, please rename it to .env
+APPCONFIG_CONNECTION_STRING=<app-configuration-connection-string>
+
+APPCONFIG_ENDPOINT=<app-configuration-endpoint>
+
+# Credential used to authenticate using Microsoft Entra ID (Azure AD) role-based authentication.
+# https://docs.microsoft.com/javascript/api/@azure/identity/environmentcredential
+AZURE_TENANT_ID=<AD tenant id or name>
+AZURE_CLIENT_ID=<ID of the user/service principal to authenticate as>
+AZURE_CLIENT_SECRET=<client secret used to authenticate to Azure AD>

examples/web-app/README.md

@@ -0,0 +1,43 @@
+# Examples for Azure App Configuration JavaScript Provider
+
+These examples show how to use the JavaScript Provider for Azure App Configuration in some common scenarios.
+
+## Prerequisites
+
+The examples are compatible with [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule).
+
+You need [an Azure subscription](https://azure.microsoft.com/free/) and the following Azure resources to run the examples:
+
+- [Azure App Configuration store](https://learn.microsoft.com/en-us/azure/azure-app-configuration/quickstart-azure-app-configuration-create?tabs=azure-portal)
+
+The examples retrieve credentials to access your App Configuration store from environment variables.
+Alternatively, edit the source code to include the appropriate credentials.
+See each individual example for details on which environment variables/credentials it requires to function.
+
+## Add a key-value
+Add the following key-value to the App Configuration store and leave **Label** and **Content Type** with their default values. 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).
+
+| Key       | Value          |
+|-----------|----------------|
+| *message* | *Hello World!* |
+
+## Setup & Run
+
+To run the examples using the published version of the package:
+
+1. Install the dependencies using `npm`:
+
+    ```bash
+    npm install
+    ```
+
+2. There are two ways to run the examples using correct credentials:
+
+    - Edit the file `.env.template`, adding the access keys to your App Configuration store. and rename the file from `.env.template` to just `.env`. The examples will read this file automatically.
+    
+3. Run the examples:
+    ```bash
+    node httpserver.mjs
+    ```
+
+    Go to `http://localhost:3000`

examples/web-app/httpserver.mjs

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import * as dotenv from "dotenv";
+dotenv.config()
+
+import { load } from "@azure/app-configuration-provider";
+import { DefaultAzureCredential } from "@azure/identity";
+const endpoint = process.env.APPCONFIG_ENDPOINT;
+const credential = new DefaultAzureCredential();
+const appConfig = await load(endpoint, credential, {
+    refreshOptions: {
+        enabled: true,
+        // By default, the refresh interval is 30 seconds. You can change it by setting refreshIntervalInMs.
+    },
+    keyVaultOptions:{
+        credential: credential
+    }
+});
+let config = appConfig.constructConfigurationObject();
+
+appConfig.onRefresh(() => {
+    config = appConfig.constructConfigurationObject();
+});
+
+import express from "express";
+
+const server = express();
+const PORT = 3000;
+
+server.use(express.json());
+
+// Use a middleware to achieve request-driven configuration refresh
+// For more information, please go to dynamic refresh tutorial: https://learn.microsoft.com/azure/azure-app-configuration/enable-dynamic-configuration-javascript
+server.use((req, res, next) => {
+    // this call is not blocking, the configuration will be updated asynchronously
+    appConfig.refresh();
+    next();
+});
+
+server.get("/", (req, res) => {
+    res.send(`Message from Azure App Configuration: ${config.message}`);
+});
+
+server.get("/config", (req, res) => {
+    res.json(config);
+});
+
+server.listen(PORT, () => {
+  console.log(`Server is running on http://localhost:${PORT}`);
+});