Vercel

Vercel is an advanced hosting and deployment platform for modern web applications.

Developers can incorporate serverless code that runs in the Edge Runtime on the Vercel platform using Edge Functions and Middleware. Vercel supports compute logic in Edge Functions and Middleware that is scalable, on-demand, and stateless with the Edge Config low-latency data store. Split provides out-of-the-box integration that wraps the Edge Config data store, allowing near-instant reads at the edge.

Architecture of the integration

The following diagram shows the architecture of the Split integration for Vercel.

The Split Integration for Vercel writes the Split rollout plan (the set of feature flags and segment definitions) to the Edge Config instance of your application, and keeps this data synchronized. The Edge Config wrapper is an adapter that connects the Split SDK with the Edge Config, allowing the Split SDK to rapidly evaluate feature flags. The Split SDK sends tracked events and impressions data to Split Cloud.

Setting up the Split Integration for Vercel is done in two phases:

• Add the Split integration to your Vercel project.
• Set up the Split JavaScript Browser SDK client.

The integration setup process requires Split admin level access. This is available for all Split tiers, and you can create a Split account during the Split integration setup.

Add the Split integration to your Vercel project

The Split integration is added from within Vercel as follows.

1. Add an instance of the Edge Config to your Vercel project. (The integration will add a root-tree to the JSON contents of your Edge Config instance, but will never erase or overwrite any other existing JSON data.) If you forgot to do add the Edge Config instance, you can safely restart adding the Split integration to your Vercel project from this step.

2. Go to https://vercel.com/integrations/split or search for "Split" in the Vercel Marketplace, click Add Integration, and follow the setup process. You will be prompted to log in or create your Split account, and then you will see the Vercel setup page. Specify each Split environment and choose the Edge Config instance that each should sync to. You are given a key for each environment to use in your code to access the correct JSON root-tree for that environment in your Edge Config instance. Click Save to save the setup for all environments. Then click the Finish integration link near the top of the window to close the dialog.

Set up the Split JavaScript Browser SDK client

To set up the Split SDK in the code of your Vercel project, follow the steps below.

1. Install the required packages by running the npm install command.

npm install @splitsoftware/splitio-browserjs @splitsoftware/vercel-integration-utils @vercel/edge-config

2. Instantiate the SDK within your Vercel Edge Function or Middleware. The Split SDK client must run in partial consumer mode and be initialized with the Edge Config wrapper. See our example on GitHub. Note that the core.initializationKey passed to the SplitFactory constructor is your client-side API key for your Split environment. (In the Split Management Console, in your Admin Settings, click on API keys and select the SDK API Keys tab. Find the keys for your Split project and environment, and make sure you choose a client-side API key.)

Following this setup, you can consume Split feature flags from Edge Config and send events to Split Cloud.

Manage the integration after installation

Read more about Managing Integrations After Installation in the Vercel docs.