Vercel

For platforms hosted on Vercel a great way to store your datafile close to your Middleware is to use Edge config. This integration will handle that for you. It syncs your datafile to your edge config and keep it up-to-date.

Important: Vercel edge config is a paid service on Vercel. Keep an eye on your usage to make sure you don't get an unexpected bill.

Setting up

1. Create a Vercel token using your account; Creating a Vercel token and keep it ready. We recommend storing this value in a password manager since you can only access it one time.

2. Log in to your Improve account check the organisation that you're logged in to is the one you want to sync, go to the organisation dashboard and scroll down to the integrations section. From here click on Vercel.

3. Paste your Vercel token in the input and press save. This gives Improve the option to store the datafile of the active organisation in Vercel edge config.

4. Back on Vercel you should now see and Edge Config Store with the name: obelism_improve_{organisation}. This can now be connected to your project on Vercel for easy access using: @vercel/edge-config

Usage

Consuming the data in your edge handlers can be done using the Vercel edge config SDK or an API request. Using the SDK would look like this;

import { get as getFromEdgeConfig } from '@vercel/edge-config'
 
export const middleware = async (request: NextRequest) => {
	const improveDatafile = await getFromEdgeConfig(
		process.env.NEXT_PUBLIC_IMPROVE_ENV || '',
	)
 
 // Pass the datafile to the Improve SDK or handle it yourself
}

Structure

The data synchronised to the edge config has the structure below. For more info on the content of each env check the datafile docs;

{
    "production": {...},
    "staging": {...},
    "develop": {...}
}

The integration only syncs the active tests, flags and audiences. If you want to test out draft tests on a given environment you can load them directly from the API. A setup in NextJS middelware could look like this:

import { IMPROVE_CONFIG } from './app/improveConfig'
 
const improveSdk = new ImproveServerSDK({
	...IMPROVE_CONFIG,
	token: 'xxx-xxx-xxx-xxx',
})
 
const improveMiddlewareHandler = generateImproveNextMiddleware({
	improveSdk,
	serverABtests: [...],
})
 
const getImproveConfig = async () => {
	if (!!improveSdk.config) return
 
 // Only the active state is saved in edge config
	if (IMPROVE_CONFIG.state !== 'active') {
		return await improveSdk.fetchConfig()
	}
 
	const config = await getFromEdgeConfig(IMPROVE_CONFIG.environment)
	improveSdk.loadConfig(config as ImproveConfiguration)
}
 
export const middleware = async (request: NextRequest) => {
	await getImproveConfig()
	return improveMiddlewareHandler(request)
}

For a NextJS example in context check out the example in the public Github.