[React TanStackBoilerplate]

Template starter minimal untuk 🏝️ TanStack Start.

• React 19 + React Compiler
• TanStack Start + Router + Query
• Tailwind CSS + shadcn/ui + Base UI
• Vite 8 (beta) + Nitro v3 (nightly)
• Drizzle ORM + PostgreSQL
• Better Auth

Memulai

1. Clone repository ini:

   git clone https://github.com/madearga/tanstackboilerplate.git myapp
   cd myapp

2. Install dependencies:

   pnpm install

3. Buat file .env berdasarkan .env.example.

4. Push schema ke database dengan drizzle-kit:

   pnpm db push

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

5. Jalankan development server:

   pnpm dev

   Development server sekarang berjalan di http://localhost:3000.

Deploy ke Production

Konfigurasi vite saat ini dikonfigurasi untuk menggunakan Nitro v3 (nightly) untuk deploy ke Vercel, namun dapat dengan mudah diganti ke provider lain.

Lihat dokumentasi hosting TanStack Start untuk deploy ke platform lain.

Daftar Isu yang Perlu Dipantau

• Router/Start issues - TanStack Start masih dalam tahap RC.
• Devtools releases - TanStack Devtools masih dalam alpha dan mungkin masih ada breaking changes.
• Vite 8 beta - Kami menggunakan Vite 8 beta yang menggunakan Rolldown.
• Nitro v3 nightly - Template ini dikonfigurasi dengan Nitro v3 nightly secara default.

Fitur Tambahan

Scripts

Kami menggunakan pnpm secara default, namun Anda dapat memodifikasi script ini di package.json untuk menggunakan package manager yang Anda inginkan.

• auth:generate - Regenerate auth db schema jika Anda telah membuat perubahan pada konfigurasi Better Auth config.
• db - Jalankan perintah drizzle-kit. (contoh: pnpm db generate, pnpm db studio)
• ui - CLI shadcn/ui. (contoh: pnpm ui add button)
• format, lint, check-types - Menjalankan Prettier, ESLint, dan memeriksa tipe TypeScript secara berturut-turut.
  • check - Menjalankan ketiga script di atas. (contoh: pnpm check)
• deps - Selectively upgrade dependencies via taze.

Utilities

• auth/middleware.ts - Contoh middleware untuk memaksa autentikasi pada server functions.
• theme-toggle.tsx, theme-provider.tsx - Komponen toggle tema dan provider untuk beralih antara mode terang dan gelap.

Lisensi

Kode dalam template ini adalah domain publik melalui Unlicense. Jangan sungkan untuk menghapus atau mengganti untuk project Anda sendiri.

Lainnya yang Perlu Dicek

• @tanstack/create-start - Tool CLI resmi dari tim TanStack untuk membuat project Start.
• awesome-tanstack-start - Daftar kurasi resource awesome untuk TanStack Start.