SECTION · 01

关键指标一览

Stars 数

23,668

Forks 数

4,205

Watchers 数

23,668

Issue 数

9

主要语言

TypeScript

许可证

MIT

仓库所有者

kriasoft

创建时间

2014.04.16

更新时间

2026.08.23

主题标签

SECTION · 03

README 详细介绍

README 原文为英文,如需阅读完整中文内容,建议使用 浏览器翻译插件(如 Edge 浏览器自带翻译、Google 翻译扩展)进行整页翻译。

React Starter Kit

</div>

A full-stack monorepo template for building SaaS applications with React 19, tRPC, and Cloudflare Workers. Type-safe from database to UI, deployable to the edge in minutes.

Highlights

Type-safe full stack* – TypeScript, tRPC, and Drizzle ORM create a single type contract from database to UI
Edge-native* – Three Cloudflare Workers (web, app, api) connected via service bindings
Auth + billing included* – Better Auth with email OTP, passkey, Google OAuth, organizations, and Stripe subscriptions
Modern React* – React 19, TanStack Router (file-based), TanStack Query, Jotai, Tailwind CSS v4, shadcn/ui
Database ready* – Drizzle ORM with Neon PostgreSQL, migrations, and seed data
Fast DX* – Bun toolchain, Vite, Vitest, ESLint, Prettier, and pre-configured VS Code settings

React Starter Kit is proudly supported by these amazing sponsors:

Technology Stack

Monorepo Architecture

Layer	Technologies
Runtime*	Cloudflare Workers
Frontend*	React 19, TanStack Router, Tailwind CSS v4, shadcn/ui, Jotai
Marketing*	Astro
Backend*	Hono, tRPC, Better Auth, Stripe
Database*	Drizzle ORM, Neon PostgreSQL
Toolchain*	Bun, TypeScript 6.0, Vite, Vitest, ESLint, Prettier

├── apps/
│   ├── web/          Astro marketing site (edge router, serves static + proxies to app/api)
│   ├── app/          React 19 SPA (TanStack Router, Jotai, Tailwind CSS v4)
│   ├── api/          Hono + tRPC API server (Better Auth, Cloudflare Workers)
│   └── email/        React Email templates
├── packages/
│   ├── ui/           shadcn/ui components (new-york style)
│   ├── core/         Shared types and utilities
│   └── ws-protocol/  WebSocket protocol with type-safe messaging
├── db/               Drizzle ORM schemas, migrations, and seed data
├── infra/            Terraform (Hyperdrive connection pools, R2 storage)
├── docs/             VitePress documentation
└── scripts/          Build automation and dev tools

Each app deploys independently to Cloudflare Workers. The web worker routes /api/* to the API worker and app routes to the app worker via service bindings.

Prerequisites

Bun v1.4+ (replaces Node.js and npm)
VS Code with our recommended extensions
React Developer Tools browser extension (recommended)
Cloudflare account for deployment

Quick Start

1. Create Your Project

Generate a new repository from this template, then clone it locally:

git clone https://github.com/your-username/your-project-name.git
cd your-project-name

2. Install Dependencies

bun install

3. Configure Environment

This project follows Vite env conventions:

<code class="ra0-md-code">.env</code> is committed and contains shared defaults/placeholders only (no real secrets)
.env.local is git-ignored and should contain your real credentials
.env.local values override .env

cp .env .env.local  # then replace placeholder values with real ones

Also check <code class="ra0-md-code">wrangler.jsonc</code> for Worker configuration and bindings.

4. Start Development

# Launch all apps in development mode (web, api, and app)
bun dev

# Or, start specific apps individually
bun web:dev  # Marketing site
bun app:dev  # Main application
bun api:dev  # API server

5. Initialize Database

Ensure DATABASE_URL is configured in your .env.local file, then set up the schema:

bun db:push              # Push schema directly (quick dev setup)
bun db:seed              # Seed with sample data (optional)
bun db:studio            # Open database GUI

db:push is for local prototyping only. Staging and production apply migrations instead: bun db:migrate:staging, bun db:migrate:production.

Keep Your Project Updated

App	URL
React app	<http://localhost:5173>
Marketing site	<http://localhost:4321>
API server	<http://localhost:8787>

When you want to bring in newer React Starter Kit changes, ask your coding agent to run the merge-seed skill (/merge-seed in Claude Code or $merge-seed in Codex). It merges upstream changes while preserving your project's identity and configuration. Start with a clean working tree; the Quick Start guide explains the workflow and its safety boundary.

Production Deployment

The short version. The deployment guide covers each step in full.

1. Provision Infrastructure

Terraform creates the Hyperdrive configurations the API worker connects through:

bun infra:production apply

Paste the two IDs it prints into the hyperdrive block of apps/api/wrangler.jsonc.

2. Environment Setup

Configure your production secrets in Cloudflare Workers:

# Required – the API refuses to deploy without these
bun wrangler secret put BETTER_AUTH_SECRET --config apps/api/wrangler.jsonc --env=""
bun wrangler secret put RESEND_API_KEY --config apps/api/wrangler.jsonc --env=""

# Google sign-in (optional – email OTP and passkeys work without it)
bun wrangler secret put GOOGLE_CLIENT_ID --config apps/api/wrangler.jsonc --env=""
bun wrangler secret put GOOGLE_CLIENT_SECRET --config apps/api/wrangler.jsonc --env=""

# Stripe billing (optional – set all four to enable, or none; annual is extra)
bun wrangler secret put STRIPE_SECRET_KEY --config apps/api/wrangler.jsonc --env=""
bun wrangler secret put STRIPE_WEBHOOK_SECRET --config apps/api/wrangler.jsonc --env=""
bun wrangler secret put STRIPE_STARTER_PRICE_ID --config apps/api/wrangler.jsonc --env=""
bun wrangler secret put STRIPE_PRO_PRICE_ID --config apps/api/wrangler.jsonc --env=""
bun wrangler secret put STRIPE_PRO_ANNUAL_PRICE_ID --config apps/api/wrangler.jsonc --env="" # optional

All of these belong to the API worker, which is what --config selects – without it Wrangler has no worker to attach the secret to. Use --env staging for staging; production is the top-level config, selected explicitly with --env="". Non-sensitive vars like RESEND_EMAIL_FROM go in wrangler.jsonc directly.

Set RESEND_EMAIL_FROM to an address on a domain you have verified with Resend. The default onboarding@resend.dev only delivers to your own inbox, and sign-in is email OTP – leave it and no one else can sign in.

3. Migrate the Production Database

bun db:migrate:production   # reads .env.production.local, and only that file

4. Build and Deploy

# Builds, then deploys api -> app -> web (service-binding targets first)
bun deploy:staging
bun deploy:production

CI runs the same script, so a release from your machine and one from GitHub Actions cannot drift.

Backers

Contributors

Need Help?

Documentation* covers auth, database, billing, deployment, and more.

Our AI assistant is trained on this codebase – ask it anything on ChatGPT or Gemini. Try these questions:

Contributing

See the Contributing Guide to get started. Check good first issues or join Discord for discussion.

License

<sup>Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.</sup>

react-starter-kit – kriasoft

关键指标一览

主题标签

README 详细介绍

React Starter Kit

Highlights

Technology Stack

Monorepo Architecture

Prerequisites

Quick Start

1. Create Your Project

2. Install Dependencies

3. Configure Environment

4. Start Development

5. Initialize Database

Keep Your Project Updated

Production Deployment

1. Provision Infrastructure

2. Environment Setup

3. Migrate the Production Database

4. Build and Deploy

Backers

Contributors

Need Help?

Contributing

License

返回GitHub项目列表

react-starter-kit – kriasoft

关键指标一览

主题标签

README 详细介绍

React Starter Kit

Highlights

Technology Stack

Monorepo Architecture

Prerequisites

Quick Start

1. Create Your Project

2. Install Dependencies

3. Configure Environment

4. Start Development

5. Initialize Database

Keep Your Project Updated

Production Deployment

1. Provision Infrastructure

2. Environment Setup

3. Migrate the Production Database

4. Build and Deploy

Backers

Contributors

Need Help?

Contributing

License

其他开源项目推荐

返回GitHub项目列表