Setting Up a Scalable Monorepo With Turborepo and PNPM

Setting Up a Scalable Monorepo With Turborepo and PNPM Managing multiple packages or apps in a single codebase can be painful without the right tools. Turborepo and PNPM make it fast, scalable, and efficient. In this article, you'll learn how to set up a production-ready monorepo from scratch. Step 1: Create the Monorepo We’ll start by creating a new directory and initializing it with PNPM and Turborepo: mkdir my-monorepo && cd my-monorepo pnpm init pnpm add -D turbo Now add this to your package.json: { "name": "my-monorepo", "version": "1.0.0", "private": true, "packageManager": "pnpm@8.0.0", "workspaces": ["apps/", "packages/"], "scripts": { "dev": "turbo run dev", "build": "turbo run build" } } Step 2: Create Folder Structure Organize your monorepo like this: my-monorepo/ ├── apps/ │ ├── web/ │ └── admin/ ├── packages/ │ ├── ui/ │ └── utils/ Inside each app/package, run pnpm init and add relevant dependencies. For example, inside apps/web you could scaffold a Next.js app: cd apps/web pnpm create next-app . --ts Step 3: Configure Turborepo Create a turbo.json at the root: { "$schema": "https://turborepo.org/schema.json", "pipeline": { "build": { "dependsOn": ["^build"], "outputs": [".next/", "dist/"] }, "dev": { "cache": false } } } Step 4: Use Local Packages Now you can import code from shared packages into your apps. For example, from packages/ui: // packages/ui/button.tsx export const Button = () => Click Me; In apps/web/pages/index.tsx: import { Button } from "ui/button"; export default function Home() { return ; } Step 5: Running the Monorepo Use Turborepo commands to start or build all apps efficiently: pnpm dev pnpm build Turborepo will run tasks in parallel and only rebuild what has changed — perfect for scale. Conclusion With Turborepo and PNPM, you get a blazing-fast monorepo experience that’s scalable, organized, and efficient. Perfect for projects with multiple apps or shared components. If this post helped you, consider supporting me: buymeacoffee.com/hexshift

Apr 13, 2025 - 13:16

Setting Up a Scalable Monorepo With Turborepo and PNPM

Managing multiple packages or apps in a single codebase can be painful without the right tools. Turborepo and PNPM make it fast, scalable, and efficient. In this article, you'll learn how to set up a production-ready monorepo from scratch.

Step 1: Create the Monorepo

We’ll start by creating a new directory and initializing it with PNPM and Turborepo:

mkdir my-monorepo && cd my-monorepo
pnpm init
pnpm add -D turbo

Now add this to your package.json:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "packageManager": "pnpm@8.0.0",
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  }
}

Step 2: Create Folder Structure

Organize your monorepo like this:

my-monorepo/
├── apps/
│   ├── web/
│   └── admin/
├── packages/
│   ├── ui/
│   └── utils/

Inside each app/package, run pnpm init and add relevant dependencies. For example, inside apps/web you could scaffold a Next.js app:

cd apps/web
pnpm create next-app . --ts

Step 3: Configure Turborepo

Create a turbo.json at the root:

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false
    }
  }
}

Step 4: Use Local Packages

Now you can import code from shared packages into your apps. For example, from packages/ui:

// packages/ui/button.tsx
export const Button = () => ;

In apps/web/pages/index.tsx:

import { Button } from "ui/button";

export default function Home() {
  return

Step 5: Running the Monorepo

Use Turborepo commands to start or build all apps efficiently:

pnpm dev
pnpm build

Turborepo will run tasks in parallel and only rebuild what has changed — perfect for scale.

Conclusion

With Turborepo and PNPM, you get a blazing-fast monorepo experience that’s scalable, organized, and efficient. Perfect for projects with multiple apps or shared components.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift