Using Edge Config with Hypertune

Learn how to use Edge Config with Vercel's Hypertune integration.
Table of Contents

The Hypertune Edge Config integration is available in Beta on all plans

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
    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
    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);
    }

;

Last updated on May 25, 2024