diff --git a/flags-sdk/posthog/.env.example b/flags-sdk/posthog/.env.example index 204a052d8c..12693d9c95 100644 --- a/flags-sdk/posthog/.env.example +++ b/flags-sdk/posthog/.env.example @@ -2,6 +2,13 @@ # node -e 'console.log(`${crypto.randomBytes(32).toString("base64url")}`)' FLAGS_SECRET="" +# Option 1: Vercel Marketplace Integration (Recommended) +# These are automatically set when you install PostHog from the Vercel Marketplace +# POSTHOG_PROJECT_API_KEY is set automatically +# POSTHOG_HOST is set automatically + +# Option 2: Manual Configuration +# If not using the Vercel Marketplace integration, set these manually: NEXT_PUBLIC_POSTHOG_KEY="" NEXT_PUBLIC_POSTHOG_HOST="https://us.i.posthog.com" diff --git a/flags-sdk/posthog/README.md b/flags-sdk/posthog/README.md index 4da064d8c1..eb1f6c7855 100644 --- a/flags-sdk/posthog/README.md +++ b/flags-sdk/posthog/README.md @@ -15,7 +15,14 @@ If you deploy your own and configure the feature flags in PostHog, you can also ## 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/posthog&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=posthog-flags-sdk-example&repository-name=posthog-flags-sdk-example) +[![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%2Fposthog&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=posthog-flags-sdk-example&repository-name=posthog-flags-sdk-example&products=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22posthog%22%2C%22productSlug%22%3A%22posthog%22%2C%22protocol%22%3A%22experimentation%22%7D%5D) + +Clicking the button above will: + +1. Clone this repository to your GitHub account +2. Create a new Vercel project +3. Install the PostHog integration from the Vercel Marketplace (automatically configures `POSTHOG_PROJECT_API_KEY` and `POSTHOG_HOST`) +4. Prompt you to generate a `FLAGS_SECRET` for the Flags Explorer ### Step 1: Link the project @@ -37,7 +44,7 @@ vercel env pull ### Step 3: Create Feature Flags -Head over to [PostHog](posthog.com) and create the feature flags required by this template. +Head over to [PostHog](https://posthog.com) and create the feature flags required by this template. Feature Flags: @@ -47,3 +54,16 @@ Feature Flags: You can also find the feature flag keys in the `flags.ts` file. Set both feature flags to rollout to 50% of users. + +## Manual Setup (without Marketplace integration) + +If you prefer not to use the Vercel Marketplace integration, you can manually configure the environment variables: + +1. Set `NEXT_PUBLIC_POSTHOG_KEY` to your PostHog project API key +2. Set `NEXT_PUBLIC_POSTHOG_HOST` to your PostHog host (e.g., `https://us.i.posthog.com`) +3. Set `FLAGS_SECRET` to a base64-encoded 32-byte random value + +For the Flags Explorer feature, also set: + +- `POSTHOG_PERSONAL_API_KEY` - Your PostHog personal API key +- `POSTHOG_PROJECT_ID` - Your PostHog project ID diff --git a/flags-sdk/posthog/flags.ts b/flags-sdk/posthog/flags.ts index 5309543cdd..c636041a26 100644 --- a/flags-sdk/posthog/flags.ts +++ b/flags-sdk/posthog/flags.ts @@ -1,6 +1,7 @@ -import { postHogAdapter, type PostHogEntities } from '@flags-sdk/posthog' +import { type PostHogEntities } from '@flags-sdk/posthog' import { flag } from 'flags/next' import { identify } from './lib/identify' +import { postHogAdapter } from './lib/posthog-adapter' import type { Adapter } from 'flags' export const showSummerBannerFlag = flag({ diff --git a/flags-sdk/posthog/lib/posthog-adapter.ts b/flags-sdk/posthog/lib/posthog-adapter.ts new file mode 100644 index 0000000000..6b867fdaca --- /dev/null +++ b/flags-sdk/posthog/lib/posthog-adapter.ts @@ -0,0 +1,24 @@ +import { createPostHogAdapter } from '@flags-sdk/posthog' + +// Support both Vercel Marketplace integration env vars and manual setup env vars +// Marketplace provides: POSTHOG_PROJECT_API_KEY, POSTHOG_HOST +// Manual setup uses: NEXT_PUBLIC_POSTHOG_KEY, NEXT_PUBLIC_POSTHOG_HOST +const postHogKey = + process.env.NEXT_PUBLIC_POSTHOG_KEY || process.env.POSTHOG_PROJECT_API_KEY +const postHogHost = + process.env.NEXT_PUBLIC_POSTHOG_HOST || + process.env.POSTHOG_HOST || + 'https://us.i.posthog.com' + +if (!postHogKey) { + throw new Error( + 'Missing PostHog API key. Set NEXT_PUBLIC_POSTHOG_KEY or install the PostHog Vercel Marketplace integration.' + ) +} + +export const postHogAdapter = createPostHogAdapter({ + postHogKey, + postHogOptions: { + host: postHogHost, + }, +})