JavaScript SDK

This is legacy documentation

CloudBees Feature Management is now part of CloudBees Unify. For current feature management documentation, go to CloudBees Unify Feature management.

This documentation covers the original CloudBees Feature Management product (formerly Rollout.io), which is end-of-life. It remains available only for existing customers who are migrating to CloudBees Unify.

Support during the extension period

Because CloudBees Feature Management is an end-of-life product, support during the extension period is limited to critical items only:

Critical security fixes: High-impact security issues are in scope and will be addressed.
Critical bug fixes: Reviewed case by case; resolution is not guaranteed.
General support, enhancements, and non-critical fixes: Not provided for end-of-life products during the extension period.

This coverage is consistent with the CloudBees end-of-life policy in the support Terms & Conditions.

This section describes how to set up and install the JavaScript SDK and how to deploy a feature flag.

Getting started with Javascript SDK

Step 1 - Setting up

To setup Javascript SDK, follow these steps:

Create a CloudBees Feature Management account. See Signup Page to create an account.
Get your environment key. Copy your environment key from App settings > Environments > Key.

Step 2 - Installing the Javascript SDK

Add the CloudBees Feature Management Javascript library to your application by running the following npm commands:

# Add JavaScript SDK package as your application dependency
$ npm i rox-browser --save▼

Add the following lines of code to your application:

import Rox from 'rox-browser';

const flags = {
  enableTutorial: new Rox.Flag(),
  titleColors: new Rox.RoxString('White', ['White', 'Blue', 'Green', 'Yellow']),
  titleSize: new Rox.RoxNumber(12, [14, 18, 24])
};

async function initRollout() {
  const options = { };

  // Register the flags
  Rox.register('', flags);

  // Setup the key
  await Rox.setup('<ROLLOUT-ENV-KEY>', options);

  // Boolean flag example
  if (flags.enableTutorial.isEnabled()) {
    console.log('enableTutorial flag is true');
    // TODO:  Put your code here that needs to be gated
  }

   // RoxString flag example
  console.log('Title color is ' + flags.titleColors.getValue());

  // RoxNumber flag example
  console.log('Title size is ' + flags.titleSize.getValue());
}

initRollout().then(function() {
  console.log('Done loading Rollout');
});▼

const Rox = require('rox-browser');

const flags = {
  enableTutorial: new Rox.Flag(),
  titleColors: new Rox.RoxString('White', ['White', 'Blue', 'Green', 'Yellow']),
  titleSize: new Rox.RoxNumber(12, [14, 18, 24])
};

async function initRollout() {
  const options = {  }

  // Register the flags
  Rox.register('', flags);

  // Setup the key
  await Rox.setup('<ROLLOUT-ENV-KEY>', options);

  // Boolean flag example
  if (flags.enableTutorial.isEnabled()) {
    console.log('enableTutorial flag is true');
    // TODO:  Put your code here that needs to be gated
  }

  // RoxString flag example
  console.log('Title color is ' + flags.titleColors.getValue());

  // RoxNumber flag example
  console.log('Title size is ' + flags.titleSize.getValue());
}

initRollout().then(function() {
  console.log('Done loading Rollout');
});▼

Container class registration and environment key setup

You cannot call Rox.setup() twice in the same runtime.

Run your application

Running the application

The flag name is automatically added to the CloudBees Feature Management dashboard after running the application.