A lot of tiny big wins

[KATT]

Table of contents

• Table of contents
• Background
• Areas of improvements
  • Safe environment variables
  • Type-safety
  • Continuous Integration
  • E2E testing
  • Integration testing
  • Scripts
  • VSCode extensions and settings
  • tRPC inference helpers
• Describe alternatives you've considered
• Ending notes

Background

I'm the creator of tRPC and Internet-friend of @theobr.

https://twitter.com/alexdotjs/status/1545036195331055616

I've been maintaining this repo for over a year and I've kept updating it with many tiny big details over time which represents how I do things in production.

Areas of improvements

Safe environment variables

Environment variables should be validated when a project is built. Having the wrong env vars is a very common production issue that is hellish as you usually don't notice it straight-away. It's better to just crash the build if something's wrong.

Zod to the rescue!

• https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/src/server/env.js#L1-L24
• https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/next.config.js#L3
• It's a .js-file because Next.js doesn't support next.config.ts, but it can still be validated by TypeScript: https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/tsconfig.json#L25-L31

Type-safety

You can have next.config.js typesafe.

https://github.com/trpc/examples-next-prisma-starter/blob/main/next.config.js

If you use publicRuntimeConfig, you can have that inferred in a typesafe manner: https://github.com/trpc/examples-next-prisma-starter/blob/main/src/utils/publicRuntimeConfig.ts

Continuous Integration

It's very time consuming to setup CI with a proper DB, Playwright, testing, build, etc. Most production projects need it.

See https://github.com/trpc/examples-next-prisma-starter/blob/main/.github/workflows/main.yml

E2E testing

Playwright is amazing.

Note that this and next one is pointless if you don't also setup CI.

• https://github.com/trpc/examples-next-prisma-starter/blob/main/playwright.config.ts

Integration testing

Note: I hate unit testing & I would never propose using that anywhere, however....

... testing your API is nice. And a lot quicker to write tests around that than it is to write 10 different E2E tests for all the edge-cases.

This uses a real database and your actual API boundary to test things.

Example:

https://github.com/trpc/examples-next-prisma-starter/blob/main/src/server/routers/post.test.ts

Relevant files:

• https://github.com/trpc/examples-next-prisma-starter/blob/main/jest.config.ts

Scripts

• Shortcuts for nuking your DB, etc. I'm lazy and I don't wanna remember / go to Prisma docs every time I use a command.
• Migrate DB automatically as part of build
• Seed scripts:
  • One seed script for production that has your "fixtures" in your DB, stuff you always want in your app regardless of env
  • One seed script for Prisma in development to quickly bootstrap an environment
• clean script to remove ./next, clear jest, etc

https://github.com/trpc/trpc/blob/04c3330e4c05a4a22e8e098a0c7a2ae4b4f7c282/examples/next-prisma-starter/package.json#L6-L23

VSCode extensions and settings

Prompts you to install things when you open the folder in VSCode.

• https://github.com/trpc/examples-next-prisma-starter/blob/main/.vscode/extensions.json
• https://github.com/trpc/examples-next-prisma-starter/blob/main/.vscode/settings.json

tRPC inference helpers

https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/src/utils/trpc.ts#L34-L48

Describe alternatives you've considered

Using my own starter project. I'll probably continue to do so, but I'd still like to see some more cherries taken from it.

Ending notes

Do whatever you want with this, feel free to write in the #help-channel on https://trpc.io/discord if something is confusing. My GitHub notifications are very noisy so it's likely I'll miss it if you @ me here.

[JacobMGEvans]

Subscribed. I want to follow up.

[t3dotgg]

There's a lot in here I think we should add. Going to chat w/ the core maintainers and see what our path forward is

[zomars]

Any monorepo recommendations that you would like to add? 🙏

[KATT]

Any monorepo recommendations that you would like to add? 🙏

@zomars, I think monorepo is out of scope for create-t3-app, ask that question in https://github.com/trpc/trpc/discussions :)

[zomars]

Done

[juliusmarminge]

Safe environment variables
Environment variables should be validated when a project is built. Having the wrong env vars is a very common production issue that is hellish as you usually don't notice it straight-away. It's better to just crash the build if something's wrong.
Zod to the rescue!
https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/src/server/env.js#L1-L24
https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/next.config.js#L3
It's a .js-file because Next.js doesn't support next.config.ts, but it can still be validated by TypeScript: https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/tsconfig.json#L25-L31

Implemented in #147

[juliusmarminge]

Type-safety

You can have next.config.js typesafe.

https://github.com/trpc/examples-next-prisma-starter/blob/main/next.config.js

Implemented in #205

[juliusmarminge]

tRPC inference helpers

https://github.com/trpc/examples-next-prisma-starter/blob/a07a8d1bd1ed4a9af4fd7cd6130ee92383082419/src/utils/trpc.ts#L34-L48

Implemented in 1fcec81 (and #203 for @next)

[juliusmarminge]

Closing as completed. We have decided not to implement the test and CI parts for now, and the VSCode stuff is up for discussion in PR #228. Thank you very much for all the suggestions and enhancements!