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).

Overview

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 Launch

Darkly JavaScript ClientTo 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 Launch

Darkly client in a Lightning Web ComponentIn the JavaScript file of your Lightning Web Component, import the static resource:

Import LD client

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

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

Load script

    Promise.all([
    	loadScript(this, ldclient)
    ])
    .then(() => {
    // Post Script Load Code Here
    })

Finally, initialize the LaunchDarkly client:

Initializing LaunchDarkly client

    const context = {
      kind: 'user',
      key: 'example-context-key'
    };
    this.LDClient = ldclient.initialize('example-client-side-id', context);

    try {
      await this.LDClient.waitForInitialization(5)
      // initialization succeeded,
      // flag values are now available through the client
    } catch (err) {
      // initialization failed or did not complete before timeout
    }

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

Example flag getter method

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

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:

LWC HTML snippet

    <template if:true={exampleFlag}>
         Flag evaluation is TRUE
    </template>
    <template if:false={exampleFlag}>
         Flag evaluation is FALSE
    </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.