Optimizely 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 (React)

Quickstart guide for Optimizely Rollouts

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

This guide will help you:

  1. Install the React SDK
  2. Create a feature flag
  3. Find a component to feature flag
  4. Roll out the feature

1. Install the React SDK

The React SDK can be used in any react application. Add it to your package:

npm install @optimizely/js-web-sdk @optimizely/react-sdk

Use the SDK by wrapping your main React App component in the OptimizelyProvider component:

import { OptimizelyProvider } from '@optimizely/react-sdk'
import * as optimizelySDK from '@optimizely/js-web-sdk'

const optimizely = optimizelySDK.createInstance({
  sdkKey: '<Your_SDK_Key>',
})

class App extends React.Component {
  render() {
    return (
      <OptimizelyProvider optimizely={optimizely} userId={'user123'}>
        <WrappedApp />
      </OptimizelyProvider>
    )
  }
}

The full list React instructions are at: https://github.com/optimizely/fullstack-labs/tree/master/packages/react-sdk

Here's where to find your SDK Key:

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

2. Create a feature flag

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, use the boolean Is Feature Enabled function 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.

When you're ready, click Create Feature to save.

3. Find a component to feature flag

Find a component in your react application you want to feature flag.

Import the OptimizelyFeature component at the top of your component file:

import { OptimizelyFeature } from '@optimizely/react-sdk'
  
  

Then use the feature key created in the UI and put the following OptimizelyFeature component in your app where you would like to use the feature flag:


<OptimizelyFeature feature="<your_feature_key>">
  {(isEnabled) => (
    isEnabled ? "Got the feature!" : "Did not get the feature!"
  )}
</OptimizelyFeature>

The UserId lets Optimizely provide a consistent experience for each user. For now, provide any non-null string value for the UserId.

4. Roll out the feature

Navigate back to Features and select your feature to control 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.

We also offer more advanced QA tools that you can adapt to your development process.

When you're ready, go ahead and launch your feature flag! Come back and adjust its configuration any time, without deploying code.


What's Next

Now that you've seen how feature flags work with Optimizely, learn about configuring our SDKs for your development workflow.

Run a beta
Implement in production

JavaScript (React)


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.