Getting started with JavaScript SSR SDK

2 minute read

JavaScript SSR SDK is for web applications that use server-side rendering (SSR). This section describes how to set up and install the JavaScript SSR SDK and how to deploy a feature flag. You can also configure the JavaScript SSR SDK with your own options and use manual overrides.

Setting up JavaScript SSR SDK

The following are prerequisites for installing the JavaScript SSR SDK:

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

  2. Get your environment key. Copy your environment key from App settings > Environments > Key.

Installing JavaScript SSR SDK

Add the CloudBees Feature Management JavaScript SSR library to your application by running the following npm command:

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

Add the following lines of code to your application:

// Import SDK
import { Flag, RoxString, RoxNumber, Rox } from 'rox-ssr';

// Create a Roxflag in the flags container class
const flags = {
  enableTutorial: new Flag(),
  titleColors: new RoxString('White', ['White', 'Blue', 'Green', 'Yellow']),
  titleSize: new RoxNumber(12, [14, 18, 24])
};

async function initRollout() {
  const options = {  }

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

  // Set up the environment 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');
});
▼

Hydrating with the flag configuration

To ensure consistency of feature flags between the server and web clients, you must send the CloudBees Feature Management configuration to the clients. Once you have installed the JavaScript SSR SDK, add the following lines of code to the server, within the <head> tag.

import {Rox} from 'rox-ssr';

// ...
// Your component render() method
render() {
return (
<html>
<head>
<script type='text/javascript' dangerouslySetInnerHTML={{ __html: `window.rolloutData = ${JSON.stringify(Rox.rolloutData)};` }} />
<head>
</html>)
}
▼

The SDK automatically uses the data inside window.rolloutData instead of fetching the configuration from the CloudBees Feature Management server.

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.

Configuring the SDK with your own options (optional)

You can override the default configuration by providing a predefined configuration preset for Rox.setup.

For example:

import {Rox} from 'rox-ssr';

/*
- roxOptions.distinctId
- roxOptions.version
- roxOptions.syncComplitionHandler
*/

const roxOptions = {
distinctId: 'sessionDistinctId',
version: '1.0',
configurationFetchedHandler: () => {}
};

Rox.setup('<app key>', roxOptions);
▼

Activating the manual overrides UI (optional)

When running your application in the browser, you can manually override flags using a built-in UI debug utility. To activate the debug utility, invoke Rox.showOverrides().

The debug utility displays a UI element that allows you to explicitly set values of flags. The available locations of the UI element are:

  • 'top left'

  • 'top right'

  • 'bottom left'

  • 'bottom right' (default)