Настройка монорепозитория tRPC
Настройте рабочее пространство монорепозитория для проекта tRPC, разделив серверную часть, клиентскую часть и общие типы.
«Настройка монорепозитория tRPC» — бесплатный урок tRPC End-to-End Type Safe APIs на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения tRPC End-to-End Type Safe APIs, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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!
Часто задаваемые вопросы
Урок «Настройка монорепозитория tRPC» бесплатный?
Да — полный текст урока «Настройка монорепозитория tRPC» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс tRPC End-to-End Type Safe APIs, подпишись на CoddyKit PRO. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.
Чему я научусь в уроке «Настройка монорепозитория tRPC»?
Настройте рабочее пространство монорепозитория для проекта tRPC, разделив серверную часть, клиентскую часть и общие типы. Ты практикуешь tRPC End-to-End Type Safe APIs с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать tRPC End-to-End Type Safe APIs?
Предыдущий опыт не требуется. tRPC End-to-End Type Safe APIs на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Настройка монорепозитория tRPC»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке tRPC End-to-End Type Safe APIs?
Да. Каждый урок tRPC End-to-End Type Safe APIs включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка монорепозитория tRPC
- Совместное использование и повторное применение кода
- Расширение возможностей tRPC
- Версионирование и публикация общих пакетов tRPC