Example with custom storage

.github/workflows/main.yml

@@ -40,5 +40,4 @@ jobs:
         run: pnpm build
         env:
           CI: true
-          NEXT_PUBLIC_FLAGS_ENDPOINT: https://happykit.dev/api/flags
           NEXT_PUBLIC_FLAGS_ENV_KEY: flags_pub_development_289861443285680649

example/.env.development

@@ -1,2 +1 @@
 NEXT_PUBLIC_FLAGS_ENV_KEY="flags_pub_289861443285680649"
-NEXT_PUBLIC_FLAGS_ENDPOINT="https://happykit.dev/api/flags"

example/components/Layout.tsx

@@ -31,10 +31,7 @@ export function Layout(props: {
         .getEntriesByType("resource")
         .filter((entry) => {
           return entry.name.endsWith(
-            [
-              process.env.NEXT_PUBLIC_FLAGS_ENDPOINT!,
-              process.env.NEXT_PUBLIC_FLAGS_ENV_KEY!,
-            ].join("/")
+            ["/api/flags", process.env.NEXT_PUBLIC_FLAGS_ENV_KEY!].join("/")
           );
         });
 

example/flags/config.ts

@@ -9,8 +9,5 @@ export type AppFlags = {
 
 export const config: Configuration<AppFlags> = {
   envKey: process.env.NEXT_PUBLIC_FLAGS_ENV_KEY!,
-
-  // You can just delete this line in your own application.
-  // It's only here because we use it while working on @happykit/flags itself.
-  endpoint: process.env.NEXT_PUBLIC_FLAGS_ENDPOINT,
+  endpoint: "/api/flags",
 };

example/flags/edge.ts

@@ -1,4 +1,7 @@
 import { createGetEdgeFlags } from "@happykit/flags/edge";
 import { type AppFlags, config } from "./config";
+import { getDefinitions } from "flags/storage";
 
-export const getEdgeFlags = createGetEdgeFlags<AppFlags>(config);
+export const getEdgeFlags = createGetEdgeFlags<AppFlags>(config, {
+  getDefinitions,
+});

example/flags/server.ts

@@ -3,7 +3,10 @@ import {
   type GenericEvaluationResponseBody,
 } from "@happykit/flags/server";
 import { type AppFlags, config } from "./config";
+import { getDefinitions } from "./storage";
 
 export type EvaluationResponseBody = GenericEvaluationResponseBody<AppFlags>;
-
-export const getFlags = createGetFlags<AppFlags>(config);
+export const getFlags = createGetFlags<AppFlags>(config, {
+  getDefinitions,
+  serverTiming: true,
+});

example/flags/storage.ts

@@ -0,0 +1,11 @@
+import type { GetDefinitions, Definitions } from "@happykit/flags/api-route";
+import { get } from "@vercel/edge-config";
+
+export const getDefinitions: GetDefinitions = async (
+  projectId,
+  envKey,
+  environment
+) => {
+  const definitions = await get<Definitions>(`happykit_v1_${projectId}`);
+  return definitions ?? null;
+};

example/pages/api/flags/[envKey].ts

@@ -0,0 +1,10 @@
+import { createApiRoute } from "@happykit/flags/api-route";
+import { getDefinitions } from "flags/storage";
+
+export const config = { runtime: "experimental-edge" };
+
+// This route can be used by the browser/client to evaluate feature flags
+//
+// Defining it on the application itself means even client-side evaluations
+// will happen on the same domain, saving you DNS lookups.
+export default createApiRoute({ getDefinitions, serverTiming: true });

example/pages/docs/public-api.tsx

@@ -20,7 +20,7 @@ function curl(literals: TemplateStringsArray, ...placeholders: any[]) {
 
 export default function Page() {
   const endpoint = [
-    process.env.NEXT_PUBLIC_FLAGS_ENDPOINT,
+    "https://happykit.dev/api/flags",
     process.env.NEXT_PUBLIC_FLAGS_ENV_KEY,
   ].join("/");