Deploy on Vercel

Deploying Dirly on Vercel is the fastest and easiest way to get your application into production. Vercel is optimized for Next.js and automatically handles builds, scaling, and SSL certificates.

This guide will walk you through every step: from creating a private GitHub repository to the final deployment and verification.

- Preparing the GitHub Repository

Dirly is a commercial product, so the source code must be stored in a private repository. If you don’t have a GitHub account yet, sign up here .

1. Create a New Private Repository

Go to GitHub New Repository .
Enter a repository name (e.g., Dirly).
Select Private.
Do not initialize the repository with a README, .gitignore, or license – we’ll add the files manually.
Click Create repository.

2. Upload Your Project Code

You have two options: upload files via the web interface or use Git from the command line.

Option A: Using Git (recommended)

Open a terminal and navigate to your project folder.
Run the following commands, replacing your-username and your-repo with your details:


git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/Dirly.git
git push -u origin main

Option B: Uploading Files via GitHub

On your repository page, click Add file → Upload files.
Drag and drop all your project files and folders (except node_modules and .env).
Write a commit message and click Commit changes.

Make sure the .env file is not included in the repository – it should already be listed in .gitignore. All secrets will be added later via Vercel Environment Variables.

- Deploying to Vercel

Go to vercel.com and sign in using your GitHub account (this simplifies importing).

2. Import Your Project

Click Add New… → Project.
Vercel will list your GitHub repositories. Find the private repository you just created (e.g., Dirly) and click Import.

Vercel may ask for permission to access your private repositories. Grant access.

On the project configuration screen:
- Framework Preset should automatically be detected as Next.js.
- Root Directory leave as ./ (unless your project is in a subfolder).
- Build and Output Settings – no changes needed; Vercel will pick up the scripts from package.json.

3. Add Environment Variables

Environment variables are critical. Add all required values from your .env.local file into Vercel’s interface or import your .env.local.

On the same page, expand the Environment Variables section.
Add each variable (Name → Value). The required variables for Dirly are:


# 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   
 
# 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

Never use development values in production. For Convex, Stripe, and other services, create separate projects/keys for your production environment.

4. Start the Deployment

Click the Deploy button.
Vercel will start building the project. You can watch the live logs.
After a successful build, you’ll see a Congratulations! message and a URL for your application (e.g., Dirly-git-main-username.vercel.app).

- Post-Deployment Configuration

1. Update `NEXT_PUBLIC_APP_URL`

After the first deployment, you have a permanent URL. Go back to your project settings on Vercel (Settings → Environment Variables) and change NEXT_PUBLIC_APP_URL to the actual address (e.g., https://dirly.vercel.app). Then redeploy (you can use Deployments → Redeploy).

2. Configure Stripe Webhooks

For payments to work correctly, Stripe must send events to your application.

Log in to the Stripe Dashboard .
Go to Developers → Webhooks.
Click Add endpoint.
In the Endpoint URL field, enter:


https://dirly.vercel.app/api/stripe/webhook

Select the events you want to listen to (at minimum payment_intent.succeeded ).
After creating the endpoint, copy the Signing secret (starts with whsec_) and add it as the STRIPE_WEBHOOK_SECRET environment variable in Vercel (then redeploy).

More info Stripe Setup

3. Verify Everything Works

Open your application URL.
Register a new user.
Test description generation (trial or with credits).
Verify that payments are processed correctly.

If something goes wrong, check the logs in Vercel (Dashboard → Project → Functions). They display errors from serverless functions.

- Updating the Application

To update the code, simply push changes to your GitHub repository (e.g., git push). Vercel will automatically trigger a new deployment (if you’ve connected the main/production branch).

To change environment variables, edit them in Vercel settings and then redeploy (click Redeploy on the latest deployment).

❗ Troubleshooting

Problem	Solution
Build fails with “Module not found”	Ensure all dependencies are installed (`npm install` run locally and `package-lock.json` committed).
Database connection error	Check `CONVEX_DEPLOYMENT` and `NEXT_PUBLIC_CONVEX_URL`. Ensure your Convex deployment is running and accessible. Verify your Convex dashboard for any issues.
Stripe webhook not working	Verify that `STRIPE_WEBHOOK_SECRET` is set correctly and the endpoint in Stripe points to the right URL (including trailing slashes).
Vercel free plan limits exceeded	If your project requires more resources, consider upgrading to the Pro plan.

For production environments, always use the Vercel Pro plan or higher if you expect high traffic. The free plan has limits on serverless function execution time.

Conclusion

Congratulations! Dirly is now successfully deployed on Vercel. Your users can start using the AI‑powered product description generator. Any future code changes will automatically update the application, and all environment variables are securely stored.

Next steps:

Connect your custom domain (under Domains in your Vercel project settings).
Set up analytics and monitoring.
Explore the Vercel documentation for advanced configuration.

Happy selling! 🚀