When you add a feature flag to a story in Atono, you'll also need to include it in your codebase. Below, we provide sample code that demonstrates how to reference the feature flag and the environment it applies to.

Our feature flags are based on OpenFeature, an emerging standard for feature flagging that supports multiple platforms. For additional information, you can explore the OpenFeature SDK documentation.

1. Install the SDK

Run the following command in your project directory to install the Atono SDK:

npm install --save @atono-io/web-sdk

You can verify the installation by running:

npm list @atono-io/web-sdk

2. Add the flag to your code

Once you add a feature flag to a story, Atono will generate the following sample code that demonstrates how to implement the flag in your application:

// add the following to your app initialization (run once at startup) 
const { Atono } = require('@atono-io/web-sdk');
const atono = Atono.fromEnvironmentKey('$ENV_KEY');
const featureFlags = await atono.getFeatureFlags();

// reference feature flags in your application logic as follows 
if (featureFlags.getBooleanValue('flag_name', false)) {
  // turn on the feature associated with your feature flag 
}

You can copy the code from the Implement feature flag dialog. Paste the sample code in your application and use it to wrap the functionality you want to control with the feature flag.

3. Reference your environment key

Next, you'll need to replace the $ENV_KEY placeholder in the sample code with a reference to the environment variable that stores the environment key from Atono.

You can access your workspace's environment keys by clicking Environment keys in the Implement feature flag dialog or on the flag configuration screen:

This will take you to the Environments page, where you can click the copy icon next to an environment to copy its key to your clipboard.

4. Customer and Location context

For some applications, you may need to provide additional context when evaluating feature flags, such as customer or location. The way this context is handled differs between the client-side and server-side SDKs.

Client-side SDK

In the client-side SDK, location is automatically fetched and set by the SDK during initialization, so you don't need to manually set it. This simplifies cases where the user's location is relevant for flag evaluation.

However, for other context variables, like customer, you can manually set the context:

const { Atono } = require('@atono-io/web-sdk');

const atono = Atono.fromEnvironmentKey('$ENV_KEY');
const featureFlags = await atono.getFeatureFlags();

// Set the customer context for this specific flag evaluation
await featureFlags.setContext({ customer: 'Virtual-Vintage' });

const amazingFeatureEnabled = featureFlags.getBooleanValue('amazing_feature_enabled', false);

if (amazingFeatureEnabled) {
    console.log('Amazing feature is enabled 😎');
}

Since the user or location context doesn’t change often on the client-side, you only need to set this once when initializing the SDK.

Server-side SDK

On the server-side, because different requests can come from different users, the evaluation context needs to be passed dynamically with each request.

Here's an example of how you might pass the context for a flag evaluation:

const { Atono } = require('@atono-io/server-sdk');

const atono = Atono.fromEnvironmentKey('$ENV_KEY');
const featureFlags = await atono.getFeatureFlags();

const evaluationContext = featureFlags.makeEvaluationContext({ customer: 'Virtual-Vintage' });
const amazingFeatureEnabled = featureFlags.getBooleanValue('amazing_feature_enabled', false, evaluationContext);

if (amazingFeatureEnabled) {
    console.log('Amazing feature is enabled 😎');
}

You can optimize how to handle this evaluation context, depending on your application architecture. For example, you may want to cache the context for a session or create a new one for each request.