You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
So, you want to build a modern web app but don't want to spend the next two weeks configuring everything? You've come to the right place. This React Starter Kit is a batteries-included, production-ready boilerplate that lets you skip the boring parts and get straight to building.
8
+
Building modern web applications shouldn't require weeks of configuration hell. This React Starter Kit eliminates the tedious setup work so you can focus on what matters: shipping great products.
9
9
10
-
It's built on a modern, edge-first stack that's fast, type-safe, and frankly, a joy to work with. Whether you're building a weekend project or the next big thing, we've got your back.
10
+
Designed for developers who value both speed and quality, this template provides a complete foundation for full-stack applications. From solo projects to team collaborations, it scales with your ambitions while maintaining the developer experience you deserve.
11
11
12
-
## Features
12
+
## What You Get
13
13
14
-
-**Blazing Fast Everything**: Powered by [Bun](https://bun.sh/), from the backend server to the scripts. It's fast. Like, "go get a coffee and it's already done" fast.
15
-
-**Full-Stack Type Safety**: With [TypeScript](https://www.typescriptlang.org/) and [tRPC](https://trpc.io/), you can say goodbye to runtime errors. If it compiles, it works (usually).
16
-
-**Modern Frontend**: Built with [React 19](https://react.dev/), [TanStack Router](https://tanstack.com/router) for type-safe routing, and [Tailwind CSS v4](https://tailwindcss.com/) for styling. Your UI will be snappy and look good doing it.
17
-
-**Edge-First Architecture**: Deploy to [Cloudflare Workers](https://workers.cloudflare.com/) for incredible performance and scalability. Your app will be everywhere, all at once.
18
-
-**Database Included**: Comes with [Drizzle ORM](https://orm.drizzle.team/) and a pre-configured schema for multi-tenant applications. No more writing SQL by hand unless you really, really want to.
19
-
-**Top-Notch DX**: Pre-configured with ESLint, Prettier, and VSCode settings to keep your code clean and your team happy. Less arguing about tabs vs. spaces, more building cool stuff.
14
+
-**Performance by Default**: Bun runtime delivers exceptional speed across development and production. Your build times will thank you.
15
+
-**Type Safety Throughout**: TypeScript and tRPC create an unbreakable contract between frontend and backend. Catch errors at compile time, not in production.
16
+
-**Modern React Stack**: React 19 with TanStack Router provides type-safe navigation and powerful data fetching patterns. Tailwind CSS v4 handles styling with zero configuration.
17
+
-**Edge-Native Deployment**: Cloudflare Workers ensure your app runs close to users worldwide. Experience sub-100ms response times globally.
18
+
-**Database Ready**: Drizzle ORM with Cloudflare D1 provides a complete data layer. Multi-tenant support included out of the box.
19
+
-**Developer Experience**: ESLint, Prettier, and VSCode configurations eliminate bikeshedding. Focus on features, not formatting.
**Why Monorepo?** This structure enables seamless code sharing between frontend and backend, ensures type consistency across your entire stack, and simplifies dependency management. When you update a type definition, both client and server stay in sync automatically.
51
40
52
-
## Requirements
41
+
## Perfect For
53
42
54
-
-[Bun](https://bun.sh/) (v1.0 or newer)
55
-
-[VS Code](https://code.visualstudio.com/) editor with our [recommended extensions](.vscode/extensions.json)
56
-
- Optionally, the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) for your browser.
43
+
-**SaaS Applications**: Multi-tenant architecture with user management built-in
44
+
-**API-First Products**: tRPC provides excellent developer experience for API development
45
+
-**Global Applications**: Edge deployment ensures fast loading times worldwide
46
+
-**Team Projects**: Monorepo structure scales well with multiple developers
47
+
-**Rapid Prototyping**: Skip configuration and start building features immediately
57
48
58
-
## Getting Started
49
+
## Technology Stack
59
50
60
-
[Generate](https://github.com/kriasoft/react-starter-kit/generate) a new project
61
-
from this template, clone it, install project dependencies, update the
62
-
environment variables found in [`.env`](./.env) / [`.env.local`](./.env.local), and start hacking:
51
+
**Core Runtime & Platform**
52
+
53
+
-[Bun](https://bun.sh/) — Lightning-fast JavaScript runtime and package manager
Update environment variables in [`.env`](./.env) and `.env.local` files as well as Wrangler configuration in [`wrangler.jsonc`](./wrangler.jsonc).
109
+
110
+
### 4. Start Development
111
+
112
+
Open two terminals and run these commands:
113
+
114
+
**Terminal 1 - Frontend:**
115
+
116
+
```bash
70
117
bun --cwd app start
118
+
```
119
+
120
+
**Terminal 2 - Backend:**
71
121
72
-
# Launch the backend API server
122
+
```bash
73
123
bun --cwd edge build --watch
74
124
bun wrangler dev
125
+
```
75
126
76
-
# Migrate the database
127
+
### 5. Initialize Database
128
+
129
+
```bash
130
+
# Let Wrangler create the D1 database locally
131
+
bun wrangler d1 execute db --local --command "SELECT 1"
132
+
# Apply database schema and migrations
77
133
bun --cwd db migrate
134
+
bun --cwd db seed # Optional: add sample data
78
135
```
79
136
80
-
Your frontend will be running at <http://localhost:5173/>, and the backend API will be on the port from `wrangler dev` (usually 8787). Open the frontend URL in your browser to see the app in action.
81
-
82
-
## How to Deploy
137
+
Open <http://localhost:5173> to see your app running. The backend API will be available at the port shown by `wrangler dev` (typically 8787).
83
138
84
-
Ensure that all the environment variables in `.env`/`.env.local` files and Wrangler configuration in `wrangler.json` file are up-to-date.
139
+
## Production Deployment
85
140
86
-
If you haven't done it already, push any secret values you may need to CF Workers
87
-
environment by running `bun wrangler secret put <NAME> [--env #0]`.
141
+
### 1. Environment Setup
88
142
89
-
Finally build and deploy the app by running:
143
+
Ensure your production environment variables are configured:
90
144
145
+
```bash
146
+
# Set secrets in Cloudflare Workers
147
+
bun wrangler secret put BETTER_AUTH_SECRET --env=production
148
+
bun wrangler secret put OPENAI_API_KEY --env=production
91
149
```
150
+
151
+
### 2. Build and Deploy
152
+
153
+
```bash
154
+
# Build all packages
92
155
bun --cwd app build
93
156
bun --cwd edge build
94
-
bun wrangler deploy
157
+
158
+
# Deploy to Cloudflare Workers
159
+
bun wrangler deploy --env=production
95
160
```
96
161
162
+
Your application will be live on your Cloudflare Workers domain within seconds. The edge-first architecture ensures optimal performance regardless of user location.
0 commit comments