Een tRPC-monorepo instellen
Configureer een monorepo-werkruimte voor uw tRPC-project en scheid backend, frontend en gedeelde typen.
Een tRPC-monorepo instellen is een gratis tRPC API's met typeveiligheid van begin tot eind-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject tRPC API's met typeveiligheid van begin tot eind. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Wat is een monorepo?
Welkom bij het instellen van een tRPC-project in een monorepo! Maar wat is een monorepo precies?
- Een monorepo is één repository met meerdere afzonderlijke projecten.
- In tegenstelling tot een polyrepo (meerdere repositories voor meerdere projecten) staat alles bij elkaar.
- Je kunt het zien als een grote map met veel kleinere, verwante projecten.
Het is een krachtige manier om complexe applicaties te beheren.
Waarom monorepo's voor tRPC?
Monorepo's bieden unieke voordelen wanneer je met tRPC werkt:
- Gedeelde types: deel TypeScript-types eenvoudig tussen je frontend en backend.
- Atomische commits: wijzigingen aan de API en de client die deze gebruikt, kunnen samen worden vastgelegd.
- Eenvoudiger refactoren: hernoem een type op één plek en je editor werkt het overal bij.
- Consistente hulpmiddelen: deel configuraties voor linters, formatters en buildtools.
Dankzij deze aanpak wordt end-to-end-typesafety nog robuuster.
Een monorepo-tool kiezen
Om een monorepo effectief te beheren heb je een werkruimtemanager nodig. Deze tools helpen je interne pakketten aan elkaar te koppelen.
Populaire opties zijn:
- pnpm Workspaces: efficiënt en gebruikt symbolische koppelingen voor afhankelijkheden.
- Yarn Workspaces: een veelgebruikte keuze die in Yarn is ingebouwd.
- Nx: een krachtig buildsysteem en monorepo-tool.
- Turborepo: richt zich op snelle builds en caching.
In deze les gebruiken we pnpm Workspaces vanwege de eenvoud en efficiëntie.
De monorepo initialiseren
Maak eerst een nieuwe map voor je monorepo en initialiseer een `package.json`.
Maak vervolgens een `pnpm-workspace.yaml`-bestand om de hoofdlocaties van je werkruimtes te definiëren. Hiermee vertel je pnpm waar het je deelprojecten kan vinden.
mkdir trpc-monorepo
cd trpc-monorepo
pnpm init
# pnpm-workspace.yaml
packages:
- 'packages/*'De map 'packages' structureren
De map `packages` bevat al je afzonderlijke projecten (of 'apps'). Meestal hebben we:
- server: je tRPC-backend.
- client: je frontendapplicatie (bijvoorbeeld React of Next.js).
- shared: een pakket voor gedeelde hulpprogramma's, types en Zod-schema's die door `server` en `client` worden gebruikt.
Laten we deze basismappen maken.
mkdir -p packages/server
mkdir -p packages/client
mkdir -p packages/sharedHet pakket 'server' instellen
In `packages/server` stellen we een basisproject voor Node.js in. Het heeft een eigen `package.json` en `tsconfig.json` nodig.
In `tsconfig.json` geef je de compilatieopties voor je backendcode op.
// 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"
}
}Het pakket 'client' instellen
Op dezelfde manier bevat `packages/client` je frontendapplicatie. Dit voorbeeld toont een eenvoudige React-configuratie, maar het kan ook Next.js of een ander framework zijn.
Ook dit pakket heeft een eigen `package.json` en `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" }]
}Het pakket 'shared' maken
De map `packages/shared` is cruciaal voor tRPC-monorepo's. Deze bevat types en definities die zowel je `server` als je `client` nodig hebben.
Zo zorg je voor end-to-end-typesafety met één bron van waarheid voor je 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"]
}Gedeelde types koppelen
Nu we ons pakket `shared` hebben, moeten we `server` en `client` hierover informeren.
Voeg `"shared": "workspace:*"` toe aan de `dependencies` van de bestanden `package.json` van zowel `server` als `client`.
Voer daarna `pnpm install` uit in de hoofdmap van de monorepo om ze aan elkaar te koppelen.
// 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 installPraktisch voorbeeld: een type delen
Laten we bekijken hoe het delen van types werkt. We definiëren een type `User` in `shared` en gebruiken het in een fragment van een nagebootste backend en frontend.
Dit laat het belangrijkste voordeel zien: types één keer definiëren en ze overal gebruiken.
// 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);Controle van de monorepo-instellingen
Je hebt geleerd hoe je een tRPC-monorepo instelt. Welke van de volgende opties is GEEN belangrijk voordeel van het gebruik van een monorepo voor een tRPC-project?
Samenvatting: tRPC-monorepo instellen
Je hebt onderzocht hoe je een tRPC-monorepo instelt!
- We hebben een monorepo gedefinieerd als één repository voor meerdere projecten.
- Je hebt de voordelen voor tRPC geleerd, vooral het delen van types.
- We hebben `pnpm Workspaces` gebruikt om de pakketten `server`, `client` en `shared` te structureren.
- Je hebt geleerd hoe je deze pakketten koppelt om code en types te delen.
Deze basis is essentieel voor het bouwen van schaalbare en typeveilige tRPC-applicaties!
Leer tRPC API's met typeveiligheid van begin tot eind met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 10
- Lessen
- 40
Veelgestelde vragen
Is de les “Een tRPC-monorepo instellen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad tRPC API's met typeveiligheid van begin tot eind, waaronder “Een tRPC-monorepo instellen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Wat leer ik in “Een tRPC-monorepo instellen”?
Configureer een monorepo-werkruimte voor uw tRPC-project en scheid backend, frontend en gedeelde typen. Je oefent met tRPC API's met typeveiligheid van begin tot eind door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met tRPC API's met typeveiligheid van begin tot eind te beginnen?
Ervaring vooraf is niet nodig. tRPC API's met typeveiligheid van begin tot eind op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Een tRPC-monorepo instellen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over tRPC API's met typeveiligheid van begin tot eind?
Ja. Elke les over tRPC API's met typeveiligheid van begin tot eind bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een tRPC-monorepo instellen
- Code delen en hergebruiken
- tRPC-functionaliteit uitbreiden
- Gedeelde tRPC-packages versies geven en publiceren