Skip to content
azure-appconfiguration-ts logo

Azure App Configuration SDK for TypeScript

azure-appconfiguration-ts

Centralized configuration management with feature flags and dynamic refresh.

ranbot-ai/awesome-skills0installs6stars

SKILL.md

Full skill instructions

Azure App Configuration SDK for TypeScript

Centralized configuration management with feature flags and dynamic refresh.

Installation

# Low-level CRUD SDK
npm install @azure/​app-configuration @azure/​identity

# High-level provider (recommended for apps)
npm install @azure/​app-configuration-provider @azure/​identity

# Feature flag management
npm install @microsoft/​feature-management

Environment Variables

AZURE_APPCONFIG_ENDPOINT=https://<your-resource>.azconfig.io
# OR
AZURE_APPCONFIG_CONNECTION_STRING=Endpoint=https://...;Id=...;Secret=...

Authentication

import { AppConfigurationClient } from "@azure/​app-configuration";
import { DefaultAzureCredential } from "@azure/​identity";

// DefaultAzureCredential (recommended)
const client = new AppConfigurationClient(
  process.env.AZURE_APPCONFIG_ENDPOINT!,
  new DefaultAzureCredential()
);

// Connection string
const client2 = new AppConfigurationClient(
  process.env.AZURE_APPCONFIG_CONNECTION_STRING!
);

CRUD Operations

Create/​Update Settings

// Add new (fails if exists)
await client.addConfigurationSetting({
  key: "app:settings:message",
  value: "Hello World",
  label: "production",
  contentType: "text/​plain",
  tags: { environment: "prod" },
});

// Set (create or update)
await client.setConfigurationSetting({
  key: "app:settings:message",
  value: "Updated value",
  label: "production",
});

// Update with optimistic concurrency
const existing = await client.getConfigurationSetting({ key: "myKey" });
existing.value = "new value";
await client.setConfigurationSetting(existing, { onlyIfUnchanged: true });

Read Settings

// Get single setting
const setting = await client.getConfigurationSetting({
  key: "app:settings:message",
  label: "production",  // optional
});
console.log(setting.value);

// List with filters
const settings = client.listConfigurationSettings({
  keyFilter: "app:*",
  labelFilter: "production",
});

for await (const setting of settings) {
  console.log(`${setting.key}: ${setting.value}`);
}

Delete Settings

await client.deleteConfigurationSetting({
  key: "app:settings:message",
  label: "production",
});

Lock/​Unlock (Read-Only)

// Lock
await client.setReadOnly({ key: "myKey", label: "prod" }, true);

// Unlock
await client.setReadOnly({ key: "myKey", label: "prod" }, false);

App Configuration Provider

Load Configuration

import { load } from "@azure/​app-configuration-provider";
import { DefaultAzureCredential } from "@azure/​identity";

const appConfig = await load(
  process.env.AZURE_APPCONFIG_ENDPOINT!,
  new DefaultAzureCredential(),
  {
    selectors: [
      { keyFilter: "app:*", labelFilter: "production" },
    ],
    trimKeyPrefixes: ["app:"],
  }
);

// Map-style access
const value = appConfig.get("settings:message");

// Object-style access
const config = appConfig.constructConfigurationObject({ separator: ":" });
console.log(config.settings.message);

Dynamic Refresh

const appConfig = await load(endpoint, credential, {
  selectors: [{ keyFilter: "app:*" }],
  refreshOptions: {
    enabled: true,
    refreshIntervalInMs: 30_000,  // 30 seconds
  },
});

// Trigger refresh (non-blocking)
appConfig.refresh();

// Listen for refresh events
const disposer = appConfig.onRefresh(() => {
  console.log("Configuration refreshed!");
});

// Express middleware pattern
app.use((req, res, next) => {
  appConfig.refresh();
  next();
});

Key Vault References

const appConfig = await load(endpoint, credential, {
  selectors: [{ keyFilter: "app:*" }],
  keyVaultOptions: {
    credential: new DefaultAzureCredential(),
    secretRefreshIntervalInMs: 7200_000,  // 2 hours
  },
});

// Secrets are automatically resolved
const dbPassword = appConfig.get("database:password");

Feature Flags

Create Feature Flag (Low-Level)

import {
  featureFlagPrefix,
  featureFlagContentType,
  FeatureFlagValue,
  ConfigurationSetting,
} from "@azure/​app-configuration";

const flag: ConfigurationSetting<FeatureFlagValue> = {
  key: `${featureFlagPrefix}Beta`,
  contentType: featureFlagContentType,
  value: {
    id: "Beta",
    enabled: true,
    description: "Beta feature",
    conditions: {
      clientFilters: [
        {
          name: "Microsoft.Targeting",
          parameters: {
            Audience: {
              Users: ["[email protected]"],
              Groups: [{ Name: "beta-testers", RolloutPercentage: 50 }],
              DefaultRolloutPercentage: 0,
            },
          },
        },
      ],
    },
  },
};

await client.addConfigurationSetting(flag);

Load and Evaluate Feature Flags

import { load } from "@azure/​app-configuration-provider";
import {
  ConfigurationMapFeatureFlagProvider,
  FeatureManager,
} from "@microsoft/​feature-management";

const appConfig = await load

More skills from ranbot-ai

react-modernization logo
ranbot-ai/awesome-skills

react-modernization

Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.

6 1
View
cicd-automation-workflow-automate logo
ranbot-ai/awesome-skills

cicd-automation-workflow-automate

You are a workflow automation expert specializing in creating efficient CI/CD pipelines, GitHub Actions workflows, and automated development processes. Design and implement automation that reduces man

6 1
View
conductor-manage logo
ranbot-ai/awesome-skills

conductor-manage

Manage track lifecycle: archive, restore, delete, rename, and cleanup

6 0
View
c-pro logo
ranbot-ai/awesome-skills

c-pro

Write efficient C code with proper memory management, pointer

6 0
View
clerk-auth logo
ranbot-ai/awesome-skills

clerk-auth

Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync

6 0
View
mezmo-automation logo
ranbot-ai/awesome-skills

mezmo-automation

Automate Mezmo tasks via Rube MCP (Composio). Always search tools first for current schemas.

6 0
View
fp-types-ref logo
ranbot-ai/awesome-skills

fp-types-ref

Quick reference for fp-ts types. Use when user asks which type to use, needs Option/Either/Task decision help, or wants fp-ts imports.

6 0
View
google-calendar-automation logo
ranbot-ai/awesome-skills

google-calendar-automation

Lightweight Google Calendar integration with standalone OAuth authentication. No MCP server required.

6 0
View
scala-pro logo
ranbot-ai/awesome-skills

scala-pro

Master enterprise-grade Scala development with functional programming, distributed systems, and big data processing. Expert in Apache Pekko, Akka, Spark, ZIO/Cats Effect, and reactive architectures.

6 0
View
python-development-python-scaffold logo
ranbot-ai/awesome-skills

python-development-python-scaffold

You are a Python project architecture expert specializing in scaffolding production-ready Python applications. Generate complete project structures with modern tooling (uv, FastAPI, Django), type hint

6 0
View
onedesk-automation logo
ranbot-ai/awesome-skills

onedesk-automation

Automate Onedesk tasks via Rube MCP (Composio). Always search tools first for current schemas.

6 0
View
googlecalendar-automation logo
ranbot-ai/awesome-skills

googlecalendar-automation

Automate Google Calendar tasks via Rube MCP (Composio). Always search tools first for current schemas.

6 0
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View