Configurer un monorepo tRPC
Configurez un espace de travail monorepo pour votre projet tRPC en séparant les types du serveur, du client et les types partagés.
Configurer un monorepo tRPC est une leçon tRPC End-to-End Type Safe APIs gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage tRPC End-to-End Type Safe APIs, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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!
Apprends tRPC End-to-End Type Safe APIs avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 10
- Leçons
- 40
Questions Fréquemment Posées
La leçon « Configurer un monorepo tRPC » est-elle gratuite ?
Oui — le texte complet de « Configurer un monorepo tRPC » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours tRPC End-to-End Type Safe APIs, passe à CoddyKit PRO. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configurer un monorepo tRPC » ?
Configurez un espace de travail monorepo pour votre projet tRPC en séparant les types du serveur, du client et les types partagés. Tu pratiques tRPC End-to-End Type Safe APIs avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer tRPC End-to-End Type Safe APIs ?
Aucune expérience préalable n'est requise. tRPC End-to-End Type Safe APIs sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Configurer un monorepo tRPC » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon tRPC End-to-End Type Safe APIs ?
Oui. Chaque leçon tRPC End-to-End Type Safe APIs inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer un monorepo tRPC
- Partage et réutilisation du code
- Étendre les fonctionnalités de tRPC
- Versionnage et publication de paquets tRPC partagés