OpenFeature Provider for JavaScript
Getting started
1. Install the provider
npm i @openfeature/config-cat-web-provider
2. Initialize the provider
The ConfigCatWebProvider.create() function takes the SDK key and an optional options argument containing additional configuration options for the ConfigCat JavaScript SDK:
import { OpenFeature } from "@openfeature/web-sdk";
import { ConfigCatWebProvider } from '@openfeature/config-cat-web-provider';
import { createConsoleLogger, LogLevel } from "configcat-js-ssr";
// Build options for the ConfigCat SDK.
const options = {
logger: createConsoleLogger(LogLevel.Info),
setupHooks: (hooks) => hooks.on('clientReady', () => console.log('Client is ready!')),
// ...
}
// Configure the provider.
await OpenFeature.setProviderAndWait(ConfigCatWebProvider.create('#YOUR-SDK-KEY#', options));
// Create a client.
const client = OpenFeature.getClient();
For more information about all the configuration options, see the JavaScript SDK documentation.
3. Evaluate your feature flag
const isAwesomeFeatureEnabled = client.getBooleanValue('isAwesomeFeatureEnabled', false);
if (isAwesomeFeatureEnabled) {
doTheNewThing();
} else {
doTheOldThing();
}
4. Cleaning up
On application shutdown, clean up the OpenFeature provider and the underlying ConfigCat client.
await OpenFeature.clearProviders();
Evaluation Context
An evaluation context in the OpenFeature specification is a container for arbitrary contextual data that can be used as a basis for feature flag evaluation. The ConfigCat provider translates these evaluation contexts to ConfigCat User Objects.
The following table shows how the different context attributes are mapped to User Object attributes.
| Evaluation context | User Object | Required |
|---|---|---|
targetingKey | identifier | ☑ |
email | email | |
country | country | |
| Any other | custom |
To evaluate feature flags for a context, use the OpenFeature Evaluation API:
await OpenFeature.setContext({
targetingKey: '#SOME-USER-ID#',
email: '[email protected]',
country: 'CountryID',
});
const isAwesomeFeatureEnabled = client.getBooleanValue('isAwesomeFeatureEnabled', false);