Getting started with TypeScript SDK

On this page

Step 1 - Setting up
Step 2 - Installing the TypeScript SDK

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

Step 1 - Setting up

To setup TypeScript SDK, follow these steps:

Create a CloudBees Feature Management account. See Signup Page to create an account.
Get your environment key.
- Get the key from App Settings > Environment > Key.

Step 2 - Installing the TypeScript SDK

To add the CloudBees Feature Management TypeScript library to your application by running the following npm commands:

# Add TypeScript SDK package as your application dependency
$ npm i @types/rox-browser --save

Add the following lines of code to your application:

ES6 CommonJS/AMD

ES6	CommonJS/AMD
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'); });

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.

SELECT PRODUCT

Getting started with TypeScript SDK

Step 1 - Setting up

Step 2 - Installing the TypeScript SDK

Run your application