A minimal starter template for 🏝️ TanStack Start.
- TanStack Start + Router + Query
- Tailwind CSS + shadcn/ui
- Drizzle ORM + PostgreSQL
- Better Auth with OAuth2 for GitHub, Google, and Discord.
-
Use this template or clone this repository.
-
Install dependencies:
pnpm install # npm install -
Create a
.envfile based on.env.example. -
Push the schema to your database with drizzle-kit:
pnpm db push # npm run db push -
Run the development server:
pnpm dev # npm run devThe development server should be now running at http://localhost:3000.
These scripts in package.json use pnpm by default, but you can update them to use other package managers if you prefer.
auth:generate- Regenerate the auth db schema if you've made changes to your Better Auth config.db- Run drizzle-kit commands. (e.g.pnpm db generateto generate a migration)ui- The shadcn/ui CLI. (e.g.pnpm ui add buttonto add the button component)formatandlint- Run Prettier and ESLint.
auth-guard.ts- Sample middleware for forcing authentication on server functions. (see #5)ThemeToggle.tsx- A simple component to toggle between light and dark mode. (#7)
-
Configure
app.config.tsfor your preferred deployment target. Read the hosting docs for more information. -
Build the application:
pnpm build # npm run build -
If building for Node, you start the application via:
pnpm start # npm start
- shadcn-ui/ui#6585 - We're using the
canaryversion of shadcn/ui for Tailwind CSS v4 support. - lucide-icons/lucide#2743, lucide-icons/lucide#2775 -
lucide-reactis currently locked to 0.470.0 due to crashing deployments.
- nekochan0122/tanstack-boilerplate - A batteries-included TanStack Start boilerplate that inspired some patterns in this template. If you're looking for a more feature-rich starter, check it out!
- AlexGaudon/tanstarter-better-auth for his own better-auth implementation.
