Frontend Academy · Lesson

Turbo: Caching and Task Pipelines

Define a turbo.json pipeline, configure task dependencies with dependsOn, enable remote caching to share cached outputs across machines.

Turbo: Caching and Task Pipelines is a free Frontend Academy lesson on CoddyKit — lesson 4 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.

Turborepo Recap

Turborepo (now just Turbo) is the high-performance build orchestrator for JavaScript monorepos. It runs tasks across packages in parallel, caches outputs by hash, and skips work when inputs haven't changed.

Why Caching Matters

In a monorepo with 20 packages, running 'test' on every push is expensive. If only one package changed, Turbo reruns its test and replays cached output for the other 19 — turning minutes into seconds.

How Hashing Works

Turbo hashes: source files (input glob), dependencies (package.json + lockfile), environment variables you declare, the task's own config. Same hash = identical work = cache hit.

turbo.json — The Pipeline

Declare tasks and their relationships in turbo.json.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "package.json"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "test/**", "package.json"]
    },
    "lint": { "inputs": ["**/*.{ts,tsx,js,jsx}", ".eslintrc*"] },
    "dev": { "cache": false, "persistent": true }
  }
}

inputs and outputs

inputs: files that contribute to the hash. outputs: files Turbo should cache and restore. Get these right and your cache hit rate jumps to 90%+.

dependsOn

['^build']: build dependencies first. ['lint']: run lint before this task in the same package. ['^build', 'lint']: combine.

cache: false and persistent: true

Tasks like dev never cache (interactive, long-running) and persist (Turbo keeps them alive). Set both for dev servers.

Running Tasks

Use the Turbo CLI.

npx turbo run build
npx turbo run test lint
npx turbo run build --filter=web
npx turbo run build --filter=web... --concurrency=10

Cache Locations

Local cache lives in node_modules/.cache/turbo by default. Each run produces logs + the captured outputs. Cache hits print: 'cache hit, replaying logs'.

Remote Caching

Push the cache to a remote store so CI and teammates share hits. Sign up free via turbo login (Vercel Remote Cache) or self-host.

npx turbo login
npx turbo link    # link to a Vercel remote cache

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

Self-Hosted Remote Cache

OSS alternatives: turborepo-remote-cache (Node), turbo-cache-server (Go). Deploy on your infra, set TURBO_API env var.

Environment Variable Inputs

Declare which env vars affect outputs — Turbo treats them as inputs so changing them busts the cache.

// turbo.json
{
  "tasks": {
    "build": {
      "env": ["NODE_ENV", "VITE_API_URL"],
      "outputs": ["dist/**"]
    }
  },
  "globalEnv": ["GITHUB_SHA"]
}

Filtering

Run a task for specific packages or those affected by changes.

# Specific package and its dependencies:
turbo run build --filter=web...

# Packages that depend on shared/ui:
turbo run test --filter='...@repo/ui'

# Changed since main:
turbo run lint --filter='[origin/main]'

# Combine:
turbo run build --filter=web...[origin/main]

DRY_RUN and Profiling

--dry=json prints the task graph without running. --profile generates a Chrome-DevTools-style trace.

turbo run build --dry=json | jq
turbo run build --profile=trace.json
# open chrome://tracing and load trace.json

Common Pitfalls

1) Forgetting to declare outputs (Turbo won't cache them). 2) Forgetting an env var that affects the build. 3) Caching dev servers (set cache: false). 4) Not using --frozen-lockfile in CI (lockfile drift can change hashes).

Quick Check

What two fields in a Turbo task config determine whether outputs can be replayed from cache?

Recap: Turbo

Hash-based local + remote caching for monorepo tasks. turbo.json declares tasks with dependsOn, inputs, outputs, env. cache: false + persistent: true for dev servers. Filter tasks with --filter=web..., changed-since=[origin/main]. Remote cache (Vercel or self-hosted) shares hits across CI and team. Profile with --profile. Get inputs/outputs right for max hit rate.

Frequently asked questions

Is the “Turbo: Caching and Task Pipelines” lesson free?

Yes — the full text of “Turbo: Caching and Task Pipelines” 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 “Turbo: Caching and Task Pipelines”?

Define a turbo.json pipeline, configure task dependencies with dependsOn, enable remote caching to share cached outputs across machines. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Turbo: Caching and Task Pipelines” 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

← Back to Frontend Academy