PricingLoginStart free
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.

Lesson 4 of 417 steps

Turbo: Caching and Task Pipelines is a free Frontend Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
41
Lessons
163
Start learning freeView the full course

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. 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. The Frontend Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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

  1. Vite: Plugin System and SSR Mode
  2. esbuild: Speed and Limitations
  3. pnpm Workspaces for Monorepos
  4. Turbo: Caching and Task Pipelines
← Back to Frontend Academy