JavaScript (browser) SDK installation

Control feature rollout for certain user segments of your application with feature flags. To start using feature management in the platform, follow the instructions below to install the SDK and deploy a feature flag.

These same instructions are available in the platform UI. Select Installation from the left pane to use.

To install the SDK:

Select the next to Feature management on the left pane, and then select Installation.
Select an Environment from the options, or create an environment by completing the following:
1. Select CREATE ENVIRONMENT.
2. Enter an Environment name.
3. (Optional) Enter a Description.
4. (Optional) Select Approvers if you want to have a manual approval required before deployment.
5. (Optional) Enter any Properties you want to associate with the environment. For more information, refer to properties configuration and properties in an environment.
6. Select SUBMIT.
Select JavaScript from the language options.
Select a package manager from the options.

Add the ROX package to your application by running the shell commands appropriate for your package manager, listed in the following table:

Table 1. Commands to add the ROX package to your application
Package manager	Project	Commands to run
npm	JavaScript	`npm install rox-browser --save`
npm	TypeScript	`npm install rox-browser --save` `npm install @types/rox-browser --save`
yarn	JavaScript	`yarn add rox-browser`
yarn	TypeScript	`yarn add rox-browser` `yarn add @types/rox-browser`

Add the following code to your JavaScript application:

Your SDK key is a unique environment identifier. During SDK installation, the SDK key is displayed within the Rox.setup call.

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 initPlatform() {
  const options = { };

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

  // Setup connection with the feature management environment key
  await Rox.setup('<your-SDK-key>', options);(1)

  // 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());
}

initPlatform().then(function() {
  console.log('Done loading CloudBees platform');
});▼

1	The platform provides the unique SDK key for your environment at the `<your-SDK-key>` location within the `Rox.setup` call.

Run your application and then select TEST INTEGRATION to confirm a successful connection.

After running the application, a default flag is automatically added to your feature flag list.

You have installed an SDK and created flags in your application.

Refer to the SDK reference for more information.