• HOME
  • INTEGRATIONS
  • SDKS
  • GUIDES
  • API DOCS
No results for ""
EXPAND ALL
launchdarkly.com

EDIT ON GITHUB

Bootstrapping

Read time: 3 minutes
Last edited: Jun 18, 2021

Overview

This topic explains how the bootstrapping feature works in the LaunchDarkly SDKs that support it.

Understanding the bootstrapping feature

The bootstrapping feature lets you decrease startup times for client-side SDKs by providing them with an intial set of flag values. The SDK serves these values to the user while it initializes, before it has established a connection to LaunchDarkly. The SDK makes an initial call to LaunchDarkly to check for updated flag values, but this happens in the background. The user experiences no inconsistency in which flag variations they see.

This feature is available in the following client-side SDKs:

  • Electron
  • JavaScript
  • Node.js
  • React

Electron

The bootstrap property in the client options lets you speed up the startup process by providing an initial set of flag values.

If you set bootstrap to an object, the client treats it as a map of flag keys to flag values. These values can be whatever you want, although in the browser environment there is a special mechanism that is commonly used. The client immediately starts out in a ready state using these values. It still makes an initial request to LaunchDarkly to get the actual latest values, but that happens in the background.

If you set bootstrap to the string "localstorage", the client tries to get flag values from persistent storage, using a unique key that is based on the user properties. In Electron, persistent storage consists of files in the userData directory. If the client finds flag values stored for this user, it uses them and starts up immediately in a ready state, but also makes a background request to LaunchDarkly to get the latest values and stores them as soon as it receives them.

JavaScript

Bootstrapping refers to providing the LaunchDarkly client object with an initial, immediately available set of feature flag values so that on page load variation can be called with no delay.

The preferred approach to bootstrapping is to populate a map of flag keys to flag values, called bootstrap values, from your back end using one of LaunchDarkly's server-side SDKs. All of the server-side SDKs have a function to evaluate flags on behalf of a specified user. This function provides the initial set of bootstrap values to your front end. The function is called some variation of "allFlagsState". The exact name varies depending on the back-end technology's naming conventions, such as camel-case or snake-case.

Below are two examples of how to bootstrap flags into the JavaScript client.

1// If your back end passes values to your front end on pageload,
2// you can call your server-side SDK's allFlagsState function
3// on pageload and pass the results as a parameter to your
4// front-end initialization code.
5function onPageLoad(flags) {
6 ...
7
8 var ldclient = LDClient.initialize(
9 'YOUR_CLIENT_SIDE_ID',
10 user,
11 options = {
12 bootstrap: flags
13 }
14 );
15
16 ...
17}

If you bootstrap from the server-side, feature flags are ready immediately, and clients always receive the latest feature flag values. For a demonstration of server-side bootstrapping, visit this GitHub repository.

Alternatively, you can bootstrap feature flags from local storage:

1var ldclient = LDClient.initialize('YOUR_CLIENT_SIDE_ID', user, options = {
2 bootstrap: 'localStorage'
3});

When it uses local storage, the client stores the latest flag settings there. On page load, it uses the previous settings and the 'ready' event is emitted immediately. This means that on page load, the user may see cached flag values until the next page load.

You can still subscribe to flag changes If you use local storage.

Node.js (client-side)

You can use bootstrapping on the Node.js SDK with values provided by LaunchDarkly-enabled code on the back end.

You can use it to set the feature flags to any values you want:

1const ldClient = LaunchDarkly.initialize(
2 'YOUR_CLIENT_SIDE_ID',
3 user,
4 {
5 bootstrap: {
6 flagKey1: flagValue1,
7 flagKey2: flagValue2
8 }
9 }
10);

A more useful mode in a client-side Node application is to bootstrap from locally cached values. In this mode, if no values have been cached yet, the SDK obtains flags from LaunchDarkly and then caches them in persistent storage. The next time you start, the cached flags are immediately available, and the SDK also contacts LaunchDarkly in the background to obtain updated values.

To activate this mode, use the special string "localstorage":

1const ldClient = LaunchDarkly.initialize(
2 'YOUR_CLIENT_SIDE_ID',
3 user,
4 {
5 bootstrap: 'localStorage'
6 }
7);

React

You can use the optional flags property to bootstrap the React SDK.

If flags is specified, the React SDK only subscribes for updates to these flags. When this property is unspecified, the React SDK subscribes to all flags. This property is optional.

Specify the flags property as a map of flag keys and values. The flag keys must be in their original form (as known to LaunchDarkly) rather than in their camel-cased form. Each flag's value is passed along to the resulting JS SDK variation invocation and used as the flag's default value in the case of an error.

Here is an example:

1{
2 flags: {
3 "my-bool-flag": true,
4 "my-int-flag": 5
5 }
6}

To learn more, read React SDK reference.