Frontend Academy · Lesson

Monorepo Setup with Turborepo

Organise multiple apps and shared packages in a single repo, define a Turbo pipeline, and cache builds to only rebuild what changed.

Monorepo Setup with Turborepo is a free Frontend 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 Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Monorepo?

A single Git repository housing multiple projects (apps, libraries) that share code. Examples: web app + mobile app + shared UI lib + shared utils in one repo. Easier code sharing, atomic cross-cutting changes, single CI pipeline.

Why Turborepo?

Turborepo is a high-performance build system for JavaScript monorepos. It caches task outputs, parallelises across packages, and only rebuilds what changed. Built by Vercel.

Setting Up Turborepo

Use the official starter.

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

package.json with Workspaces

Root package.json declares workspaces — npm/yarn/pnpm symlinks them so apps can import packages by name.

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — The Pipeline

Define tasks (build, lint, test, dev) and their dependencies between packages.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

dependsOn Explained

^build means: before building this package, build all its workspace dependencies. So if app/web depends on packages/ui, ui builds first.

Running Tasks

Run a task across the whole monorepo. Turbo runs in topological order with parallelism.

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

Caching Outputs

Turbo hashes inputs (source files + dependencies + env) and caches outputs. Re-running with no changes is instant — Turbo replays the cached output without re-executing.

Remote Caching

Push the cache to a remote (Vercel Remote Cache, self-hosted) so CI machines and teammates share it — first developer to build pays the cost, everyone else gets a cache hit.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

Filtering with --filter

Run a task only for matching packages.

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

Internal Packages

Packages in packages/ import each other by name. Reference them in dependencies as "@repo/ui": "*" (with pnpm: workspace:*).

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "*",
    "@repo/utils": "*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

CI Tips

Use turbo run build --filter=...[origin/main] in CI to build only what changed since the main branch. Combined with remote cache, builds drop from minutes to seconds on unchanged packages.

Quick Check

What does the ^build entry in a Turbo task's dependsOn array mean?

Recap: Turborepo

JavaScript monorepo system: apps/ + packages/ structure with workspaces. turbo.json defines tasks and dependsOn relationships. ^build = build deps first. Hash-based local cache makes repeated work instant. Remote cache shares hits across team and CI. --filter targets subsets. Use changed-since for fast PR CI.

Frequently asked questions

Is the “Monorepo Setup with Turborepo” lesson free?

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

What will I learn in “Monorepo Setup with Turborepo”?

Organise multiple apps and shared packages in a single repo, define a Turbo pipeline, and cache builds to only rebuild what changed. You practise Frontend 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 Frontend Academy?

No prior experience is required. Frontend 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 “Monorepo Setup with Turborepo” 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 Frontend Academy lesson?

Yes. Every Frontend 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

Atomic Design: Atoms Molecules Organisms
Monorepo Setup with Turborepo
Micro-frontends: Module Federation
Feature-Based Folder Structure

← Back to Frontend Academy