Buscar

Buscar en Kavel...

Menú de documentación

Estructura del proyecto

Un monorepo Bun + Turbo: dos apps de Cloudflare Workers y los paquetes compartidos que las unen.

text
my-app/
├── apps/
│   ├── api/                  Hono API on Cloudflare Workers
│   │   ├── src/
│   │   │   ├── db/           Drizzle schema + client
│   │   │   ├── lib/          integrations (auth, email, stripe…)
│   │   │   ├── orpc/         oRPC procedure implementations
│   │   │   └── index.ts      worker entry + routing
│   │   ├── migrations/       generated D1 migrations
│   │   └── wrangler.jsonc    Workers + D1 config
│   └── web/                  TanStack Start app on Workers
│       └── src/
│           ├── components/   UI + feature components
│           ├── routes/       file-based routes
│           └── paraglide/    generated i18n runtime
├── packages/
│   ├── backend-contract/     oRPC contract (shared types)
│   ├── ui/                   Base UI components + brand config
│   └── transactional/        react-email templates
├── messages/                 i18n message catalogs
└── turbo.json                task pipeline

Apps

  • apps/api: el worker de la API Hono. Las rutas están en src/index.ts; la lógica de negocio se expone como procedimientos oRPC en src/orpc. El acceso a datos usa Drizzle sobre D1.
  • apps/web: la app web TanStack Start, también un Worker. Las rutas basadas en archivos de src/routes se renderizan en el servidor y se hidratan en el cliente.

Paquetes

  • @my-app/backend-contract: el contrato oRPC. Declara las entradas y salidas de los procedimientos con Zod, y ambas apps dependen de él, así que un cambio en el contrato es un error de compilación en ambos lados hasta corregirlo.
  • @my-app/ui: componentes Base UI compartidos, la hoja de estilos global y tus ajustes de Config.brand.
  • @my-app/transactional: plantillas de react-email, renderizadas a HTML por el módulo de correo.

Los paquetes usan el espacio de nombres de tu proyecto. Impórtalos con el alias, p. ej. @my-app/ui/components/ui/button.

El flujo del contrato oRPC

Añadir un endpoint de API toca tres sitios, todos totalmente tipados:

  1. Declara el procedimiento en packages/backend-contract (nombre, entrada/salida Zod).
  2. Impleméntalo en apps/api/src/orpc.
  3. Llámalo desde la app web con el cliente tipado backend, con autocompletado y comprobación de tipos.

Qué carpetas existen depende de los módulos que elijas, consulta Módulos.