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 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

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

1. Install the React SDK

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

npm install @optimizely/react-sdk

yarn add @optimizely/react-sdk

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

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

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

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


The full list React instructions are at: https://github.com/optimizely/react-sdk.

Here's where to find your SDK Key:

  1. Navigate to Settings > Environments.
  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. 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.

Put the OptimizelyFeature component, imported in the code sample above, in your app where you would like to use the feature flag. Pass in the feature key created in the UI to connect this component to your feature:


<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.



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.