Setting Up a tRPC Monorepo
Configure a monorepo workspace for your tRPC project, separating backend, frontend, and shared types.
Setting Up a tRPC Monorepo is a free tRPC End-to-End Type Safe APIs lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the tRPC End-to-End Type Safe APIs learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is a Monorepo?
Welcome to setting up a tRPC project in a monorepo! But what exactly is a monorepo?
- A monorepo is a single repository containing multiple distinct projects.
- Unlike a polyrepo (multiple repos for multiple projects), everything lives together.
- Think of it as a big folder holding many smaller, related projects.
It's a powerful way to manage complex applications.
Why Monorepos for tRPC?
Monorepos offer unique advantages when working with tRPC:
- Shared Types: Easily share TypeScript types between your frontend and backend.
- Atomic Commits: Changes to the API and its consuming client can be committed together.
- Simplified Refactoring: Rename a type in one place, and your editor updates everywhere.
- Consistent Tooling: Share configurations for linters, formatters, and build tools.
This approach makes end-to-end type safety even more robust.
Choosing a Monorepo Tool
To manage a monorepo effectively, you'll need a workspace manager. These tools help link your internal packages.
Popular options include:
- pnpm Workspaces: Efficient, uses symlinks for dependencies.
- Yarn Workspaces: A common choice, built into Yarn.
- Nx: A powerful build system and monorepo tool.
- Turborepo: Focuses on fast builds and caching.
For this lesson, we'll use pnpm Workspaces due to its simplicity and efficiency.
Initializing the Monorepo
First, create a new directory for your monorepo and initialize a `package.json`.
Then, create a `pnpm-workspace.yaml` file to define your workspace roots. This tells pnpm where to find your sub-projects.
mkdir trpc-monorepo
cd trpc-monorepo
pnpm init
# pnpm-workspace.yaml
packages:
- 'packages/*'Structuring the 'packages' Folder
The `packages` directory will contain all your individual projects (or 'apps'). We'll typically have:
- server: Your tRPC backend.
- client: Your frontend application (e.g., React, Next.js).
- shared: A package for common utilities, types, and Zod schemas shared by `server` and `client`.
Let's create these basic directories.
mkdir -p packages/server
mkdir -p packages/client
mkdir -p packages/sharedSetting up the 'server' Package
Inside `packages/server`, we'll set up a basic Node.js project. It needs its own `package.json` and `tsconfig.json`.
The `tsconfig.json` will specify compilation options for your backend code.
// packages/server/package.json
{
"name": "server",
"version": "1.0.0",
"main": "src/index.ts",
"scripts": {
"dev": "ts-node-dev src/index.ts"
},
"dependencies": {
"@trpc/server": "latest",
"cors": "latest",
"express": "latest"
},
"devDependencies": {
"typescript": "latest",
"ts-node-dev": "latest"
}
}
// packages/server/tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"outDir": "dist"
}
}Setting up the 'client' Package
Similarly, `packages/client` will house your frontend application. This example shows a basic React setup, but it could be Next.js or any other framework.
It will also have its own `package.json` and `tsconfig.json`.
// packages/client/package.json
{
"name": "client",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "vite"
},
"dependencies": {
"@trpc/client": "latest",
"@trpc/react-query": "latest",
"react": "latest",
"react-dom": "latest",
"@tanstack/react-query": "latest"
},
"devDependencies": {
"typescript": "latest",
"vite": "latest",
"@vitejs/plugin-react": "latest"
}
}
// packages/client/tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "../shared" }]
}Creating the 'shared' Package
The `packages/shared` directory is crucial for tRPC monorepos. It will contain types and definitions that both your `server` and `client` need.
This ensures end-to-end type safety by having a single source of truth for your API contract.
// packages/shared/package.json
{
"name": "shared",
"version": "1.0.0",
"main": "src/index.ts",
"types": "src/index.ts"
}
// packages/shared/tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"strict": true,
"declaration": true,
"outDir": "dist"
},
"include": ["src"]
}Linking Shared Types
Now that we have our `shared` package, we need to tell `server` and `client` about it.
We add `"shared": "workspace:*"` to the `dependencies` of both `server` and `client`'s `package.json` files.
Then, run `pnpm install` at the monorepo root to link them up.
// packages/server/package.json (snippet)
"dependencies": {
"@trpc/server": "latest",
"shared": "workspace:*" // Add this line!
}
// packages/client/package.json (snippet)
"dependencies": {
"@trpc/client": "latest",
"shared": "workspace:*" // Add this line!
}
pnpm installPractical Example: Sharing a Type
Let's see how sharing types works. We'll define a `User` type in `shared` and use it in a mock backend and frontend snippet.
This demonstrates the core benefit: defining types once and using them everywhere.
// packages/shared/src/index.ts
export type User = {
id: string;
name: string;
email: string;
};
// packages/server/src/index.ts (mock)
import { User } from 'shared';
const getUser = (): User => ({
id: '123',
name: 'Alice',
email: 'alice@example.com'
});
console.log(getUser().name);
// packages/client/src/App.tsx (mock)
import { User } from 'shared';
const displayUser = (user: User) => {
console.log(`User: ${user.name}`);
};
const currentUser: User = {
id: '456',
name: 'Bob',
email: 'bob@example.com'
};
displayUser(currentUser);Monorepo Setup Check
You've learned about setting up a tRPC monorepo. Which of the following is NOT a primary benefit of using a monorepo for a tRPC project?
Recap: tRPC Monorepo Setup
You've successfully explored how to set up a tRPC monorepo!
- We defined a monorepo as a single repository for multiple projects.
- Learned its benefits for tRPC, especially shared types.
- Used `pnpm Workspaces` to structure `server`, `client`, and `shared` packages.
- Understood how to link these packages to share code and types.
This foundation is key for building scalable and type-safe tRPC applications!
Frequently asked questions
Is the “Setting Up a tRPC Monorepo” lesson free?
Yes — the full text of “Setting Up a tRPC Monorepo” is free to read here on the web, and the tRPC End-to-End Type Safe APIs course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the tRPC End-to-End Type Safe APIs course, upgrade to CoddyKit PRO.
What will I learn in “Setting Up a tRPC Monorepo”?
Configure a monorepo workspace for your tRPC project, separating backend, frontend, and shared types. You practise tRPC End-to-End Type Safe APIs with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start tRPC End-to-End Type Safe APIs?
No prior experience is required. tRPC End-to-End Type Safe APIs on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Setting Up a tRPC Monorepo” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this tRPC End-to-End Type Safe APIs lesson?
Yes. Every tRPC End-to-End Type Safe APIs lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Setting Up a tRPC Monorepo
- Code Sharing and Reusability
- Extending tRPC Functionality
- Versioning and Publishing Shared tRPC Packages