Vercel Functions

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

Vercel Functions lets 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 withNextJS applications deployed onVercel. This example uses the Optimizely Feature ExperimentationJavascript (Node) SDK insideVercel Functions for you to start experimenting with your experiences at the Edge. For a general guide to getting started with Optimizely Feature Experimentation, see theJavascript (Node) SDK Quickstart.

Auto update with Optimizely webhooks and Vercel Functions

This example fetches the latestdatafile from the Optimizely CDN during every build.Deploy Hooks from Vercel can be used withwebhooks 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 requirepassing 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 thedecisions sticky. Alternatively, you can use an existing unique identifier available within your application and pass it in as the value for theOPTIMIZELY_USER_ID cookie.

Bucketing

SeeHow 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 onVercel's GitHub.

Prerequisites

To run this example, you need:

An Optimizely Feature Experimentation account. If you do not have an account, you cansign up on Optimizely.com.
HaveNPM orYarn installed locally.
Before running locally, follow thequickstart for the JavaScript SDK to create the following:
- At least oneflag.
- YourOptimizely Feature Experimentation SDK key.

Create a Deploy Hook in Vercel

Go to theSettings tab in your Vercel deployment.
Look for theDeploy Hooks section and create aHook.
This will generate a URL that can be used to trigger a rebuild of the deployment.

Create a Webhook in Optimizely Feature Experimentation

Follow the instructions and configure awebhook in your Optimizely Feature Experimentation project.
Use theDeploy Hook URL generated from the previous section to create the Optimizely Feature Experimentation webhook.

How it works

When you make a change to the Feature Experimentation project using theUI, the webhook hits Vercel'sDeploy Hook URL, which triggers a new build on Vercel. Every new build fetches the latestdatafile and uses it in the application.

Clone and deploy locally

Executecreate-next-app withNPM orYarn to bootstrap the example:
```
npx create-next-app@latest
```
```
yarn create next-app
```

Generate the Next.js app using this example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-optimizely

yarn create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-optimizely feature-flag-optimizely

Create a local environment file from the example and add your Feature Experimentation SDK key:
```
cp .env.example .env.local
```
Run Next.js in development mode:
```
npm installnpm run dev
```
```
yarn  yarn dev
```
Deploy your example app to the cloud using the Next.js documentation onDeploying.

Additional resources

Vercel example on GitHub
Vercel Functions documentation

Updated 17 days ago

Movatterモバイル変換

Start typing to search…