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