Installation
Get DirectoryKit running on your computer in 10 minutes.
By the end of this page, you'll have the site running at http://localhost:3000. No external accounts are required yet — we'll add Supabase, Stripe, and Resend next, in Quick Start.
This page assumes you've already received the repo (forked it, cloned it, or downloaded the ZIP). If not, start with Getting Access.
Throughout these docs, purple AI Prompt blocks contain ready-to-paste instructions for Claude Code / Cursor / Codex. Click Copy, paste into your AI, fill the {placeholders}. Much faster than editing configs by hand.
1. Clone the repository
Open your terminal, move to the folder where you keep projects, and run:
git clone https://github.com/your-org/directorykit-app.git my-directory
cd my-directoryReplace my-directory with whatever folder name you want.
2. Install dependencies
pnpm installThis downloads all libraries the project needs (Next.js, React, Supabase client, etc.). Takes 30–60 seconds on a fresh install.
You haven't installed pnpm yet. Run npm install -g pnpm first, then try again.
3. Create your env file
Every app reads secret values (API keys, database URLs) from a file called .env.local. The project ships with a template you copy:
cp .env.example .env.localNow open .env.local in your code editor. You'll see a lot of variables. For the first run, you don't need to fill them in — the site will boot with placeholders, just some features (database, payments, email) won't work yet.
The full list of variables is documented on the Environment Variables page. We'll fill them in during Quick Start.
4. Start the dev server
pnpm devWait for the line that says Ready in … at http://localhost:3000, then open that URL in your browser.
DirectoryKit uses webpack (not Turbopack) because the project has custom webpack config in next.config.ts. The flag is already baked into package.json — you don't need to remember it.
5. See it live
You should see the homepage on http://localhost:3000. It'll look like a generic directory — that's the starting point. You'll rebrand it next.
That's expected. Those features need Supabase. Continue to Quick Start to wire up the database.
Useful commands
Keep these handy — you'll use them often:
| Command | What it does |
|---|---|
pnpm dev | Start dev server (auto-reloads on file changes) |
pnpm build | Build for production |
pnpm start | Run the production build locally |
pnpm lint | Check code style |
pnpm db:test | Test connection to Supabase |
pnpm db:migrate | Apply the database schema to Supabase |
pnpm webhook:simulate | Simulate a Stripe webhook locally |
Troubleshooting
pnpm: command not found
You haven't installed pnpm. Run npm install -g pnpm.
Module not found: Can't resolve '...'
Delete node_modules and pnpm-lock.yaml, then pnpm install again.
Port 3000 already in use
Either close whatever's using it, or start on a different port:
pnpm dev -- --port 3001Build fails with out-of-memory
The pnpm dev and pnpm build scripts already allocate 4 GB of heap. If you still hit this on a machine with less RAM, try closing other apps or reducing the heap size in package.json.
For more errors, see the Troubleshooting page.
What's next
Take a tour of the codebase in Project Structure, or jump straight to Quick Start to configure Supabase and go live.