In past few articles, I have been writing about Azure App Configuration Service. We have created few demo applications and you can find them in my GitHub repository. In this article, are going to have a look at how a JavaScript application can be configured to read the settings from Azure App Configuration Service using the App Configuration client library for JavaScript.
Prerequisites
For following all steps in this article, we will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.
We also need to have the LTS versions of Node.js installed on our local development machine. For more information about installing Node.js either directly on Windows or using the Windows Subsystem for Linux (WSL), see Get started with Node.js
Create Azure App Configuration Service
We will need an instance of Azure App Configuration Service. You can refer this article to create one using Azure Portal. Alternatively, you can run the bicep script from this article to create one for you. Refer my GitHub repository to create the resource if you want to use the Bicep files.
The below mentioned keys will be inserted by the script:
Key = TestApi:GetEndpoint:Message, Value = Hello
Key = TestApi:PostEndpoint:Message, Value = Good Morning
Key = TestApi:KeyWithLabel, Value = Value For Key With Label
Create JavaScript Application
Now, follow the steps mentioned below:
- Create a new folder JavaScript-Demo
- Then, create a JavaScript file =
javascript-demo.jsand copy the contents shown in the code snippet given below. - Then, install and NPM package @azure/app-configuration.
- Set the environment variable AZURE_APP_CONFIG_CONNECTION_STRING. Its value should be set to read-only connection string.
- Run the JavaScript file
The complete code of the JavaScript file is shown below.
The commands given below can be used for installing the App Configuration client library for JavaScript and environment variable. The last command can be used to run the javascript-demo.js file.
Run and Verify
Now, if we run the application, we can see that it is able to fetch the value of TestApi:PostEndpoint:Message and printing it on the console.
Although, I have used a simple JS file for this demo, the same NPM package can be used in any JavaScript application (e.g. Angular or React). I hope you find this information helpful. Let me know your thoughts.
