Try demo http://websockets.trpc.io/
- 🧙♂️ 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
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter-websockets trpc-prisma-starter-websockets
cd trpc-prisma-starter-websockets
yarn
yarn dx
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
.
Path | Description |
---|---|
./prisma/schema.prisma |
Prisma schema |
./src/api/trpc/[trpc].tsx |
tRPC response handler |
./src/server/routers |
Your app's different tRPC-routers |
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.