Suche

Kavel durchsuchen...

Dokumentationsmenü

Projektstruktur

Ein Bun-+-Turbo-Monorepo: zwei Cloudflare-Workers-Apps und die gemeinsamen Pakete, die sie verbinden.

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: der Hono-API-Worker. Routen liegen in src/index.ts; die Geschäftslogik wird als oRPC-Prozeduren in src/orpc bereitgestellt. Der Datenzugriff nutzt Drizzle auf D1.
  • apps/web: die TanStack-Start-Web-App, ebenfalls ein Worker. Dateibasierte Routen in src/routes rendern serverseitig und hydrieren auf dem Client.

Pakete

  • @my-app/backend-contract: der oRPC-Vertrag. Er deklariert Ein- und Ausgaben der Prozeduren mit Zod, und beide Apps hängen davon ab, eine Vertragsänderung ist also auf beiden Seiten ein Compile-Fehler, bis sie behoben ist.
  • @my-app/ui: gemeinsame Base-UI-Komponenten, das globale Stylesheet und deine Config.brand-Einstellungen.
  • @my-app/transactional: react-email-Vorlagen, vom E-Mail-Modul zu HTML gerendert.

Pakete liegen im Namensraum deines Projektnamens. Importiere sie über den Alias, z. B. @my-app/ui/components/ui/button.

Der oRPC-Vertragsablauf

Ein API-Endpunkt hinzuzufügen berührt drei Stellen, alle voll typisiert:

  1. Deklariere die Prozedur in packages/backend-contract (Name, Zod-Ein-/Ausgabe).
  2. Implementiere sie in apps/api/src/orpc.
  3. Rufe sie aus der Web-App über den typisierten backend-Client auf, inklusive Autovervollständigung und Typprüfung.

Welche Ordner existieren, hängt von den gewählten Modulen ab, siehe Module.