Installation

This guide walks you through setting up Dirly on your local machine for development or testing. By the end of these steps, you’ll have a fully functional instance running on http://localhost:3000.

Prerequisites

Before you begin, make sure you have the following installed and configured:

Node.js 20+ Required for Next.js 15 and modern JavaScript features
npm or bun (we’ll use npm in this guide)
Git (to clone the repository)
Convex Account - Sign up at convex.dev
Clerk Account - Sign up at clerk.com
Resend Account (Optional) - For email notifications resend.com
API keys for the services used by Dirly (see Environment Variables)

If you haven’t set up your environment variables yet, complete the Environment Setup guide first. You will need those values during installation.

Step‑by‑Step Installation

1. Clone the Repository

Since Dirly is a commercial product, the source code is stored in a private GitHub repository. You should have received access to it after purchasing a license.


git clone https://github.com/your-organization/dirly.git
cd dirly

Replace the URL with the actual repository URL you were provided.

2. Install Dependencies

Install all required packages using npm (or bun):


npm install

This will read the package.json and install everything needed to run the application.

This will install all dependencies including:

Next.js 15.4.9
React 19.2.1
Convex 1.32.0
Clerk Next.js 6.39.0
Tailwind CSS 4.1.11 And more…

3. Set Up Environment Variables

Dirly uses a .env.local file to store configuration and secrets. You should have prepared this file while following the Environment Setup guide.

If you haven’t done so already, create a .env.local file in the root of the project and fill in all the required variables:


# Site URL
NEXT_PUBLIC_SITE_URL=http://localhost:3000
 
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
CLERK_ISSUER_URL=https://your-clerk-domain.clerk.accounts.dev
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 
# Convex Database
CONVEX_DEPLOYMENT=prod:your-project
NEXT_PUBLIC_CONVEX_URL=https://your-project.convex.cloud
CONVEX_DEPLOY_KEY=your_convex_deploy_key   # only for production
 
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_FEATURED_PRICE=4900
 
 
# Email (Resend)
RESEND_API_KEY=re_...
FROM_EMAIL="Dirly <noreply@dirly.com>"
NEXT_PUBLIC_ADMIN_EMAIL=admin@dirly.com

See the Environment Variables page for detailed configuration.

Never commit .env.local to version control. It is already listed in .gitignore.

4. Initialize Convex

Set up your Convex backend:


npx convex dev

This will:

Create a new Convex project (if needed)
Set up database schemas
Start the Convex development server
Generate your NEXT_PUBLIC_CONVEX_URL

5 Configure Clerk Authentication

Go to clerk.com and create a new application
Copy your publishable key and secret key
Add them to your .env.local file
Configure sign-in and sign-up URLs (already set to /sign-in and /sign-up)

6 Start the Development Server

Now you’re ready to launch the application locally:


npm run dev

After a few seconds, you should see output like:


ready - started server on http://localhost:3000

Open http://localhost:3000 in your browser. You will see the Dirly landing page.

Common Issues

Port Already in Use

If port 3000 is already in use, you can specify a different port:


npm run dev -- -p 3001

Convex Connection Issues

Make sure your NEXT_PUBLIC_CONVEX_URL in .env.local matches the URL provided by convex dev.

Clerk Authentication Errors

Ensure your Clerk keys are correctly copied and that your application domain is configured in the Clerk dashboard.

🆘 Troubleshooting Local Installation

Problem	Solution
npm install fails	Make sure you have Node.js 18+ installed. Delete `node_modules` and `package-lock.json`, then run `npm install` again.
Missing environment variable error	Verify that all required variables are set in `.env.local`. Refer to the Environment Setup guide for a complete list.
Port 3000 already in use	Either stop the process using that port or start the app on a different port: `npm run dev -- -p 3001`

Next Steps

Once your local installation is running smoothly, you can:

Explore the codebase and start customizing.
Set up Stripe for payments (see Stripe Setup).
Deploy the application to production (see Deploy on Vercel).

Happy coding!