Svelte Fastify Trpc

Svelte + Fastify + tRPC monorepo (TypeScript) using pnpm workspaces.

Franz, this is the starter you can reuse for your own projects. The repo gives you a clean split between a web client (Svelte + Vite) and an API server (Fastify + tRPC) with shared type safety via generated types.

What’s inside

• frontend: Svelte + Vite app (can run standalone during development)
• backend: Fastify server with tRPC router, cookie-based session auth
• pnpm workspace at the root to run both together

Requirements

• Node.js ≥ 18
• pnpm ≥ 8 (install with: npm i -g pnpm)

Quick start

1. Install deps (root):

pnpm install

2. Run in development (starts both servers):

pnpm dev

• Frontend: http://localhost:5173
• API: http://localhost:3000/api (Vite proxies /api → backend)

3. Build for production:

pnpm -r --filter ./frontend --filter ./backend build

4. Start production server (serves the built frontend from the backend):

pnpm --filter ./backend start

• App: http://localhost:3000

Project structure

.
├─ backend/
│  ├─ server.ts                 # Fastify bootstrap + tRPC mount + static files
│  └─ src/
│     ├─ router.ts              # appRouter: greeting, auth, etc.
│     ├─ routes/auth.ts         # login/logout, cookie management
│     ├─ context.ts             # request context (cookies, session)
│     ├─ sessions.ts            # in-memory session store
│     └─ env.ts                 # productionMode flag
├─ frontend/
│  └─ src/
│     ├─ lib/client.ts          # tRPC client pointed at /api
│     ├─ App.svelte             # demo calls to the API
│     └─ env.ts                 # simple dev/prod flag
└─ pnpm-workspace.yaml          # declares frontend and backend packages

How the pieces talk

• tRPC is mounted at /api in the backend. In dev, Vite proxies /api to http://localhost:3000 so you can call /api from the Svelte app without worrying about CORS. In prod, Fastify serves the built frontend and the API under the same origin.
• Auth is cookie-based (HTTP-only). In dev, CORS is opened for http://localhost:5173 and http://127.0.0.1:5173. Safari’s localhost cookie quirk is handled automatically.

Notes for iOS usage (Franz)

• If you want to use a native iOS client instead of the Svelte app:
  • Run only the backend: pnpm --filter ./backend dev (or start for prod).
  • Call the API at http://<your-mac-ip>:3000/api from your device/simulator.
  • Cookie-based auth works with URLSession out of the box if you keep the same base URL and allow default cookie storage.
  • If you prefer token/bearer auth, swap cookie logic in backend/src/routes/auth.ts and backend/src/context.ts for tokens; the rest of the stack stays the same.

Extending the API

1. Add a new procedure in backend/src/router.ts (or create a new file in backend/src/routes/ and include it in appRouter).
2. Restart the backend (dev does this automatically). Types will flow to the frontend tRPC client, so you get end-to-end type safety.

Using this as your template

• Rename packages if you want (name fields in frontend/package.json and backend/package.json).
• Replace the demo auth in backend/src/routes/auth.ts with your real logic.
• Update README and branding. Optionally run rm -rf .git && git init to start fresh.

Commands reference

• Install: pnpm install
• Dev (both): pnpm dev
• Build: pnpm -r --filter ./frontend --filter ./backend build
• Start (prod, serves frontend): pnpm --filter ./backend start

If anything feels unfamiliar, ping me—happy to tailor this to your next app, Franz.