Setup FeatureBoard in Remix

Install the NodeJS SDK

See the NodeJS SDK docs for more information.

Integrating with Remix

To use FeatureBoard with Remix, you will need to extend the AppLoadContext to expose the FeatureBoard client to your routes.

Remix Documentation

This is a GUIDE on a recommended setup using Remix and FeatureBoard. You may need to adjust this to fit your needs.

Background

Remix has nested routes and a single AppLoadContext is shared across all routes, this means the current user is normally fetched within loaders. This is a problem for FeatureBoard as it needs to know the current user to determine which features are enabled.

To solve this, the pattern we recommend is a function on the AppLoadContext which returns a FeatureBoard client for the current user. null can also be passed in contexts where you do not have a user.

If there is any other context which is required to determine which features are enabled, they can be passed into this function.

Steps - Manual Server

These steps assume you are using remix in Manual Mode

Any steps prefixed with [TypeScript only] can be skipped for JavaScript projects. For more information about FeatureBoard’s TypeScript support, see the TypeScript docs.

[TypeScript only] Create a app-load-context.ts file

This allows you to expand the TypeScript types for the AppLoadContext interface.

import '@remix-run/server-runtime'

declare module '@remix-run/server-runtime' {
    export interface AppLoadContext {
        featuresFor(whom: null | User): FeatureBoardClient
    }
}

[TypeScript only] Create a features.ts file

This can be done manually e.g.

import '@featureboard/js-sdk'

declare module '@featureboard/js-sdk' {
    interface Features {
        'my-boolean-feature-key': boolean
        'my-option-feature-key': string
        'my-number-feature-key': number
        'my-string-feature-key': string
    }
}

Or automatically via the cli tool

By running npx @featureboard/cli login, then npx @featureboard/cli code-gen --template typescript --output ./ to generate a features.ts file in the output path or update an existing one.

Update your server.ts file

import { createServerClient } from '@featureboard/node-sdk'
import { createRequestHandler } from '@remix-run/node'
import { FEATUREBOARD_ENVIRONMENT_APIKEY } from './config.server'

const serverClient = createServerClient({
    environmentApiKey: FEATUREBOARD_ENVIRONMENT_APIKEY,
})

express().all('*', createRemixRequestHandler())

function createRemixRequestHandler(): RequestHandler {
    return createRequestHandler({
        build: require(BUILD_DIR),
        getLoadContext(req) {
            return {
                featuresFor: createFeaturesFor(serverClient),
            }
        },
    })
}

function createFeaturesFor(serverClient: ServerClient): AppLoadContext['featuresFor'] {
    return function featuresFor(whom) {
        if (whom == null) {
            return serverClient.request([])
        }
        return serverClient.request(calculateAudiencesForUser(whom))
    }
}