- Notifications
You must be signed in to change notification settings - Fork3
jordanliu/convex-starter
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A highly opinionated Next.js starter with better-auth, convex, shadcn/ui, react-email, and turborepo. Pre-configured for rapid, scalable development.
convex-starter/├── apps/│ └── web/ # Main Next.js application├── packages/│ ├── backend/ # Convex backend│ ├── eslint-config/ # Shared ESLint configurations│ ├── typescript-config/ # Shared TypeScript configurations│ └── ui/ # Shared UI components (shadcn/ui)└── turbo/ # Turborepo configuration- Authentication withBetter Auth
- Backend platform (db, functions, storage, jobs) usingConvex
- UI components built withshadcn/ui andTailwind CSS
- Email support withreact-email andResend
- Form handling viareact-hook-form
- Monorepo setup usingTurborepo
npx create-next-app@latest [project-name] --use-pnpm --example https://github.com/jordanliu/convex-starter
cd [project-name]pnpm installCopy the example environment file into .env.local in apps/web, then update it with your real values.
cp apps/web/.env.example apps/web/.env.local
pnpm --filter @repo/backend run setup
This initializes your Convex project. Next, ensure your backend environment variables are uploaded to the Convex dashboard. From root run:
cp packages/backend/.env.example packages/backend/.env.local
You will then need to upload the environment variables into your Convex dashboard manually or viaconvex env. You can find more detailshere.
pnpm dev
This will start both the Next.js application athttp://localhost:3000 and the Convex development server athttp://127.0.0.1:6790.
pnpm dev# Start development servers for all packagespnpm build# Build all packages for productionpnpm start# Start production server (requires build)
pnpm lint# Run ESLint across all packagespnpm format# Format code with Prettierpnpm check-types# Run TypeScript type checking
pnpm --filter @repo/backend setup# Initialize Convex project (run once)pnpm --filter @repo/backend dev# Start Convex development server onlypnpm --filter @repo/backend deploy# Deploy Convex backend to production
pnpm --filter web dev# Run only the Next.js applicationturbo gen
Follow the prompts to scaffold a new package with proper TypeScript and build configurations.
cd apps/webpnpm dlx shadcn@canary add [component-name]Components are automatically added to the UI package and can be imported across the monorepo.
# Add to specific packagepnpm --filter web add [package-name]pnpm --filter @repo/ui add [package-name]pnpm --filter @repo/backend add [package-name]# Add to workspace root (affects all packages)pnpm add -w [package-name]# Add dev dependenciespnpm --filter web add -D [package-name]
pnpm --filter @repo/backend run deploy
This creates your production Convex deployment and provides you with a production URL.
Update your hosting platform (Vercel, Netlify, etc.) with the production Convex URL:
CONVEX_URL=https://your-production-deployment.convex.cloudNEXT_PUBLIC_CONVEX_URL=https://your-production-deployment.convex.cloud
pnpm build
Then deploy the built application using your preferred hosting platform's deployment method.
About
Monorepo starter template with convex, nextjs, better-auth, shadcn/ui, react-email and turborepo.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.