rollouts_quickstart.md

Rollouts Node Quickstart

Welcome to the quickstart guide for Optimizely's JavaScript SDK. The instructions below will help you implement Optimizely Rollouts and launch your first feature flag.

This guide will help you:

1. Install the SDK
2. Instantiate Optimizely when your app starts
3. Create a feature flag
4. Roll out a feature

You can also follow along in this 5-minute video:

Click here to see the sample application shown in this video.

1. Install the SDK

The JavaScript SDK can be used in Node.js environments, and is distributed through npm. Add it to your package with NPM:

npm install --save @optimizely/[email protected]

or with Yarn: yarn add @optimizely/[email protected]

The full source code is at https://github.com/optimizely/javascript-sdk/tree/master/packages/optimizely-sdk.

2. Instantiate the client

We recommend creating an optimizely.js that exports an instantiated Optimizely client. This file can be required anywhere you want to use feature flagging.

const optimizelySDK = require('@optimizely/optimizely-sdk');

optimizelySDK.setLogLevel('info');
optimizelySDK.setLogger(optimizelySDK.logging.createLogger())

const optimizelyClientInstance = optimizelySDK.createInstance({
  sdkKey: '<YOUR_SDK_KEY>',
  datafileOptions: {
    autoUpdate: true,
    updateInterval: 1000, // polling interval in milliseconds
  },
});


module.exports = optimizelyClientInstance;

The optimizely instance can be required and used anywhere that is needed.

const optimizelyClientInstance = require('./optimizely');
const enabled = optimizelyClientInstance.isFeatureEnabled('new_feature', 'user123');
if (enabled) {
  // Show your feature
}

This is just one way to maintain reference to an Optimizely client. Other options include storing it as a global variable.

Here's where to find your SDK Key:

1. Navigate to Settings > Datafile.
2. Copy the SDK Key / Primary URL.

3. Create a feature flag

Choose a feature in your app to turn on and off with a feature flag. For your first flag, consider starting with a link or visual element that's simple to change, show, or hide based on a boolean.

To set up your first feature flag, navigate to Features > Create New Feature.

Here's how to set it up:

After saving, use the boolean Is Feature Enabled method to show, hide, or change some visual part of your application. Note: you should see a value of false from this function because you haven't rolled out the feature yet. You'll turn it on in the next step.

const enabled = optimizelyClientInstance.isFeatureEnabled('new_feature', 'user123');
if (enabled) {
  // Show your feature
}

The userID enables you to create consistent experiences for a user across multiple visits, but you don't need it for this quickstart. Make the userID any non-null string for now.

4. Roll out the feature

Navigate back to Features and select your feature flag.

You'll return to this modal whenever you want to update this feature flag. For example, roll out your feature incrementally by moving the slider up by 10% per day or show it to a certain group of users. Move it to 100% for a big reveal, or 0% if issues arise in production. No code deployment necessary.

A basic way to confirm that your feature flag is working:

Show the feature to yourself

1. Navigate to your feature.
2. Toggle it ON and move the slider to 100% traffic. Click Save.
3. Confirm that you see the feature.

Hide the feature from yourself

1. Navigate back to the feature.
2. Toggle it OFF. Click Save.
3. Confirm that you no longer see the feature.

When you're ready, go ahead and roll out your feature in production. Come back and adjust its configuration any time, without deploying code.