Skip to content

README.md

Latest commit

 

History

History
202 lines (143 loc) · 5.21 KB

README.md

File metadata and controls

202 lines (143 loc) · 5.21 KB

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 / Turso.

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
  • Authentication handled by better-auth (email/password, OAuth providers)
  • Shared eslint config using @antfu/eslint-config
  • Shared tsconfig
  • Shared UI components in packages/ui
  • Expo mobile application with NativeWind (Tailwind CSS for React Native)

Tech Stack:

  • api (apps/api)
    • hono
    • hono openapi
    • better-auth
    • stoker
    • drizzle
    • drizzle-zod
    • turso
  • web (apps/web)
    • react
    • vite
    • react-hook-form
    • tanstack router
    • tanstack query
    • better-auth client for web authentication
  • mobile (apps/mobile)
    • react-native
    • expo
    • expo router
    • nativewind
    • @better-auth/expo for native authentication
  • dev tooling
    • typescript
    • eslint with @antfu/eslint-config
    • turbo
    • syncpack

Tour:

  • Base tsconfig.json with default settings lives in the root
  • Shared packages live in [/packages] directory
    • api-client: Hono RPC client for type-safe API communication.
    • common: Shared utilities and types.
    • eslint-config: Shared ESLint configuration based on @antfu/eslint-config.
    • ui: Shared React UI components.
  • Base eslint.config.js with default settings
  • Applications live in [/apps] directory
    • api: Hono backend application deployed to Cloudflare Workers, using Drizzle ORM with Turso.
      • Features better-auth for authentication, configured in src/lib/better-auth.config.ts. Auth-related database schema is generated via pnpm --filter api generate-auth-schema.
    • db: Contains a local Turso development database setup and data.
    • mobile: Expo (React Native) mobile application.
      • Uses @better-auth/expo for native authentication flows, integrating with the API's better-auth setup.
    • web: React/Vite frontend application.
      • Integrates with better-auth for authentication, complementing the API setup.

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

Using as a Template

If you're using this repository as a template, you can sync updates from the upstream template using git remotes and cherry-pick.

One-time Setup

First, add the template repository as a remote:

pnpm template:setup

This configures the template remote and fetches the latest commits.

List Available Updates

View recent commits from the template:

pnpm template:list

Or see commits since a specific SHA:

pnpm template:list --since <your-last-sync-sha>

Apply Updates

Apply one or more commits from the template:

pnpm template:apply <commit-sha>

Apply multiple commits at once:

pnpm template:apply <sha1> <sha2> <sha3>

Example:

pnpm template:apply d3d7a0c

If conflicts occur, resolve them and continue with git cherry-pick --continue, or abort with git cherry-pick --abort.

Applied commits will have a [template] prefix and include a source link to the original commit in the template repository.

MCP Configuration (Optional)

This repository supports Model Context Protocol (MCP) servers for enhanced development workflows. Currently configured:

  • Playwright MCP: Browser automation for testing

Local Setup

Install dependencies

pnpm i

Configure Environment Variables

Create a .dev.vars file in the apps/api directory using the example file as a template:

cp apps/api/.dev.vars.example apps/api/.dev.vars

Update the values in the .dev.vars file with your configuration:

  • Turso Database: TURSO_URL and TURSO_AUTH_TOKEN for your database
    • For local development: use http://127.0.0.1:8080 with turso dev
    • For remote: use your Turso database URL and auth token
  • Better Auth: BETTER_AUTH_SECRET (at least 32 characters) for JWT signing
  • Resend (optional): RESEND_API_KEY and EMAIL_FROM for email functionality
  • URLs: API_URL and WEB_URL for your local development environment

Run DB migrations locally

This command applies migrations to your local Turso database if you are using turso dev or a local libSQL file. If you are using a remote Turso dev database, configure apps/api/drizzle.config.ts accordingly or use the production migration command.

pnpm --filter api db:push

Start Apps

pnpm 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 Turso

This command applies migrations to your production Turso database. Ensure apps/api/drizzle.config.ts is configured for your production database.

pnpm --filter api db:push

Deploy

pnpm run deploy

Tasks

Lint

pnpm lint

Test

pnpm test

Build

pnpm build