DEV Community

Atlas Whoff
Atlas Whoff

Posted on

Turborepo: Monorepo Build Caching That Actually Saves Time

#monorepo #typescript #devops #javascript

Turborepo: Monorepo Build Caching That Actually Saves Time

Running npm run build across 10 packages when only 2 changed wastes minutes per CI run. Turborepo caches task outputs and replays them — unchanged packages restore from cache in milliseconds.

Setup 

npx create-turbo@latest
# Or add to existing monorepo:
npm install turbo --save-dev
Enter fullscreen mode Exit fullscreen mode

turbo.json 

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

How Caching Works

Turbo creates a hash from:

  • Source files in the package
  • Environment variables
  • The task's dependencies' hashes

If the hash matches a previous run, Turbo restores the cached output instead of rebuilding. First run: 3 minutes. Subsequent unchanged runs: 2 seconds.

Remote Caching

Share cache across team members and CI:

# Authenticate with Vercel (free)
npx turbo login
npx turbo link

# CI — set these env vars
TURBO_TOKEN=your_vercel_token
TURBO_TEAM=your_team_slug
Enter fullscreen mode Exit fullscreen mode

Now if a coworker already built a package, your CI gets the cached result.

Running Tasks 

# Build all packages (respects dependency order)
turbo build

# Build only affected packages
turbo build --filter='[HEAD^1]'

# Run specific package
turbo build --filter=@myapp/web

# Parallel dev servers
turbo dev
Enter fullscreen mode Exit fullscreen mode

Package Structure 

apps/
  web/          # Next.js app
  api/          # Express API
packages/
  ui/           # Shared React components
  config/       # Shared tsconfig, eslint
  database/     # Prisma client
turbo.json
package.json
Enter fullscreen mode Exit fullscreen mode

Workspace Dependencies 

// apps/web/package.json
{
  "dependencies": {
    "@myapp/ui": "*",
    "@myapp/database": "*"
  }
}
Enter fullscreen mode Exit fullscreen mode

Turbo knows web depends on ui and database — it builds them first, in parallel where possible.

CI Integration 

# GitHub Actions
- name: Build
  run: turbo build
  env:
    TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
    TURBO_TEAM: ${{ vars.TURBO_TEAM }}
Enter fullscreen mode Exit fullscreen mode

The AI SaaS Starter Kit ships as a Turborepo monorepo with shared UI components, Prisma package, and pre-configured remote caching. $99 at whoffagents.com.

Top comments (0)