create-t3-turbo-prisma

Note

NextAuth setup now works for Expo app!

Note

OAuth deployments are now working for preview deployments. Read deployment guide and check out the source to learn more!

Note

Due to high demand, this repo now uses the app directory with some new experimental features. If you want to use the more traditional pages router, check out the repo before the update.

Installation

There are two ways of initializing an app using the create-t3-turbo-prisma starter. You can either use this repository as a template:

or use Turbo's CLI to init your project (use PNPM as package manager):

npx create-turbo@latest -e https://github.com/YuzuZensai/create-t3-turbo-prisma

About

Ever wondered how to migrate your T3 application into a monorepo? Stop right here! This is the perfect starter repo to get you running with the perfect stack!

It uses Turborepo and contains:

.github
  └─ workflows
        └─ CI with pnpm cache setup
.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  ├─ auth-proxy
  |   ├─ Nitro server to proxy OAuth requests in preview deployments
  |   └─ Uses Auth.js Core
  └─ next.js
      ├─ Next.js 14
      ├─ React 18
      ├─ Tailwind CSS
      └─ E2E Typesafe API Server & Client
packages
  ├─ api
  |   └─ tRPC v11 router definition
  ├─ auth
  |   └─ Authentication using next-auth. **NOTE: Only for Next.js app**
  ├─ db
  |   └─ Typesafe db calls using Prisma ORM
  └─ ui
      └─ Start of a UI package for the webapp using shadcn-ui
tooling
  ├─ eslint
  |   └─ shared, fine-grained, eslint presets
  ├─ prettier
  |   └─ shared prettier configuration
  ├─ tailwind
  |   └─ shared tailwind configuration
  └─ typescript
      └─ shared tsconfig you can extend from

In this template, we use @acme as a placeholder for package names. As a user, you might want to replace it with your own organization or project name. You can use find-and-replace to change all the instances of @acme to something like @my-company or @project-name.

Quick Start

Note The db package is preconfigured to use PostgreSQL. If you're using something else, make the necessary modifications to the schema.prisma in prisma.

To get it running, follow the steps below:

1. Setup dependencies

# Install dependencies
pnpm i

# Configure environment variables
# There is an `.env.example` in the root directory you can use for reference
cp .env.example .env

# Push the Prisma schema to the database
pnpm db:push

FAQ

Does this pattern leak backend code to my client applications?

No, it does not. The api package should only be a production dependency in the Next.js application where it's served. All other apps you may add in the future, should only add the api package as a dev dependency. This lets you have full typesafety in your client applications, while keeping your backend code safe.

If you need to share runtime code between the client and server, such as input validation schemas, you can create a separate shared package for this and import it on both sides.

Deployment

Next.js

Deploy to Vercel

Let's deploy the Next.js application to Vercel. If you've never deployed a Turborepo app there, don't worry, the steps are quite straightforward. You can also read the official Turborepo guide on deploying to Vercel.

Create a new project on Vercel, select the apps/nextjs folder as the root directory. Vercel's zero-config system should handle all configurations for you.
Add your DATABASE_URL environment variable.
Done! Your app should successfully deploy.

Auth Proxy

The auth proxy is a Nitro server that proxies OAuth requests in preview deployments. This is required for the Next.js app to be able to authenticate users in preview deployments. The auth proxy is not used for OAuth requests in production deployments. To get it running, it's easiest to use Vercel Edge functions. See the Nitro docs for how to deploy Nitro to Vercel.

Then, there are some environment variables you need to set in order to get OAuth working:

For the Next.js app, set AUTH_REDIRECT_PROXY_URL to the URL of the auth proxy.
For the auth proxy server, set AUTH_REDIRECT_PROXY_URL to the same as above, as well as AUTH_DISCORD_ID, AUTH_DISCORD_SECRET (or the equivalent for your OAuth provider(s)). Lastly, set AUTH_SECRET to the same value as in the Next.js app for preview environments.

Read more about the setup in the auth proxy README.

References

The stack originates from create-t3-app.

A blog post where I wrote how to migrate a T3 app into this.

Forked from create-t3-turbo