Awesome
Prisma + tRPC
Features
- 🧙♂️ E2E typesafety with tRPC
- ⚡ Full-stack React with Next.js
- ⚡ Database with Prisma
- ⚙️ VSCode extensions
- 🎨 ESLint + Prettier
- 💚 CI setup using GitHub Actions:
- ✅ E2E testing with Playwright
- ✅ Linting
- 🔐 Validates your env vars on build and start
Setup
pnpm create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
pnpm
pnpm dx
Requirements
- Node >= 18.0.0
- Postgres
Development
Start project
pnpm create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
pnpm
pnpm dx
Commands
pnpm build # runs `prisma generate` + `prisma migrate` + `next build`
pnpm db-reset # resets local db
pnpm dev # starts next.js
pnpm dx # starts postgres db + runs migrations + seeds + starts next.js
pnpm test-dev # runs e2e tests on dev
pnpm test-start # runs e2e + unit tests
pnpm test-unit # runs normal Vitest unit tests
pnpm test-e2e # runs e2e tests
Deployment
Using Render
The project contains a render.yaml
"Blueprint" which makes the project easily deployable on Render.
Go to dashboard.render.com/blueprints and connect to this Blueprint and see how the app and database automatically gets deployed.
Files of note
<table> <thead> <tr> <th>Path</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="./prisma/schema.prisma"><code>./prisma/schema.prisma</code></a></td> <td>Prisma schema</td> </tr> <tr> <td><a href="./src/pages/api/trpc/[trpc].ts"><code>./src/pages/api/trpc/[trpc].ts</code></a></td> <td>tRPC response handler</td> </tr> <tr> <td><a href="./src/server/routers"><code>./src/server/routers</code></a></td> <td>Your app's different tRPC-routers</td> </tr> </tbody> </table>Created by @alexdotjs.