0Pricing
tRPC End-to-End Type Safe APIs · Ders

tRPC Monorepo Kurulumu

tRPC projeniz için arka ucu, ön ucu ve paylaşılan türleri ayıran bir monorepo çalışma alanı yapılandırın.

tRPC Monorepo Kurulumu, CoddyKit'te ücretsiz bir tRPC End-to-End Type Safe APIs dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, tRPC End-to-End Type Safe APIs öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. tRPC End-to-End Type Safe APIs kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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/shared

Setting 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 install

Practical 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!

Sıkça Sorulan Sorular

“tRPC Monorepo Kurulumu” dersi ücretsiz mi?

Evet — “tRPC Monorepo Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve tRPC End-to-End Type Safe APIs kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. tRPC End-to-End Type Safe APIs kursu toplamda 4 dersten oluşur.

“tRPC Monorepo Kurulumu” dersinde ne öğreneceğim?

tRPC projeniz için arka ucu, ön ucu ve paylaşılan türleri ayıran bir monorepo çalışma alanı yapılandırın. tRPC End-to-End Type Safe APIs ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

tRPC End-to-End Type Safe APIs öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te tRPC End-to-End Type Safe APIs, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“tRPC Monorepo Kurulumu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu tRPC End-to-End Type Safe APIs dersinde kod yazıp çalıştırabilir miyim?

Evet. Her tRPC End-to-End Type Safe APIs dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. tRPC Monorepo Kurulumu
  2. Kod Paylaşımı ve Yeniden Kullanılabilirlik
  3. tRPC İşlevselliğini Genişletme
  4. Paylaşılan tRPC Paketlerini Sürümlendirme ve Yayımlama
← tRPC End-to-End Type Safe APIs Sayfasına Dön