Using Edge Config with Hypertune

Hypertune is a feature flag, A/B testing and app configuration platform with full type-safety and Git version control.

The Hypertune Edge Config integration enables you to access your feature flags and run A/B tests at ultra low latency at the edge.

Before using this integration, you should have:

1. A Hypertune project. If you don't have one, follow the Hypertune getting started guide

2. The latest version of Vercel CLI. To check your version, use vercel --version. To install or update Vercel CLI, use:

   pnpm

   yarn

   npm

   pnpm i -g vercel@latest

3. A project. If you don't have one, you can run the following terminal commands to create a Next project:

   pnpm

   yarn

   npm

   pnpm i next

   terminal

   npx create-next-app@latest

4. A Vercel project. If you don't have one, see Creating a Project

5. An Edge Config. If you don't have one, follow the Edge Config quickstart

6. The Edge Config SDK:

   pnpm

   yarn

   npm

   pnpm i @vercel/edge-config

The following steps will walk you through:

• Configuring Vercel's Hypertune Edge Config integration
• Using it to check your feature flags from your frontend code

1. Set up the Hypertune integration

   Visit the Hypertune page in the Integration Marketplace and select the Add Integration button. Then:

   1. Select a Vercel team and project
   2. Continue and log into Hypertune
   3. Connect your Hypertune project to an existing or new Edge Config store. Save the Hypertune Token, Connection String and Item Key for later
   4. Go to your Vercel dashboard and select the project you want to use the Hypertune integration with. Go to Settings > Environment Variables and add the following:
      • NEXT_PUBLIC_HYPERTUNE_TOKEN, set to the Hypertune Token
      • EDGE_CONFIG, set to the Connection String
      • EDGE_CONFIG_HYPERTUNE_ITEM_KEY, set to the Item Key

2. Use the Hypertune integration in your code

   First, install the Edge Config package:

   pnpm

   yarn

   npm

   pnpm i @vercel/edge-config

   Then, pull your environment variables:

   vercel env pull

   Now, create a hypertune.ts file that initializes the Hypertune SDK.

   The following example passes an Edge Config client, your Hypertune Token, and your Edge Config Item Key to the Hypertune SDK:

   lib/hypertune.ts

   TypeScript

   TypeScriptJavaScript

   import { initializeHypertune } from '../generated/generated';
   import { createClient } from '@vercel/edge-config';
    
   const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
    
   const hypertune = initializeHypertune(
     {},
     {
       token: process.env.NEXT_PUBLIC_HYPERTUNE_TOKEN,
       vercelEdgeConfigClient: edgeConfigClient,
       vercelEdgeConfigItemKey: process.env.EDGE_CONFIG_HYPERTUNE_ITEM_KEY,
     },
   );
    
   export default hypertune;

   Finally, you can use the hypertune object you exported in the file above to check for feature flags in your Edge Middleware:

   Next.js (/app)

   Next.js (/pages)

   Other frameworks

   middlware.ts

   TypeScript

   TypeScriptJavaScript

   import { NextFetchEvent, NextRequest } from 'next/server';
   import hypertune from './lib/hypertune';
    
   export const config = {
     matcher: '/',
   };
    
   export async function middleware(
     request: NextRequest,
     context: NextFetchEvent,
   ) {
     await hypertune.initFromServerIfNeeded();
     const rootNode = hypertune.root({
       context: {
         user: { id: 'test', name: 'Test', email: 'test@test.com' },
       },
     });
     const exampleFlag = rootNode.exampleFlag().get(/* fallback */ false);
     console.log('Middleware feature flag: ', exampleFlag);
   }