unleash.unleash/website/docs/sdks/proxy-javascript.md

id	title
proxy-javascript	JavaScript Proxy SDK

In this guide we explain how to use feature toggles in a Single Page App via The Unleash Proxy. You can also checkout the source code for the JavaScript Proxy SDK.

Introduction

For single-page apps we have a tiny proxy-client in JavaScript, without any external dependencies, except from browser APIs. This client will store toggles relevant for the current user in local-storage and synchronize with the Unleash Proxy in the background. This means we can bootstrap the toggles for a specific use the next time the user visits the web-page.

We are looking in to also supporting react-native with this SDK. Reach out if you want to help us validate the implementation.

Step 1: Install

npm install unleash-proxy-client

Step 2: Initialize the SDK

You need to have a Unleash-hosted instance, and the proxy need to be enabled. In addition you will need a proxy-specific clientKey in order to connect to the Unleash-hosted Proxy.

import { UnleashClient } from 'unleash-proxy-client';

const unleash = new UnleashClient({
  url: 'https://eu.unleash-hosted.com/hosted/proxy',
  clientKey: 'your-proxy-key',
  appName: 'my-webapp',
});

// Used to set the context fields, shared with the Unleash Proxy
unleash.updateContext({ userId: '1233' });

// Start the background polling
unleash.start();

Step 3: Check if feature toggle is enabled

unleash.isEnabled('proxy.demo');

...or get toggle variant:

const variant = unleash.getVariant('proxy.demo');
if (variant.name === 'blue') {
  // something with variant blue...
}

Listen for updates via the EventEmitter

The client is also an event emitter. This means that your code can subscribe to updates from the client. This is a neat way to update a single page app when toggle state updates.

unleash.on('update', () => {
  const myToggle = unleash.isEnabled('proxy.demo');
  //do something useful
});

Tracking user interactions with events

The Unleash client emits events every time a feature toggle's state is queried. It exposes two types of events that you can hook into:

1. is-enabled is emitted whenever you use the isEnabled call.
2. get-variant is emitted whenever you use the getVariant call.

These events are exported as members of the EVENTS enum from the proxy client:

1. EVENTS.IS_ENABLED
2. EVENTS.GET_VARIANT

Event shape

An event looks like this ...

Example

import {
  UnleashClient,
  EVENTS,
} from 'unleash-proxy-client';

const unleash = new UnleashClient({
  url: 'unleash-url.com',
  clientKey: '123456thisisakey',
  refreshInterval: 10,
  appName: 'event-tracking-app',
  environment: 'production',
});


unleash.on(EVENTS.GET_VARIANT, (event) => {
    // send the events to your system here
    console.log(event)
});

unleash.start();