Dev guideAPI Reference
Dev guideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Vercel Edge Functions

Example for running Optimizely Feature Experimentation version feature flags and experiments utilizing Vercel Edge Functions.

Vercel Edge Functions let you deliver content to your site's visitors with speed and personalization. They are deployed globally by default on Vercel's Edge Network and enable you to move server-side logic to the edge, close to your visitor's origin.

You can use Optimizely Feature Experimentation flags at the edge with NextJS applications deployed on Vercel. This example uses the Optimizely Feature Experimentation Javascript (Node) SDK inside a Vercel Edge Function for you to start implementing experimentation and feature flagging for your experiences at the Edge. For a general guide to getting started with Optimizely, see the Javascript SDK Quickstart.

Auto update with Optimizely webhooks and Vercel Edge Functions

This example fetches the latest datafile from the Optimizely CDN during every build. Deploy Hooks from Vercel can be used with webhooks from Optimizely Feature Experimentation to keep the application up to date with the latest changes in the Optimizely project.

Identity management

Optimizely's Feature Experimentation SDKs require passing a user-provided identifier at runtime to drive experiment and feature flag decisions. This example generates a unique ID, stores it in a cookie, and reuses it to make the decisions sticky. Alternatively, you can use an existing unique identifier available within your application and pass it in as the value for the OPTIMIZELY_USER_ID cookie.

Bucketing

See How bucketing works.

Demo application

In the following example, you can create a demo application using Next.js. An example of this demo application is available on Vercel's GitHub.

Prerequisites

You need these prerequisites to use this example:

Create a Deploy Hook in Vercel

  1. Go to the Settings tab in your Vercel deployment.
  2. Look for the Deploy Hooks section and create a Hook.
  3. This will generate a URL that can be used to trigger a rebuild of the deployment.

Create a Webhook in Optimizely Feature Experimentation

  1. Follow the instructions to create a webhook in your Optimizely Feature Experimentation project.
  2. Use the Deploy Hook URL generated from the previous section to create the Optimizely Feature Experimentation webhook.

How it works

When you make a change to the Optimizely Feature Experimentation project using the UI, the Webhook hits Vercel's Deploy Hook URL, which triggers a new build on Vercel. Every new build fetches the latest datafile version and uses it in the application.

Clone and deploy locally

  1. Execute create-next-app with NPM or Yarn to bootstrap the example:

    npx create-next-app@latest
    
    yarn create next-app
    
  2. Generate the Next.js app using this example:

    npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-optimizely feature-flag-optimizely
    
    yarn create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-optimizely feature-flag-optimizely
    
  3. Create a local environment file from example and add your Optimizely Feature Experimentation SDK key:

    cp .env.example .env.local
    
  4. Run Next.js in development mode:

    npm install
    npm run dev
    
    yarn  
    yarn dev
    
  5. Deploy your example app to the cloud following the Vercel Documentation.

Additional resources