Skip to content

Commit 277c75f

Browse files
v-ccolinv-ccolin
authored
Merge pull request #270192 from Eskibear/js-config-obj
Add configuration object support
2 parents 6d981a8 + af63d53 commit 277c75f

File tree

1 file changed

+156
-43
lines changed

1 file changed

+156
-43
lines changed

‎articles/azure-app-configuration/quickstart-javascript-provider.md

Lines changed: 156 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ ms.author: yanzh
1313
---
1414
# Quickstart: Create a JavaScript app with Azure App Configuration
1515

16-
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](https://github.com/Azure/AppConfiguration-JavaScriptProvider).
16+
In this quickstart, you use Azure App Configuration to centralize storage and management of application settings using the [Azure App Configuration JavaScript provider client library](https://github.com/Azure/AppConfiguration-JavaScriptProvider).
1717

1818
App Configuration provider for JavaScript is built on top of the [Azure SDK for JavaScript](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/appconfiguration/app-configuration) and is designed to be easier to use with richer features.
1919
It enables access to key-values in App Configuration as a `Map` object.
@@ -36,9 +36,9 @@ Add the following key-values to the App Configuration store. For more informatio
3636
| *app.greeting* | *Hello World* | Leave empty |
3737
| *app.json* | *{"myKey":"myValue"}* | *application/json* |
3838

39-
## Setting up the Node.js app
39+
## Create a Node.js console app
4040

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

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

@@ -58,50 +58,128 @@ In this tutorial, you'll create a Node.js console app and load data from your Ap
5858
npm install @azure/app-configuration-provider
5959
```
6060

61-
1. Create a new file called *app.js* in the *app-configuration-quickstart* directory and add the following code:
61+
## Connect to an App Configuration store
6262

63-
```javascript
64-
const { load } = require("@azure/app-configuration-provider");
65-
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
63+
The following examples demonstrate how to retrieve configuration data from Azure App Configuration and utilize it in your application.
64+
By default, the key-values are loaded as a `Map` object, allowing you to access each key-value using its full key name.
65+
However, if your application uses configuration objects, you can use the `constructConfigurationObject` helper API that creates a configuration object based on the key-values loaded from Azure App Configuration.
6666

67-
async function run() {
68-
let settings;
67+
Create a file named *app.js* in the *app-configuration-quickstart* directory and copy the code from each sample.
6968

70-
// Sample 1: Connect to Azure App Configuration using a connection string and load all key-values with null label.
71-
settings = await load(connectionString);
69+
### Sample 1: Load key-values with default selector
7270

73-
// Find the key "message" and print its value.
74-
console.log(settings.get("message")); // Output: Message from Azure App Configuration
71+
In this sample, you connect to Azure App Configuration using a connection string and load key-values without specifying advanced options.
72+
By default, it loads all key-values with no label.
7573

76-
// Find the key "app.json" as an object, and print its property "myKey".
77-
const jsonObject = settings.get("app.json");
78-
console.log(jsonObject.myKey); // Output: myValue
74+
```javascript
75+
const { load } = require("@azure/app-configuration-provider");
76+
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
7977

80-
// Sample 2: Load all key-values with null label and trim "app." prefix from all keys.
81-
settings = await load(connectionString, {
82-
trimKeyPrefixes: ["app."]
83-
});
78+
async function run() {
79+
console.log("Sample 1: Load key-values with default selector");
8480

85-
// From the keys with trimmed prefixes, find a key with "greeting" and print its value.
86-
console.log(settings.get("greeting")); // Output: Hello World
81+
// Connect to Azure App Configuration using a connection string and load all key-values with null label.
82+
const settings = await load(connectionString);
8783

88-
// Sample 3: Load all keys starting with "app." prefix and null label.
89-
settings = await load(connectionString, {
90-
selectors: [{
84+
console.log("---Consume configuration as a Map---");
85+
// Find the key "message" and print its value.
86+
console.log('settings.get("message"):', settings.get("message")); // settings.get("message"): Message from Azure App Configuration
87+
// Find the key "app.greeting" and print its value.
88+
console.log('settings.get("app.greeting"):', settings.get("app.greeting")); // settings.get("app.greeting"): Hello World
89+
// Find the key "app.json" whose value is an object.
90+
console.log('settings.get("app.json"):', settings.get("app.json")); // settings.get("app.json"): { myKey: 'myValue' }
91+
92+
console.log("---Consume configuration as an object---");
93+
// Construct configuration object from loaded key-values, by default "." is used to separate hierarchical keys.
94+
const config = settings.constructConfigurationObject();
95+
// Use dot-notation to access configuration
96+
console.log("config.message:", config.message); // config.message: Message from Azure App Configuration
97+
console.log("config.app.greeting:", config.app.greeting); // config.app.greeting: Hello World
98+
console.log("config.app.json:", config.app.json); // config.app.json: { myKey: 'myValue' }
99+
}
100+
101+
run().catch(console.error);
102+
```
103+
104+
### Sample 2: Load specific key-values using selectors
105+
106+
In this sample, you load a subset of key-values by specifying the `selectors` option.
107+
Only keys starting with "app." are loaded.
108+
Note that you can specify multiple selectors based on your needs, each with `keyFilter` and `labelFilter` properties.
109+
110+
```javascript
111+
const { load } = require("@azure/app-configuration-provider");
112+
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
113+
114+
async function run() {
115+
console.log("Sample 2: Load specific key-values using selectors");
116+
117+
// Load a subset of keys starting with "app." prefix.
118+
const settings = await load(connectionString, {
119+
selectors: [{
120+
keyFilter: "app.*"
121+
}],
122+
});
123+
124+
console.log("---Consume configuration as a Map---");
125+
// The key "message" is not loaded as it does not start with "app."
126+
console.log('settings.has("message"):', settings.has("message")); // settings.has("message"): false
127+
// The key "app.greeting" is loaded
128+
console.log('settings.has("app.greeting"):', settings.has("app.greeting")); // settings.has("app.greeting"): true
129+
// The key "app.json" is loaded
130+
console.log('settings.has("app.json"):', settings.has("app.json")); // settings.has("app.json"): true
131+
132+
console.log("---Consume configuration as an object---");
133+
// Construct configuration object from loaded key-values
134+
const config = settings.constructConfigurationObject({ separator: "." });
135+
// Use dot-notation to access configuration
136+
console.log("config.message:", config.message); // config.message: undefined
137+
console.log("config.app.greeting:", config.greeting); // config.app.greeting: Hello World
138+
console.log("config.app.json:", config.json); // config.app.json: { myKey: 'myValue' }
139+
}
140+
141+
run().catch(console.error);
142+
```
143+
144+
### Sample 3: Load key-values and trim prefix from keys
145+
146+
In this sample, you load key-values with an option `trimKeyPrefixes`.
147+
After key-values are loaded, the prefix "app." is trimmed from all keys.
148+
This is useful when you want to load configurations that are specific to your application by filtering to a certain key prefix, but you don't want your code to carry the prefix every time it accesses the configuration.
149+
150+
```javascript
151+
const { load } = require("@azure/app-configuration-provider");
152+
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
153+
154+
async function run() {
155+
console.log("Sample 3: Load key-values and trim prefix from keys");
156+
157+
// Load all key-values with no label, and trim "app." prefix from all keys.
158+
const settings = await load(connectionString, {
159+
selectors: [{
91160
keyFilter: "app.*"
92-
}],
93-
});
161+
}],
162+
trimKeyPrefixes: ["app."]
163+
});
94164

95-
// Print true or false indicating whether a setting is loaded.
96-
console.log(settings.has("message")); // Output: false
97-
console.log(settings.has("app.greeting")); // Output: true
98-
console.log(settings.has("app.json")); // Output: true
99-
}
165+
console.log("---Consume configuration as a Map---");
166+
// The original key "app.greeting" is trimmed as "greeting".
167+
console.log('settings.get("greeting"):', settings.get("greeting")); // settings.get("greeting"): Hello World
168+
// The original key "app.json" is trimmed as "json".
169+
console.log('settings.get("json"):', settings.get("json")); // settings.get("json"): { myKey: 'myValue' }
100170

101-
run().catch(console.error);
102-
```
171+
console.log("---Consume configuration as an object---");
172+
// Construct configuration object from loaded key-values with trimmed keys.
173+
const config = settings.constructConfigurationObject();
174+
// Use dot-notation to access configuration
175+
console.log("config.greeting:", config.greeting); // config.greeting: Hello World
176+
console.log("config.json:", config.json); // config.json: { myKey: 'myValue' }
177+
}
103178

104-
## Run the application locally
179+
run().catch(console.error);
180+
```
181+
182+
## Run the application
105183

106184
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:
107185

@@ -137,7 +215,9 @@ In this tutorial, you'll create a Node.js console app and load data from your Ap
137215
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
138216
```
139217
140-
1. Print the value of the environment variable to validate that it's set properly with the command below.
218+
---
219+
220+
1. Print the value of the environment variable to validate that it's set properly with the following command.
141221
142222
### [Windows command prompt](#tab/windowscommandprompt)
143223
@@ -171,21 +251,54 @@ In this tutorial, you'll create a Node.js console app and load data from your Ap
171251
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
172252
```
173253
254+
---
255+
174256
1. After the environment variable is properly set, run the following command to run the app locally:
175257
176258
```bash
177259
node app.js
178260
```
179261
180-
You should see the following output:
262+
You should see the following output for each sample:
263+
264+
**Sample 1**
265+
266+
```Output
267+
Sample 1: Load key-values with default selector
268+
---Consume configuration as a Map---
269+
settings.get("message"): Message from Azure App Configuration
270+
settings.get("app.greeting"): Hello World
271+
settings.get("app.json"): { myKey: 'myValue' }
272+
---Consume configuration as an object---
273+
config.message: Message from Azure App Configuration
274+
config.app.greeting: Hello World
275+
config.app.json: { myKey: 'myValue' }
276+
```
277+
278+
**Sample 2**
279+
280+
```Output
281+
Sample 2: Load specific key-values using selectors
282+
---Consume configuration as a Map---
283+
settings.has("message"): false
284+
settings.has("app.greeting"): true
285+
settings.has("app.json"): true
286+
---Consume configuration as an object---
287+
config.message: undefined
288+
config.app.greeting: Hello World
289+
config.app.json: { myKey: 'myValue' }
290+
```
291+
292+
**Sample 3**
181293
182294
```Output
183-
Message from Azure App Configuration
184-
myValue
185-
Hello World
186-
false
187-
true
188-
true
295+
Sample 3: Load key-values and trim prefix from keys
296+
---Consume configuration as a Map---
297+
settings.get("greeting"): Hello World
298+
settings.get("json"): { myKey: 'myValue' }
299+
---Consume configuration as an object---
300+
config.greeting: Hello World
301+
config.json: { myKey: 'myValue' }
189302
```
190303
191304
## Clean up resources

0 commit comments

Comments
 (0)