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

Important

We're using the alpha branch of TanStack Start for the upcoming Devinxi changes. Start & Router versions are currently pinned to "alpha" in package.json.

TanStack/router#2863 (comment)

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.
• TanStack/router#2863 - TanStack Start may still undergo breaking 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.