React TanStarter

A minimal starter template for 🏝️ TanStack Start. → Preview here

• React 19 + React Compiler
• TanStack Start + Router + Query
• Tailwind CSS v4 + shadcn/ui
• Drizzle ORM + PostgreSQL
• Better Auth

Getting Started

1. Use this template or clone this repository with gitpick:

   npx gitpick dotnize/react-tanstarter myapp
   cd myapp
   

2. Install dependencies:

   pnpm install
   

3. Create a .env file based on .env.example.

4. Push the schema to your database with drizzle-kit:

   pnpm db push
   

   https://orm.drizzle.team/docs/migrations

5. Run the development server:

   pnpm dev
   

   The development server should now be running at http://localhost:3000.

Issue watchlist

• React Compiler docs, Working Group - React Compiler is in RC.
• https://github.com/TanStack/router/discussions/2863 - TanStack Start is in beta and may still undergo major changes.

Goodies

Scripts

These scripts in package.json use pnpm by default, but you can modify them to use your preferred package manager.

• 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 generate to generate a migration)
• ui - The shadcn/ui CLI. (e.g. pnpm ui add button to add the button component)
• format and lint - Run Prettier and ESLint.
• deps - Selectively upgrade dependencies via npm-check-updates.

Utilities

• auth-guard.ts - Sample middleware for forcing authentication on server functions. (see #5 and #17)
• ThemeToggle.tsx - A simple component to toggle between light and dark mode. (#7)

Building for production

Read the hosting docs for information on how to deploy your TanStack Start app.