Using the JavaScript SDK in Salesforce Lightning Web Components

This guide explains how to configure your Salesforce environment to use the LaunchDarkly JavaScript or React Web client-side SDKs in Lightning Web Components (LWCs).

Salesforce Lightning Web Components are an implementation of standard web components that allow you to leverage HTML, CSS, and JavaScript in a lightweight framework. To learn more, read Introducing Lightning Web Components.

The example code in this guide is extracted snippets. We show it here as if it is being used in a JavaScript class.

Prerequisites

To complete this guide, you must have the following prerequisites:

• Basic working knowledge of the LaunchDarkly JavaScript client-side SDK or React Web client-side SDK
• Basic working knowledge of Salesforce Lightning Web Components

Download the LaunchDarkly JavaScript Client

To begin, find the latest version under Releases in the JavaScript SDK GitHub repository. Then download the desired version from https://unpkg.com/launchdarkly-js-client-sdk@<VERSION>/dist/ldclient.min.js.

Set up your Salesforce environment

Next, set up your Salesforce environment. To do this:

1. Upload the file to your Salesforce organization as a static resource in your org
2. Enable Lightning Web Security in your org
3. Add https://*.launchdarkly.com as a CSP Trusted Site, under Manage CSP Trusted Sites

Using the LaunchDarkly client in a Lightning Web Component

In the JavaScript file of your Lightning Web Component, import the static resource:

1
import ldclient from '@salesforce/resourceUrl/ldclient';

Then, load the imported script for usage in the file, using the Lightning Web Component Platform Resource Loader:

1
Promise.all([
2
	loadScript(this, ldclient)
3
])
4
.then(() => {
5
// Post Script Load Code Here
6
})

Finally, initialize the LaunchDarkly client:

1
const context = {
2
  kind: 'user',
3
  key: 'example-context-key'
4
};
5
this.LDClient = ldclient.initialize('example-client-side-id', context);
6
7
try {
8
  await this.LDClient.waitForInitialization(5)
9
  // initialization succeeded,
10
  // flag values are now available through the client
11
} catch (err) {
12
  // initialization failed or did not complete before timeout
13
}

You can access the flag value using a JavaScript getter method:

1
get exampleFlag() {
2
    return await this.LDClient.variation['example-flag-key', false];
3
}

To learn more, read LWC Data Binding. You can then use HTML to allow feature flags to control your user interface (UI) display.

Here is an example of an LWC HTML snippet:

1
<template if:true={exampleFlag}>
2
     Flag evaluation is TRUE
3
</template>
4
<template if:false={exampleFlag}>
5
     Flag evaluation is FALSE
6
</template>

Conclusion

In this guide, we discussed how to use the LaunchDarkly JavaScript and React Web client-side SDKs in Lightning Web Components. This allows you to leverage HTML, CSS, and JavaScript in a lightweight framework.