Skip to content
ConfigBee Docs

OpenFeature Provider for Web

The official ConfigBee OpenFeature Provider for Web allows you to seamlessly integrate ConfigBee with the OpenFeature standard in your web applications. This provider brings ConfigBee’s powerful feature flagging and dynamic configuration capabilities to any OpenFeature-compatible JavaScript/TypeScript application.

Introduction to OpenFeature

OpenFeature is an open standard for feature flag management that provides a unified API across different programming languages and environments. By implementing the OpenFeature specification, ConfigBee enables you to:

  • Use ConfigBee as your feature management backend while maintaining compatibility with OpenFeature tooling
  • Switch between feature flag providers without changing your application code
  • Benefit from the broader OpenFeature ecosystem and community

Installation

Install the ConfigBee OpenFeature Provider for Web via npm or yarn:

Terminal window
npm install configbee-openfeature-provider-web

Prerequisites:

Install OpenFeature Web SDK

Terminal window
npm install @openfeature/js-sdk

Getting Started

Basic Setup

Here’s how to set up the ConfigBee OpenFeature Provider in your web application:

import { OpenFeature } from '@openfeature/js-sdk';
import { ConfigbeeWebProvider } from 'configbee-openfeature-provider-web';


// Initialize the ConfigBee provider with your account credentials
const configBeeProvider = new ConfigbeeWebProvider({
  accountId: 'your-account-id',
  projectId: 'your-project-id',
  environmentId: 'your-environment-id'
});


// Set the ConfigBee provider as the OpenFeature provider
OpenFeature.setProvider(configBeeProvider);


// Get a client instance to interact with feature flags
const client = OpenFeature.getClient();

Using Feature Flags

Once the provider is set up, you can use OpenFeature’s client to check feature flags:

// Get a boolean flag with a default value of false
const isNewFeatureEnabled = await client.getBooleanValue('new_feature', false);


// Conditionally execute code based on flag value
if (isNewFeatureEnabled) {
  // Execute code for the new feature
  console.log('New feature is enabled!');
} else {
  // Execute fallback code
  console.log('New feature is disabled.');
}

Working with Different Value Types

OpenFeature supports multiple value types for flags:

// Boolean flag
const isEnabled = await client.getBooleanValue('feature_enabled', false);


// String value
const welcomeMessage = await client.getStringValue('welcome_message', 'Hello, World!');


// Number value
const maxItems = await client.getNumberValue('max_items', 10);


// JSON object
const config = await client.getObjectValue('app_config', { theme: 'light', timeout: 30 });

Contextual Targeting

ConfigBee supports delivering personalized features based on context (such as user attributes). You can use OpenFeature’s context API to provide targeting information:

Setting Context

// Set context that applies to all flag evaluations
await OpenFeature.setContext({
  userId: 'user-123',
  userRole: 'admin',
  region: 'us-west'
});

Updating Context Based on User State

// Update context when user logs in
function onUserLogin(user) {
  OpenFeature.setContext({
    userId: user.id,
    userName: user.name,
    userRole: user.role,
    subscription: user.subscription
  });
}


// Clear context when user logs out
function onUserLogout() {
  OpenFeature.setContext({});
}

Framework Integration

React Integration

The ConfigBee OpenFeature Provider works with the OpenFeature React SDK:

Terminal window
npm install @openfeature/react-sdk

Example usage:

import { useFlagValue } from '@openfeature/react-sdk';


function FeatureComponent() {
  const isNewUIEnabled = useFlagValue('new_ui', false);


  return (
    <div>
      {isNewUIEnabled ? (
        <NewUIComponent />
      ) : (
        <LegacyUIComponent />
      )}
    </div>
  );
}

Angular Integration

For Angular applications, use the OpenFeature Angular SDK:

Terminal window
npm install @openfeature/angular-sdk

Example usage:

import { Component } from '@angular/core';
import { OpenFeatureClient } from '@openfeature/angular-sdk';


@Component({
  selector: 'app-feature',
  template: `
    <div *ngIf="isNewFeatureEnabled$ | async">
      <new-feature-component></new-feature-component>
    </div>
    <div *ngIf="!(isNewFeatureEnabled$ | async)">
      <legacy-feature-component></legacy-feature-component>
    </div>
  `
})
export class FeatureComponent {
  isNewFeatureEnabled$ = this.client.getBooleanDetails('new_feature', false).valueChanges;


  constructor(private client: OpenFeatureClient) {}
}

Best Practices

  1. Default Values: Always provide sensible default values when requesting flag values.

    // Good practice
    const maxRetries = await client.getNumberValue('max_retries', 3);
    

    // Avoid omitting defaults
    const maxRetries = await client.getNumberValue('max_retries'); // Bad practice

  2. Error Handling: Wrap flag evaluations in try-catch blocks for production code.

    try {
      const isFeatureEnabled = await client.getBooleanValue('feature_flag', false);
      // Use the flag value
    } catch (error) {
      console.error('Error evaluating feature flag:', error);
      // Fall back to default behavior
    }

  3. Context Management: Keep user context updated throughout the application lifecycle.

  4. Flag Naming Conventions: Use consistent naming conventions for your flags in ConfigBee.

  5. Graceful Degradation: Design your application to work properly even if flag evaluations fail.

Troubleshooting

Provider Not Ready

If flags are not being evaluated correctly:

  1. Check that the provider initialization is complete
  2. Verify your ConfigBee credentials
  3. Check network connectivity
  4. Look for errors in the browser console

Context Not Applied

If targeting doesn’t work as expected:

  1. Verify that context is set before evaluating flags
  2. Check that context property names match those configured in ConfigBee
  3. Ensure context values are of the expected type

Flag Values Not Updating

If flag changes are not reflected:

  1. Verify that the flag has been updated in the ConfigBee dashboard
  2. Ensure you’re checking the correct environment

Resources