Hono + React / Vite + Cloudflare + pnpm workspaces monorepo

A monorepo setup using pnpm workspaces with a Hono API and React / vite client deployed to Cloudflare Workers / Static Assets / D1.

Features:

• Run tasks in parallel across apps / packages with pnpm
• Hono API proxied with vite during development
• Hono RPC client built during development for faster inference
• Shared Zod validators with drizzle-zod
• Shared eslint config
• Shared tsconfig

Tech Stack:

• api
  • hono
  • hono openapi
  • authjs
  • stoker
  • drizzle
  • drizzle-zod
• web
  • react
  • vite
  • react-hook-form
  • tanstack router
• dev tooling
  • typescript
  • eslint with @antfu/eslint-config

Tour:

• Base tsconfig.json with default settings lives in the root
• Shared packages live in [/packages] directory
  • Base eslint.config.js with default settings
• Applications live in [/apps] directory
  • Use any cli to create new apps in here
  • If cloning a git repo in here be sure to delete the .git folder so it is not treated as a submodule

All pnpm commands are run from the root of the repo.

Local Setup

Install dependencies

pnpm i

Create / Update Cloudflare D1 Database id

pnpm dlx wrangler create d1 replace-with-your-database-name-here

Update database_name and database_id in apps/api/wrangler.toml with the output from wrangler.

Run DB migrations locally

pnpm run -r db:migrate:local

Start Apps

pnpm run dev

Visit http://localhost:5173

All requests to /api will be proxied to the hono server running on http://localhost:8787

Production Setup

Run DB migrations on Cloudflare D1

pnpm run -r db:migrate:remote

Deploy

pnpm run deploy

Tasks

Lint

pnpm run lint

Test

pnpm run test

Build

pnpm run build