GrowthBook Flags SDK example (#1134)

Author: bryce-fitzsimons

.gitignore

@@ -6,6 +6,7 @@
 # Misc
 .DS_Store
 *.pem
+.idea
 
 # Debug
 /npm-debug.log*

flags-sdk/growthbook/.env.example

@@ -0,0 +1,3 @@
+# node -e 'console.log(`${crypto.randomBytes(32).toString("base64url")}`)'
+FLAGS_SECRET=""
+GROWTHBOOK_CLIENT_KEY=""

flags-sdk/growthbook/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "import/order": "off",
+    "camelcase": "off",
+    "no-console": "off"
+  }
+}

flags-sdk/growthbook/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+.idea
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

flags-sdk/growthbook/README.md

@@ -0,0 +1,53 @@
+# Growthbook Flags SDK Example
+
+This example uses GrowthBook for feature flags with the [Flags SDK](https://flags-sdk.dev) along with the `@flags-sdk/growthbook` [GrowthBook adapter](https://flags-sdk.dev/providers/growthbook) and the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar).
+
+## Demo
+
+[https://flags-sdk-growthbook.vercel.app/](https://flags-sdk-growthbook.vercel.app/)
+
+## How it works
+
+This demo controls the visibility of two banners on the home page, and the color of the checkout button.
+
+Once you visit the page, you can see a variation of both/one/none of the banners.
+
+To test different variations, you can use the Dev Tools at the bottom to reset the stable id and reload the page.
+
+When you create and link a project on Vercel, you may use the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar) to see what variants are active, and test different variations by creating overrides.
+
+## Deploy this template
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fflags-sdk%2Fgrowthbook&env=GROWTHBOOK_CLIENT_KEY&env=FLAGS_SECRET&envDescription=The+FLAGS_SECRET+will+be+used+by+the+Flags+Explorer+to+securely+overwrite+feature+flags.+Must+be+32+random+bytes%2C+base64-encoded.+Use+the+generated+value+or+set+your+own.&envLink=https%3A%2F%2Fvercel.com%2Fdocs%2Fworkflow-collaboration%2Ffeature-flags%2Fsupporting-feature-flags%23flags_secret-environment-variable&project-name=growthbook-flags-sdk-example&repository-name=growthbook-flags-sdk-example)
+
+### Step 1: Link the project
+
+In order to use the Flags Explorer, you need to link the project on your local machine.
+
+```bash
+vercel link
+```
+
+If your project does not exist yet, you will be prompted to create it.
+
+### Step 2: Pull all environment variables
+
+This allows the Flags SDK and the Flags Explorer to work correctly, by getting additional metadata.
+
+```bash
+vercel env pull
+```
+
+If you are building this on the CLI, you can set the environment variables with `vercel env add`
+
+### Step 3: Create Feature Gates and Experiments
+
+On GrowthBook, create a project with the following flags split by `id`:
+
+- `free_delivery` (50% rollout or experiment)
+- `summer_sale` (50% rollout or experiment)
+- `proceed_to_checkout` (Multiple variants serving `red`, `green` or `blue`)
+
+The id of the flags in GrowthBook should match the key of the flags in the `flags.ts` file.
+
+If you have not started your experiments yet, you must do so in order to see the traffic split.

flags-sdk/growthbook/app/.well-known/vercel/flags/route.ts

@@ -0,0 +1,17 @@
+import { getProviderData as getGrowthbookProviderData } from '@flags-sdk/growthbook'
+import { type ProviderData, mergeProviderData } from 'flags'
+import { createFlagsDiscoveryEndpoint, getProviderData } from 'flags/next'
+import * as flags from '../../../../flags'
+
+export const GET = createFlagsDiscoveryEndpoint(async () => {
+  // Fetches additional metadata from the GrowthBook API for the Flags Explorer
+  let growthbookData: ProviderData = { definitions: {}, hints: [] }
+  if (process.env.GROWTHBOOK_API_KEY) {
+    growthbookData = await getGrowthbookProviderData({
+      apiKey: process.env.GROWTHBOOK_API_KEY,
+      clientKey: process.env.GROWTHBOOK_CLIENT_KEY,
+    })
+  }
+
+  return mergeProviderData([getProviderData(flags), growthbookData])
+})

flags-sdk/growthbook/app/[code]/add-to-cart.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { addToCart } from '@/lib/actions'
+import { useProductDetailPageContext } from '@/components/utils/product-detail-page-context'
+import { AddToCartButton } from '@/components/product-detail-page/add-to-cart-button'
+
+export function AddToCart() {
+  const router = useRouter()
+  const { color, size } = useProductDetailPageContext()
+  const [isLoading, setIsLoading] = useState(false)
+
+  return (
+    <AddToCartButton
+      isLoading={isLoading}
+      onClick={async () => {
+        setIsLoading(true)
+        await addToCart({ id: 'shirt', color, size, quantity: 1 })
+        router.push('/cart')
+      }}
+    />
+  )
+}

flags-sdk/growthbook/app/[code]/cart/order-summary.tsx

@@ -0,0 +1,32 @@
+import { proceedToCheckoutColorFlag } from '@/flags'
+import { OrderSummarySection } from '@/components/shopping-cart/order-summary-section'
+import { ProceedToCheckout } from './proceed-to-checkout'
+import { FlagValues } from 'flags/react'
+
+export async function OrderSummary({
+  showSummerBanner,
+  freeDelivery,
+}: {
+  showSummerBanner: boolean
+  freeDelivery: boolean
+}) {
+  // This is a fast feature flag so we don't suspend on it
+  const proceedToCheckoutColor = await proceedToCheckoutColorFlag()
+
+  return (
+    <OrderSummarySection
+      showSummerBanner={showSummerBanner}
+      freeDelivery={freeDelivery}
+      proceedToCheckout={
+        <>
+          <ProceedToCheckout color={proceedToCheckoutColor} />
+          <FlagValues
+            values={{
+              [proceedToCheckoutColorFlag.key]: proceedToCheckoutColor,
+            }}
+          />
+        </>
+      }
+    />
+  )
+}

flags-sdk/growthbook/app/[code]/cart/page.tsx

@@ -0,0 +1,33 @@
+import { OrderSummary } from '@/app/[code]/cart/order-summary'
+import { Main } from '@/components/main'
+import { ShoppingCart } from '@/components/shopping-cart/shopping-cart'
+import {
+  productFlags,
+  showFreeDeliveryBannerFlag,
+  showSummerBannerFlag,
+} from '@/flags'
+
+export default async function CartPage({
+  params,
+}: {
+  params: Promise<{ code: string }>
+}) {
+  const { code } = await params
+  const showSummerBanner = await showSummerBannerFlag(code, productFlags)
+  const freeDeliveryBanner = await showFreeDeliveryBannerFlag(
+    code,
+    productFlags
+  )
+
+  return (
+    <Main>
+      <div className="lg:grid lg:grid-cols-12 lg:items-start lg:gap-x-12 xl:gap-x-16">
+        <ShoppingCart />
+        <OrderSummary
+          showSummerBanner={showSummerBanner}
+          freeDelivery={freeDeliveryBanner}
+        />
+      </div>
+    </Main>
+  )
+}

flags-sdk/growthbook/app/[code]/cart/proceed-to-checkout.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { ProceedToCheckoutButton } from '@/components/shopping-cart/proceed-to-checkout-button'
+import { toast } from 'sonner'
+
+export function ProceedToCheckout({ color }: { color: string }) {
+  return (
+    <>
+      <ProceedToCheckoutButton
+        color={color}
+        onClick={() => {
+          // Auto capture will track the event
+          toast('End reached', {
+            className: 'my-classname',
+            description:
+              'The checkout flow is not implemented in this template.',
+            duration: 5000,
+          })
+        }}
+      />
+    </>
+  )
+}