Installation

Automated Setup (Recommended)

The fastest way to get started:

npx hydrate-beer-cli init

This interactive CLI will:

1. Detect your project type (Next.js/React)
2. Generate a unique project ID
3. Set up password protection for monitoring
4. Configure PostHog integration
5. Create configuration files
6. Install the SDK automatically

Manual Installation

If you prefer manual setup:

1. Install the SDK

npm install hydrate-beer

yarn add hydrate-beer

pnpm add hydrate-beer

bun add hydrate-beer

2. Create PostHog Account

1. Sign up at posthog.com
2. Create a new project
3. Copy your Project API Key

3. Configure Environment Variables

Create .env.local (Next.js) or .env (Vite/CRA):

NEXT_PUBLIC_HYDRATE_BEER_PROJECT_ID=proj_your_generated_id
NEXT_PUBLIC_HYDRATE_BEER_POSTHOG_API_KEY=phc_your_posthog_key

For Vite/CRA, use VITE_ prefix:

VITE_HYDRATE_BEER_PROJECT_ID=proj_your_generated_id
VITE_HYDRATE_BEER_POSTHOG_API_KEY=phc_your_posthog_key

4. Add Provider

See Quick Start for framework-specific integration.

PostHog Setup

Cloud Hosting

PostHog offers free cloud hosting with generous limits:

• US Cloud: https://us.posthog.com
• EU Cloud: https://eu.posthog.com

Select the instance closest to your users for best performance.

Self-Hosted

If you self-host PostHog:

<HydrateBeerProvider
  config={{
    projectId: '...',
    posthogApiKey: '...',
    posthogHost: 'https://your-posthog-instance.com',
  }}
>

Verify Installation

1. Start your dev server
2. Open browser console
3. Look for: HydrateBeer: Initialized successfully
4. Check PostHog dashboard for incoming events

Requirements

• React 17+ or React 18+
• Next.js 12+ (for Next.js projects)
• Modern browser with fetch API
• PostHog account (free)

TypeScript Support

HydrateBeer is written in TypeScript and includes full type definitions:

import type { HydrateBeerConfig } from 'hydrate-beer-sdk';

const config: HydrateBeerConfig = {
  projectId: 'proj_...',
  posthogApiKey: 'phc_...',
  posthogHost: 'https://us.posthog.com',
  sampleRate: 1.0,
  slowRenderThreshold: 16,
  flushInterval: 5000,
  batchSize: 50,
};

Next Steps