Quickstart: Create a JavaScript app with Azure App Configuration

  • Article

In this quickstart, you'll use Azure App Configuration to centralize storage and management of application settings using the Azure App Configuration JavaScript provider client library.

App Configuration provider for JavaScript is built on top of the Azure SDK for JavaScript and is designed to be easier to use with richer features. It enables access to key-values in App Configuration as a Map object. It offers features like configuration composition from multiple labels, key prefix trimming, automatic resolution of Key Vault references, and many more. As an example, this tutorial shows how to use the JavaScript provider in a Node.js app.

Prerequisites

Add key-values

Add the following key-values to the 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.

Key Value Content type
message Message from Azure App Configuration Leave empty
app.greeting Hello World Leave empty
app.json {"myKey":"myValue"} application/json

Setting up the Node.js app

In this tutorial, you'll create a Node.js console app and load data from your App Configuration store.

  1. Create a new directory for the project named app-configuration-quickstart.

    mkdir app-configuration-quickstart

  2. Switch to the newly created app-configuration-quickstart directory.

    cd app-configuration-quickstart

  3. Install the Azure App Configuration provider by using the npm install command.

    npm install @azure/app-configuration-provider

  4. Create a new file called app.js in the app-configuration-quickstart directory and add the following code:

    const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    let settings;

    // Sample 1: Connect to Azure App Configuration using a connection string and load all key-values with null label.
    settings = await load(connectionString);

    // Find the key "message" and print its value.
    console.log(settings.get("message"));  // Output: Message from Azure App Configuration

    // Find the key "app.json" as an object, and print its property "myKey".
    const jsonObject = settings.get("app.json");
    console.log(jsonObject.myKey);  // Output: myValue

    // Sample 2: Load all key-values with null label and trim "app." prefix from all keys.
    settings = await load(connectionString, {
      trimKeyPrefixes: ["app."]
    });

    // From the keys with trimmed prefixes, find a key with "greeting" and print its value.
    console.log(settings.get("greeting")); // Output: Hello World

    // Sample 3: Load all keys starting with "app." prefix and null label.
    settings = await load(connectionString, {
      selectors: [{
        keyFilter: "app.*"
      }],
    });

    // Print true or false indicating whether a setting is loaded.
    console.log(settings.has("message")); // Output: false
    console.log(settings.has("app.greeting")); // Output: true
    console.log(settings.has("app.json")); // Output: true
}

run().catch(console.error);

Run the application locally

  1. Set an environment variable named AZURE_APPCONFIG_CONNECTION_STRING, and set it to the connection string of your App Configuration store. At the command line, run the following command:

    To run the app locally using the Windows command prompt, run the following command and replace <app-configuration-store-connection-string> with the connection string of your app configuration store:

    setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"

  2. Print the value of the environment variable to validate that it's set properly with the command below.

    Using the Windows command prompt, restart the command prompt to allow the change to take effect and run the following command:

    echo %AZURE_APPCONFIG_CONNECTION_STRING%

  3. After the environment variable is properly set, run the following command to run the app locally:

    node app.js

    You should see the following output:

    Message from Azure App Configuration
myValue
Hello World
false
true
true

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.

Important

Deleting a resource group is irreversible. The resource group and all the resources in it are permanently deleted. Ensure that you don't accidentally delete the wrong resource group or resources. If you created the resources for this article inside a resource group that contains other resources you want to keep, delete each resource individually from its respective pane instead of deleting the resource group.

  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 quickstart, you created a new App Configuration store and learned how to access key-values using the App Configuration JavaScript provider in a Node.js app.

For more code samples, visit:

Azure App Configuration JavaScript provider