JavaScript Client

Getting Started With the JavaScript Client

Use your favorite package manager to install @prefab-cloud/prefab-cloud-js npm | github

npm install @prefab-cloud/prefab-cloud-js or yarn add @prefab-cloud/prefab-cloud-js

TypeScript types are included with the package.

If you're using React, consider using our React Client instead.

Initialize client

Initialize prefab with your api key and an Identity for the current user/visitor:

import prefab, { Identity } from '@prefab-cloud/prefab-cloud-js'

const options = { apiKey: 'YOUR_CLIENT_API_KEY', identity: new Identity('user-1234', { device: 'desktop' }) };
await prefab.init(options);

Identity accepts a lookup key unique to the current visitor/user and attributes that you can use to segment your users.

prefab.init will request the calculated config and feature flags for the provided Identity as a single HTTPS request.

You aren't required to await the init -- it is a promise, so you can use .then, .finally, .catch, etc. instead if you prefer.

tip

While prefab is loading, isEnabled will return false and get will return undefined.

Usage

Now you can use prefab's config and feature flag evaluation, e.g.

if (prefab.isEnabled('cool-feature') {
  // ... this code only evaluates if `cool-feature` is enabled for the current Identity
}

setTimeout(ping, prefab.get('ping-delay'));

prefab Properties

property	example	purpose
isEnabled	prefab.isEnabled("new-logo")	returns a boolean (default false) if a feature is enabled based on the currently identified user
get	prefab.get('retry-count')	returns the value of a flag or config evaluated in the context of the currently identified user
loaded	if (prefab.loaded) { ... }	a boolean indicating whether prefab content has loaded

Testing

In your test suite, you should skip prefab.init altogether and instead use prefab.setConfig to set up your test state.

it('shows the turbo button when the feature is enabled', () => {
  prefab.setConfig({
    turbo: true,
    defaultMediaCount: 3,
  });

  const rendered = new MyComponent().render();

  expect(rendered).toMatch(/Enable Turbo/);
  expect(rendered).toMatch(/Media Count: 3/);
});