Prisma + tRPC + WebSockets

Try demo http://websockets.trpc.io/

Features

• 🧙‍♂️ E2E type safety with tRPC
• ⚡ Full-stack React with Next.js
• ⚡ WebSockets / Subscription support
• ⚡ Database with Prisma
• 🔐 Authorization using next-auth
• ⚙️ VSCode extensions
• 🎨 ESLint + Prettier
• 💚 CI setup using GitHub Actions:
  • ✅ E2E testing with Playwright
  • ✅ Linting

Setup

pnpm create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
cd trpc-prisma-websockets-starter
pnpm i
pnpm dx

Deployment

Using Render

The project contains a render.yaml "Blueprint" which makes the project easily deployable on Render.

The database is setup with a starter plan, but you can use a free plan for 90 days.

Go to dashboard.render.com/blueprints and connect to this Blueprint and see how the app and database automatically gets deployed.

You will either need to create an environment group called trpc-websockets with environment variables or remove that from render.yaml in favor of manual environment variables that overrides the ones in /.env.

Files of note

Path	Description
./prisma/schema.prisma	Prisma schema
./src/api/trpc/[trpc].tsx	tRPC response handler
./src/server/routers	Your app's different tRPC-routers

Commands

pnpm build      # runs `prisma generate` + `prisma migrate` + `next build`
pnpm db-nuke    # resets local db
pnpm dev        # starts next.js + WebSocket server
pnpm dx         # starts postgres db + runs migrations + seeds + starts next.js
pnpm test-dev   # runs e2e tests on dev
pnpm test-start # runs e2e tests on `next start` - build required before
pnpm test:unit  # runs normal Vitest unit tests
pnpm test:e2e   # runs e2e tests

---

Created by @alexdotjs.