JavaScript SDK

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:

  1. Create a CloudBees Feature Flags account. See Signup Page to create an account.

  2. Get your environment key.

    • Get the key from App Settings > Environment > Key.

Step 2 - Installing the Javascript SDK

Add the CloudBees Feature Flags 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:

ES6 CommonJS/AMD
import Rox from 'rox-browser';

const flags = {
  enableTutorial: new Rox.Flag(),
  titleColors: new Rox.Variant('White', ['White', 'Blue', 'Green', 'Yellow']),
};

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
  }

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

initRollout().then(function() {
  console.log('Done loading Rollout');
});
const Rox = require('rox-browser');

const flags = {
  enableTutorial: new Rox.Flag(),
  titleColors: new Rox.Variant('White', ['White', 'Blue', 'Green', 'Yellow']),
};

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
  }

  // Multivariate flag example
  console.log('Title color is ' + flags.titleColors.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 Flags dashboard after running the application.

Step 3 - Deploying a feature flag

Finding your flags in the CloudBees Feature Flags dashboard

After creating feature flags and running your feature code, you can find your flags in the CloudBees Feature Flags dashboard.

To find your flags in the dashboard:

  1. Find your application in the CloudBees Feature Flags dashboard. To switch between apps, click on the app name in the top-left corner of the screen and select the app you want from the pulldown.

  2. Click on Flags on the left side of the navigation panel.

  3. Confirm that your flag is listed in the flag view.

Configuring deployment rules

  1. Go to the CloudBees Feature Flags dashboard.

  2. Click on Experiments on the left panel.

  3. Click the Create Experiment button to create a new experiment.

  4. In the New Experiment window:

    • Find the Flag name from the menu, choose it.

    • Click the Set Audience button to continue. The Experiment Details view appears.

  5. Select either True, False, Split or Scheduled. Split allows you to select the percentage of the target group that you want to deploy. Scheduled allows you to schedule a deployment date.

    Audience

  6. Click Update Audience.

  • You cannot delete the default condition.

  • You can click the Reset link to go back to the state from before you started making changes. Reset only appears when you’ve made saved modifications.

See Audiences for more detailed information.