Quickstart: Create a JavaScript app with Azure App Configuration

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

Prerequisites

Create an App Configuration store

  1. To create a new App Configuration store, sign in to the Azure portal. In the upper-left corner of the home page, select Create a resource. In the Search services and marketplace box, enter App Configuration and select Enter.

    Search for App Configuration

  2. Select App Configuration from the search results, and then select Create.

    Select Create

  3. On the Create App Configuration pane, enter the following settings:

    Setting Suggested value Description
    Subscription Your subscription Select the Azure subscription that you want to use to test App Configuration. If your account has only one subscription, it's automatically selected and the Subscription list isn't displayed.
    Resource group AppConfigTestResources Select or create a resource group for your App Configuration store resource. This group is useful for organizing multiple resources that you might want to delete at the same time by deleting the resource group. For more information, see Use resource groups to manage your Azure resources.
    Resource name Globally unique name Enter a unique resource name to use for the App Configuration store resource. The name must be a string between 5 and 50 characters and contain only numbers, letters, and the - character. The name can't start or end with the - character.
    Location Central US Use Location to specify the geographic location in which your app configuration store is hosted. For the best performance, create the resource in the same region as other components of your application.
    Pricing tier Free Select the desired pricing tier. For more information, see the App Configuration pricing page.
  4. Select Review + create to validate your settings.

  5. Select Create. The deployment might take a few minutes.

  6. After the deployment finishes, navigate to the App Configuration resource. Select Settings > Access keys. Make a note of the primary read-only key connection string. You'll use this connection string later to configure your application to communicate with the App Configuration store that you created.

  1. Select Configuration Explorer > Create > Key-value to add the following key-value pairs:

    Key Value
    TestApp:Settings:Message Data from Azure App Configuration

    Leave Label and Content Type empty for now.

  2. Select Apply.

Setting up the Node.js app

  1. In this tutorial, you'll 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 client library by using the npm install command.

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

    const appConfig = require("@azure/app-configuration");
    

Configure your connection string

  1. Set an environment variable named AZURE_APP_CONFIG_CONNECTION_STRING, and set it to the access key to your App Configuration store. At the command line, run the following command:

    $Env:AZURE_APP_CONFIG_CONNECTION_STRING = "connection-string-of-your-app-configuration-store"
    
  2. Restart the command prompt to allow the change to take effect. Print out the value of the environment variable to validate that it is set properly.

Connect to an App Configuration store

The following code snippet creates an instance of AppConfigurationClient using the connection string stored in your environment variables.

const connection_string = process.env.AZURE_APP_CONFIG_CONNECTION_STRING;
const client = new appConfig.AppConfigurationClient(connection_string);

Get a configuration setting

The following code snippet retrieves a configuration setting by key name. The key shown in this example was created in the previous steps of this article.

async function run() {
  
  let retrievedSetting = await client.getConfigurationSetting({
    key: "TestApp:Settings:Message"
  });

  console.log("Retrieved value:", retrievedSetting.value);
}

run().catch((err) => console.log("ERROR:", err));

Build and run the app locally

  1. Run the following command to run the Node.js app:

    node app.js
    
  2. You should see the following output at the command prompt:

    Retrieved value: Data from Azure App Configuration
    

Clean up resources

If you do not 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. Make sure 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 from a Node.js app.

For additional code samples, visit: