CROP
ProjectsCROP Frontend

Environment Configuration

Quick Start for New Developers

Environment Configuration

Quick Start for New Developers

  1. Copy example file:
cp .env.example .env.local
  1. Get secrets from team lead (Clerk keys, Stripe keys, MongoDB URI)

  2. Start development:

bun dev

File Structure

FilePurposeGit
.env.exampleTemplate with placeholders✅ Committed
.env.localLocal development secrets❌ Ignored

Note: Vercel manages production/preview environments through their dashboard. Do not commit .env.production or .env.preview files.

Required Variables

Authentication (Clerk)

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

Get from: https://dashboard.clerk.com

Payments (Stripe)

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx

Get from: https://dashboard.stripe.com/test/apikeys

API Gateway

NEXT_PUBLIC_API_GATEWAY_URL=https://api.crop-dev.app
NEXT_PUBLIC_SEARCH_API_URL=https://api.crop-dev.app

MongoDB (Tires)

MONGODB_URI=mongodb+srv://user:password@cluster.mongodb.net/crop_dev

Environment URLs

EnvironmentFrontendAPI Gateway
Developmentlocalhost:3000https://api.crop-dev.app
Preview*.vercel.apphttps://api.crop-dev.app
Productionclintontractor.nethttps://api.crop.app

Troubleshooting

Build fails with missing env:

  • Ensure all NEXT_PUBLIC_* variables are set
  • Vercel: check Environment Variables in project settings

Auth not working:

  • Verify Clerk keys match the correct environment (test vs live)
  • Check NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is set (client-side)

API calls fail:

  • Check NEXT_PUBLIC_API_GATEWAY_URL is correct
  • Verify CORS is configured on backend

On this page