Installation — DirectoryKit Docs

1. Clone the repository

git clone https://github.com/your-org/directorykit-app.git my-directory
cd my-directory

2. Install dependencies

pnpm install

DirectoryKit uses pnpm as its package manager. If you don't have it installed:

npm install -g pnpm

3. Set up environment variables

Copy the example environment file and fill in your credentials:

cp .env.example .env.local

At minimum, you need these variables:

.env.local

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
 
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
 
# S3 Storage
S3_ENDPOINT=https://your-s3-endpoint
S3_REGION=us-east-1
S3_BUCKET_NAME=your-bucket
S3_ACCESS_KEY_ID=your-access-key
S3_SECRET_ACCESS_KEY=your-secret-key
 
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
 
# Resend
RESEND_API_KEY=re_...
 
# Cron
CRON_SECRET=your-random-secret

See Environment Variables for the full list.

4. Set up the database

Run the schema SQL in your Supabase project:

Option A: Use the Supabase SQL Editor

Open your Supabase project dashboard
Go to SQL Editor
Paste the contents of supabase/schema.sql
Click "Run"

Option B: Use the migration script

pnpm db:migrate

5. Configure your brand

Edit config/site.config.ts with your brand details:

config/site.config.ts

export const siteConfig = {
  name: "My Directory",
  tagline: "Discover the best tools",
  url: "https://mydirectory.com",
  contact: {
    email: "hello@mydirectory.com",
  },
  // ...
}

6. Start the dev server

pnpm dev

Open http://localhost:3000 in your browser.

Webpack mode

DirectoryKit uses webpack (not Turbopack) due to custom configuration in next.config.ts. The dev and build scripts include the --webpack flag automatically.

Available scripts

Command	Description
`pnpm dev`	Start dev server (webpack, 4GB heap)
`pnpm build`	Production build
`pnpm start`	Start production server
`pnpm lint`	Run ESLint
`pnpm db:test`	Test Supabase connection
`pnpm db:migrate`	Run database migrations
`pnpm migrate:csv`	Import data from CSV
`pnpm supabase:types`	Regenerate TypeScript types from schema

Next steps

Explore the Project Structure to understand how the codebase is organized.