Rollouts

The Rollouts Developer Hub

Welcome to the Rollouts developer hub. You'll find comprehensive guides and documentation to help you start working with Rollouts as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

JavaScript (Node)

Quickstart guide for Optimizely Rollouts

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

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/optimizely-sdk

or with Yarn:

yarn add @optimizely/optimizely-sdk

2. Configure Optimizely when your app starts

We recommend creating an optimizely.js file 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,  // 1 second in milliseconds
  },
});


module.exports = optimizelyClientInstance;

The autoUpdate and updateInterval parameters tell the Optimizely SDK how to poll for the latest changes made to your features.

Be sure to replace <Your_SDK_Key>. Here's where to find your SDK Key:

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

Click to enlarge

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:

Click to enlarge.

Click to enlarge.

After saving, import the optimizely instance from the file we created above and use the Boolean Is Feature Enabled method to show, hide, or change some visual part of your application. 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 optimizelyClientInstance = require('./optimizely');
const enabled = optimizelyClientInstance.isFeatureEnabled('new_feature', 'user123');
if (enabled) {
  // Show your feature
}

Note that the SDK takes time to download the latest changes made to your feature flags. This is not a problem if you are using the SDK in a long-running process like a node server because the Optimizely SDK will eventually load the latest feature flag configuration.

However, if you are using the SDK in an environment like a command line script that is not a long-running process, you should use the onReady method to wait for the SDK to initialize before calling isFeatureEnabled:

const optimizelyClientInstance = require('./optimizely');
optimizelyClientInstance.onReady().then(() => {
  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.

Click to enlarge.

Click to enlarge.

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.



JavaScript (Node)


Quickstart guide for Optimizely Rollouts

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.