Skip to content

Feature toggles with Unleash

Environment variables

Define APP_UNLEASH_APP_NAME, APP_UNLEASH_ENV, and APP_UNLEASH_SERVER_TOKEN, otherwise, the feature toggles will not work.

  • APP_UNLEASH_APP_NAME: The name of your application as registered in Unleash (e.g., remix-app).
  • APP_UNLEASH_ENV: The environment where the app is running (e.g., prod, stage, dev).
  • APP_UNLEASH_SERVER_TOKEN: The API token for accessing the Unleash server, which can be generated in the Unleash admin panel (create one for each environment).

Available imports

import { featureToggle } from '@pit-shared/remix-runtime/feature-toggle/setup.server.js'
import type { FeatureToggle } from '@pit-shared/remix-runtime/feature-toggle/setup.server.js'
import { featureToggleMockResponse } from '@pit-shared/remix-runtime/feature-toggle/utils'

Usage

The feature toggle is meant to be used on the server-side only. It's recommended to make that explicit in your application by, e.g., using the function in a server file.

// feature-toggle.server.ts in your application
import { featureToggle } from '@pit-shared/remix-runtime/feature-toggle/setup.server.js'

// this is your remix request object
const request: Request = undefined as any

const exampleToggle = await featureToggle(request, 'example-toggle-name')

Optionally, a third parameter can be added to specify userId, sessionId, or define a refreshInterval for the Unleash client.

userId and sessionId can be used for specific assignments either for an A/B test or to enable a specific group of users to enable/disable a feature.

import { featureToggle } from '@pit-shared/remix-runtime/feature-toggle/setup.server.js'

const options = {
    userId: '12345',
    sessionId: '12345',
    refreshInterval: 10_000,
}

// this is your remix request object
const request: Request = undefined as any

const exampleToggle = await featureToggle(
    request,
    'example-toggle-name',
    options,
)

Mocks

The feature toggles can only be mocked, when the environment variable is set to dev. For that, a cookie called feature-toggles needs to be set with toggles to be enabled, as a comma-separated list.

Example cookie:

feature-toggles=toggle1,toggle2=A

toggle1 is enabled, toggle2 is enabled and variant A is assigned.


To simplify the process of creating a mock response for Unleash in your Remix application with MSW, a utility function has been added taking the mock-server as well an array defining the toggles.

Example with MSW:

import type { server as MockServer } from '../../tests/mocks/server.js'
import { mockFeatureToggle } from '@pit-shared/remix-runtime/feature-toggle/utils'

export function registerDefaultMocks(server: typeof MockServer) {
    mockFeatureToggle(server, [{ name: 'example-toggle-name' }])
}

If the cookie is set to feature-toggles=example-toggle-name, this toggle response would return the toggle as enabled. If a variant should be mocked, the cookie would look like this: feature-toggles=example-toggle-name=A, to receive a variant with name: 'A'.