@newskit-render/feature-flags

A package for adding feature flags to projects generated by newskit-render.

How to use:

yarn add @newskit-render/feature-flags or
npm install --save @newskit-render/feature-flags

There are two ways that feature flags can be utilized.

getFeatureFlags() in getServerSideProps

The most performant way to use feature flags is to call getFeatureFlags() or getFeatureFlagsByKeys() in getServerSideProps and then use them throughout the page. This way the implementation will only be available for the current page and and wouldn't effect the rest of the site. Best practice is to store your sdk key in environment variables, the examples below utilize that method. For local use, you cadd the Optimizely SDK key from your project in your .env.local file like so OPTIMIZELY_SDK_KEY="123". In case you don't have project or access to the Optimizely platform please contact the Experimentation team. An example implementation would be as follows:

pages/index.ts

import { getFeatureFlags } from '@newskit-render/feature-flags';

export async function getServerSideProps(context) {
  const featureFlags = await getAllFeatureFlags(config)

  return {
    props: {
      // other data
      featureFlags
    },
  }
}

The package also provides a function that is going to return only selected flags

import { getFeatureFlagsByKeys } from '@newskit-render/feature-flags';

export async function getServerSideProps(context) {
  const featureFlags = getFeatureFlagsByKeys(['flag_1', 'flag_2'], config)

  return {
    props: {
      // other data
      featureFlags
    },
  }
}

Alternatively, feature flags can be applied on the whole app. To do so, you'll need to instantiate the package in getInitialProps of the main app, then call getFeatureFlags and pass the result to the whole app. By calling the useFeatureFlagsContext hook, the list of featureFlags can be accessed from any point of the site.

Below we explore a solution, where we use it in the header of the app.

pages/_app.tsx

import { getFeatureFlags, FeatureFlagsContextProvider, FeatureFlag, createFeatureFlagsInstance } from '@newskit-render/feature-flags';

function MyApp({ featureFlags }: {featureFlags: FeatureFlag[]}) {
  return (
    <FeatureFlagsContextProvider context={ featureFlags } >
      <App />
    </FeatureFlagsContextProvider>
  )
}
MyApp.getInitialProps = async () => {
    createFeatureFlagsInstance({ optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY } })
  const featureFlags = await getFeatureFlags();
  return { featureFlags }
}

export default MyApp

header/index.tsx

import { useFeatureFlagsContext } from '@newskit-render/feature-flags';

const Header: React.FC<{ user: UserData }> = ({ user }) => {
  const featureFlags = useFeatureFlagsContext();

  return (
    <>
      <StyledHeader>
        <MainGrid>
          <Cell xs={12}>
              // ...nav buttons
              {featureFlags && featureFlags['test_flag'] && <p>FEATURE FLAGG</p>}
              // ...nav buttons
              </Stack>
            </Stack>
          </Cell>
        </MainGrid>
      </StyledHeader>
    </>
  )
}

export default Header

config argument

The config object is optional. It can be added as an argument to both getFeatureFlags() and getFeatureFlagsByKeys() functions. By default the package is going to get the OPTIMIZELY_SDK_KEY directly from the environment variables but the key can be overwritten with a key added in the config.

The configurations that can be passed to Optimizely in the config object is:

  sdkConfig?: {
    datafileOptions?: DatafileOptions;
    eventBatchSize?: number;
    eventFlushInterval?: number;
    eventMaxQueueSize?: number;
    sdkKey?: string;
    odpOptions?: OdpOptions;
    persistentCacheProvider?: PersistentCacheProvider;
  }
  logLevel?: 'critical' | 'error' | 'warning' | 'debug' | 'info'
  userData?: {
    userId?: string
    attributes?: {
      [name: string]: UserAttributeValue
    }
  }
  defaultFeatureFlags?: Flags
  includeFlagVariables?: boolean
  decideOptions?: OptimizelyDecideOption[]

userId serves as optimizely user identity. attributes is a map of custom key-value pairs specifying attributes for the user that are used for audience targeting. Detailed information can be found in the Optimizely docs defaultFeatureFlags are used in the event that optimizely doesn't load up and initial values are required. logLevel serves to configure the optimizely logger if you wish to use it. It accepts critical, error, warning, debug or info decideOptions is an array of OptimizelyDecideOption enums. Detailed information can be found in the Optimizely docs includeFlagVariables with default of false can be used when you need additional flag information like variationKey, enabled and variables.