Web

Installation

Add the OpenFeature SDK and the Tggl Provider to your project:

npm i @openfeature/web-sdk openfeature-web-tggl-provider

Quick start

Register the TgglWebProvider with the OpenFeature SDK and start evaluating flags:

import { OpenFeature } from '@openfeature/web-sdk';
import { TgglWebProvider } from 'openfeature-web-tggl-provider'
 
await OpenFeature.setProviderAndWait(new TgglWebProvider('API_KEY'))
 
const client = OpenFeature.getClient();
 
const value = client.getBooleanValue(
  'my-feature',
  false
)
 
if (value) {
  console.log('Feature is enabled')
}

Getting a flag's value

There are four methods to get a flag's value: getBooleanValue, getNumberValue, getStringValue, and getObjectValue.

Each method takes the flag's key as the first argument, a default value as the second argument, and an optional context object as the third argument.

client.getBooleanValue('feat-a', false, { userId: 'foo' })
client.getNumberValue('feat-b', 42, { userId: 'foo' })
client.getStringValue('feat-c', 'foo', { userId: 'foo' })
client.getObjectValue('feat-d', { custom: 'object' }, { userId: 'foo' })

The default value must be specified and will be returned if the flag is not found or if an error occurs.

Managing the context

You can set up the initial context when calling setProviderAndWait, the promise will resolve once the active flags for that context have been retrieved form the API:

await OpenFeature.setProviderAndWait(new TgglWebProvider('API_KEY'), {
  userId: 'foo',
  country: 'FR',
  //...
})

If omitted, the context will default to an empty object. Alternatively, you can call the setProvider method to set the provider without waiting for the flags to be fetched:

import { OpenFeature, ClientProviderEvents } from '@openfeature/web-sdk';
import { TgglWebProvider } from 'openfeature-web-tggl-provider'
 
OpenFeature.setProvider(new TgglWebProvider('API_KEY'))
 
OpenFeature.addHandler(ClientProviderEvents.Error, ({ message }) => {
  console.log(message)
})
 
OpenFeature.addHandler(ClientProviderEvents.Ready, () => {
  console.log('Provider ready')
})

Finally, you can update the context at any time to react to changes in your app:

await OpenFeature.setContext({
  userId: 'bar',
  country: 'UK',
  //...
});

setContext is async and will return a promise that resolves once the flags for that new context have been fetched from the API.

Polling for "live" updates

If you need your client to be up-to-date with the latest flag configuration, you can enable polling:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  pollingInterval: 5000
}))

Here, the provider will poll the Tggl API every 5 seconds for updates. You can be notified when some flag changes by listening to the ConfigurationChanged event:

OpenFeature.addHandler(ClientProviderEvents.ConfigurationChanged, () => {
  // Configuration has changed
})

This is a good time to recompute flags where you need a "live" value.

Using the Proxy

By default, the Provider talks directly to the Tggl API. If you are using the Tggl Proxy, you can specify the proxy URL when instantiating the provider:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  baseUrl: 'http://your-proxy-domain.com'
}))

The /flags and /report path will be appended to the baseUrl and both flags evaluation and reporting will go through the proxy. If your proxy is configured with custom paths, you can specify them:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  url: 'http://your-proxy-domain.com/custom-flags',
  reporting: {
    url: 'http://your-proxy-domain.com/custom-report'
  }
}))

Going further

Read the official OpenFeature SDK documentation for more information on how to use the SDK.

You can also have a look at Tggl's Node.js SDK documentation that is used under the hood by the TgglWebProvider.