0Pricing
TypeScript Academy · Lesson

pnpm Workspaces with TypeScript

Configure a monorepo with pnpm and shared tsconfig.

pnpm Workspaces with TypeScript is a free TypeScript Academy lesson on CoddyKit — lesson 2 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 TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are pnpm Workspaces?

pnpm workspaces let you manage multiple packages in a single repository with a shared node_modules structure, reducing disk usage and enabling cross-package imports.

# pnpm-workspace.yaml
packages:
  - "packages/*"
  - "apps/*"

Creating the Workspace Structure

A typical pnpm monorepo has packages/ for shared libraries and apps/ for deployable applications.

monorepo/
├── pnpm-workspace.yaml
├── package.json          # root
├── packages/
│   ├── core/             # shared logic
│   └── ui/               # shared components
└── apps/
    └── web/              # Next.js app

Root tsconfig.json

The root tsconfig sets base options and references all workspace packages.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "packages/core" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

Package-Level tsconfig

Each package extends the root config and sets its own composite and outDir.

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Installing Cross-Package Dependencies

Use pnpm add with the workspace protocol to link packages within the monorepo.

# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web

# package.json entry:
# "@myapp/core": "workspace:*"

TypeScript Path Resolution

Add paths aliases in the root tsconfig so TypeScript resolves workspace packages to their source during development.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"],
      "@myapp/ui": ["./packages/ui/src/index.ts"]
    }
  }
}

Building All Packages

Use tsc --build from the root to build all composite packages in dependency order.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Running Scripts Across Packages

pnpm -r (recursive) or --filter runs scripts in all matching packages.

# Run tests in all packages
pnpm -r test

# Run only in packages/core
pnpm --filter @myapp/core test

Shared ESLint and Prettier Config

Keep linting configs in a shared package and extend them in each package to ensure consistent code style across the monorepo.

// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };

Turborepo Integration

Add Turborepo to cache and parallelize build/test/lint tasks, using the pnpm workspace graph for dependency ordering.

npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -w

Recap: pnpm Workspaces with TypeScript

pnpm workspaces + TypeScript project references create a powerful monorepo setup: shared node_modules, cross-package imports via workspace:*, and fast builds with tsc --build.

Quick Check

Which file defines which directories are pnpm workspace packages?

What You Learned

pnpm workspaces with TypeScript project references give you an efficient monorepo with shared node_modules, workspace protocol cross-linking, and incremental builds. Add Turborepo for caching and parallelization.

Frequently asked questions

Is the “pnpm Workspaces with TypeScript” lesson free?

Yes — the full text of “pnpm Workspaces with TypeScript” is free to read here on the web, and the TypeScript Academy 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 TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “pnpm Workspaces with TypeScript”?

Configure a monorepo with pnpm and shared tsconfig. You practise TypeScript Academy 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 TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “pnpm Workspaces with TypeScript” 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 TypeScript Academy lesson?

Yes. Every TypeScript Academy 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

  1. TypeScript Project References Explained
  2. pnpm Workspaces with TypeScript
  3. Shared Types Package Strategy
  4. Incremental Builds and Cache in Monorepos
← Back to TypeScript Academy