### Install Storybook dependencies

Source: https://turborepo.dev/guides/tools/storybook

Install @storybook/react into the specific package where stories are now located.

```bash
pnpm add @storybook/react --filter=@repo/ui --save-dev
```

```bash
yarn workspace @repo/ui add @storybook/react --dev
```

```bash
npm install @storybook/react --workspace=@repo/ui --save-dev
```

```bash
cd packages/ui && bun install @storybook/react --dev
```

--------------------------------

### Install UI package dependencies

Source: https://turborepo.dev/guides/tools/tailwind

Commands to add the UI package and Tailwind configuration to the workspace.

```bash
pnpm add @repo/ui @repo/tailwind-config --save-dev --filter=@repo/ui --filter=web
```

```bash
yarn workspace web add @repo/ui @repo/tailwind-config --dev
yarn workspace @repo/ui add @repo/ui @repo/tailwind-config --dev
```

```bash
npm install @repo/ui @repo/tailwind-config --workspace=web --workspace=@repo/ui --save-dev
```

```bash
cd apps/web && bun install @repo/ui @repo/tailwind-config --dev
cd packages/ui && bun install @repo/ui @repo/tailwind-config --dev
```

--------------------------------

### Correct environment variable configuration

Source: https://turborepo.dev/messages/invalid-env-prefix

Example of the corrected configuration after removing the `$` prefix.

```json
{
  "globalEnv": ["MY_ENV_VAR"]
}
```

--------------------------------

### Correct package-level task configuration

Source: https://turborepo.dev/messages/unnecessary-package-task-syntax

This example shows the corrected configuration with the unnecessary package prefix removed.

```json
{
  "tasks": {
    "build": {
      "dependsOn": ["lint"]
    }
  }
}
```

--------------------------------

### Install oxfmt via package manager

Source: https://turborepo.dev/guides/tools/oxc

Add oxfmt as a development dependency to your workspace.

```bash
pnpm add --save-dev -w oxfmt
```

```bash
yarn add --dev oxfmt
```

```bash
npm install --save-dev oxfmt
```

```bash
bun add --dev oxfmt
```

--------------------------------

### Define root script in package.json

Source: https://turborepo.dev/messages/missing-root-task-in-turbo-json

Example of a root package.json script that invokes turbo.

```json
{
  "scripts": {
    "build": "turbo run build"
  }
}
```

--------------------------------

### Install oxlint via package manager

Source: https://turborepo.dev/guides/tools/oxc

Install the oxlint package as a development dependency in your repository.

```bash
pnpm add --save-dev -w oxlint
```

```bash
yarn add --dev oxlint
```

```bash
npm install --save-dev oxlint
```

```bash
bun add --dev oxlint
```

--------------------------------

### Travis CI configuration for various package managers

Source: https://turborepo.dev/guides/ci-vendors/travis-ci

Example .travis.yml configurations for pnpm, yarn, npm, and bun.

```yaml
language: node_js
node_js:
  - lts/*
cache:
  npm: false
  directories:
    - "~/.pnpm-store"
before_install:
  - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6.32.2
  - pnpm config set store-dir ~/.pnpm-store
install:
  - pnpm install
script:
  - pnpm build
script:
  - pnpm test
```

```yaml
language: node_js
node_js:
  - lts/*
install:
  - yarn
script:
  - yarn build
script:
  - yarn test
```

```yaml
language: node_js
node_js:
  - lts/*
install:
  - npm install
script:
  - npm run build
script:
  - npm run test
```

```yaml
language: node_js
node_js:
  - lts/*
cache:
  npm: false
  directories:
    - "~/.pnpm-store"
before_install:
  - curl -fsSL https://bun.sh/install | bash
install:
  - bun install
script:
  - bun run build
script:
  - bun run test
```

--------------------------------

### Install UI package into Storybook

Source: https://turborepo.dev/guides/tools/storybook

Add the local UI package as a dependency to the Storybook application.

```bash
pnpm add @repo/ui --filter=storybook
```

```bash
yarn workspace storybook add @repo/ui
```

```bash
npm install @repo/ui --workspace=storybook
```

```bash
cd apps/storybook && bun install @repo/ui
```

--------------------------------

### Configure topological dependencies in turbo.json

Source: https://turborepo.dev/messages/missing-root-task-in-turbo-json

Example of defining task dependencies in turbo.json.

```json
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}
```

--------------------------------

### Configure Filtered Installs for Vercel

Source: https://turborepo.dev/guides/ci-vendors/vercel

Set a custom install command in vercel.json to install only dependencies for the specific application being deployed.

```json
{
  "installCommand": "pnpm install --filter web..."
}
```

```json
{
  "installCommand": "yarn workspaces focus web"
}
```

```json
{
  "installCommand": "npm install --workspace=web"
}
```

```json
{
  "installCommand": "bun install --filter web"
}
```

--------------------------------

### Incorrect package-level task configuration

Source: https://turborepo.dev/messages/unnecessary-package-task-syntax

This example shows an invalid configuration where the package prefix is included in a package-specific turbo.json file.

```json
{
  "tasks": {
    "web#build": {
      "dependsOn": ["lint"]
    }
  }
}
```

--------------------------------

### Install Jest dependencies

Source: https://turborepo.dev/guides/tools/jest

Install Jest as a development dependency in specific packages using your preferred package manager.

```bash
pnpm add jest --save-dev --filter=@repo/ui --filter=web
```

```bash
yarn workspace web add jest --dev
yarn workspace @repo/ui add jest --dev
```

```bash
npm install jest --workspace=web --workspace=@repo/ui --save-dev
```

```bash
cd apps/web && bun install jest --dev
cd packages/ui && bun install jest --dev
```

--------------------------------

### Configure package-level Vitest

Source: https://turborepo.dev/guides/tools/vitest

Install the shared config and define the Vitest configuration within individual packages.

```json
{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest --watch"
  },
  "devDependencies": {
    "@repo/vitest-config": "workspace:*",
    "vitest": "latest"
  }
}
```

```ts
import { defineConfig } from "vitest/config";
import { sharedConfig } from "@repo/vitest-config";

export default defineConfig({
  ...sharedConfig,
  test: {
    ...sharedConfig.test,
    // Package-specific overrides if needed
  },
});
```

--------------------------------

### CircleCI configuration for package managers

Source: https://turborepo.dev/guides/ci-vendors/circleci

Example .circleci/config.yml files for different package managers. Ensure TURBO_UI is set to false to prevent terminal UI crashes.

```yaml
version: 2.1
orbs:
  node: circleci/node@5.0.2
workflows:
  test:
    jobs:
      - test
jobs:
  test:
    docker:
      - image: cimg/node:lts
    steps:
      - checkout
      - node/install-packages
      - run:
        command: npm i -g pnpm
        environment:
          TURBO_UI: "false"
      - run:
        command: pnpm build
        environment:
          TURBO_UI: "false"
      - run:
        command: pnpm test
        environment:
          TURBO_UI: "false"
```

```yaml
version: 2.1
orbs:
  node: circleci/node@5.0.2
workflows:
  test:
    jobs:
      - test
jobs:
  test:
    docker:
      - image: cimg/node:lts
    steps:
      - checkout
      - node/install-packages:
        pkg-manager: yarn
      - run:
        command: yarn build
        environment:
          TURBO_UI: "false"
      - run:
        command: yarn test
        environment:
          TURBO_UI: "false"
```

```yaml
version: 2.1
orbs:
  node: circleci/node@5.0.2
workflows:
  test:
    jobs:
      - test
jobs:
  test:
    docker:
      - image: cimg/node:lts
    steps:
      - checkout
      - node/install-packages
      - run:
        command: npm run build
        environment:
          TURBO_UI: "false"

      - run:
        command: npm run test
        environment:
          TURBO_UI: "false"
```

```yaml
version: 2.1
orbs:
  node: circleci/node@5.0.2
workflows:
  test:
    jobs:
      - test
jobs:
  test:
    docker:
      - image: cimg/node:lts
    steps:
      - checkout
      - node/install-packages
      - run:
        command: npm i -g bun
        environment:
          TURBO_UI: "false"
      - run:
        command: bun run build
        environment:
          TURBO_UI: "false"
      - run:
        command: bun run test
        environment:
          TURBO_UI: "false"
```

--------------------------------

### Multi-stage Dockerfile for Next.js

Source: https://turborepo.dev/guides/tools/docker

A multi-stage Dockerfile that uses turbo prune to separate dependency installation from application building for improved caching.

```docker
FROM node:18-alpine AS base
RUN apk update
RUN apk add --no-cache libc6-compat
# Set working directory
WORKDIR /app

# ---
FROM base AS prepare
# Replace <your-major-version> with the major version installed in your repository. For example:
# RUN yarn global add turbo@^2
RUN yarn global add turbo@^<your-major-version>
COPY . .
# Add lockfile and package.json's of isolated subworkspace
# Generate a partial monorepo with a pruned lockfile for a target workspace.
# Assuming "web" is the name entered in the project's package.json: { name: "web" }
RUN turbo prune web --docker

# ---
FROM base AS builder
# First install the dependencies (as they change less often)
COPY --from=prepare /app/out/json/ .
RUN yarn install
# Build the project
COPY --from=prepare /app/out/full/ .

# Uncomment and use build args to enable remote caching
# ARG TURBO_TEAM
# ENV TURBO_TEAM=$TURBO_TEAM

# ARG TURBO_TOKEN
# ENV TURBO_TOKEN=$TURBO_TOKEN

RUN yarn turbo build

# ---
FROM base AS runner
# Don't run production as root for security reasons
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public

CMD node apps/web/server.js
```

--------------------------------

### Install TypeScript configuration package

Source: https://turborepo.dev/guides/tools/typescript

Add the shared TypeScript configuration package as a development dependency in your application's package.json.

```json
{
  "devDependencies": {
     "@repo/typescript-config": "workspace:*",
     "typescript": "latest"
  }
}
```

```json
{
  "devDependencies": {
     "@repo/typescript-config": "*",
     "typescript": "latest"
  }
}
```

--------------------------------

### Invalid environment variable configuration

Source: https://turborepo.dev/messages/invalid-env-prefix

Example of an invalid configuration using the deprecated `$` prefix in turbo.json.

```json
{
  "globalEnv": ["$MY_ENV_VAR"]
}
```

--------------------------------

### Initialize a Turborepo with Prisma

Source: https://turborepo.dev/guides/tools/prisma

Use this command to bootstrap a new Turborepo project pre-configured with Prisma.

```bash
npx create-turbo@latest -e with-prisma
```

--------------------------------

### Initialize shadcn/ui in a monorepo

Source: https://turborepo.dev/guides/tools/shadcn-ui

Run the initialization command and select the monorepo option when prompted.

```bash
pnpm dlx shadcn@canary init
```

```bash
npx shadcn@canary init
```

```bash
npx shadcn@canary init
```

```bash
bunx shadcn@canary init
```

--------------------------------

### Initialize Storybook application

Source: https://turborepo.dev/guides/tools/storybook

Initialize a new Storybook application within the created directory.

```bash
pnpm create storybook@latest
```

```bash
yarn create storybook@latest
```

```bash
npm create storybook@latest
```

```bash
bun create storybook@latest
```

--------------------------------

### Initialize Turborepo with Storybook template

Source: https://turborepo.dev/guides/tools/storybook

Use the design-system template to quickly scaffold a Turborepo project pre-configured with Storybook.

```bash
pnpm dlx create-turbo@latest -e design-system
```

```bash
yarn dlx create-turbo@latest -e design-system
```

```bash
npx create-turbo@latest -e design-system
```

```bash
bunx create-turbo@latest -e design-system
```

--------------------------------

### Initialize Biome scripts in package.json

Source: https://turborepo.dev/guides/tools/biome

Define the format and lint commands in the root package.json to enable Biome execution.

```json
{
  "scripts": {
    "format-and-lint": "biome check .",
    "format-and-lint:fix": "biome check . --write"
  }
}
```

--------------------------------

### Initialize a new Turborepo

Source: https://turborepo.dev/guides/tools/tailwind

Commands to create a new monorepo from scratch.

```bash
pnpm dlx create-turbo@latest
```

```bash
yarn dlx create-turbo@latest
```

```bash
npx create-turbo@latest
```

```bash
bunx create-turbo@latest
```

--------------------------------

### Initialize a Tailwind CSS Turborepo template

Source: https://turborepo.dev/guides/tools/tailwind

Use these commands to bootstrap a new Turborepo project pre-configured with Tailwind CSS.

```bash
pnpm dlx create-turbo@latest -e with-tailwind
```

```bash
yarn dlx create-turbo@latest -e with-tailwind
```

```bash
npx create-turbo@latest -e with-tailwind
```

```bash
bunx create-turbo@latest -e with-tailwind
```

--------------------------------

### Configure application styles and layout

Source: https://turborepo.dev/guides/tools/tailwind

Imports Tailwind and UI package styles into the application.

```css
@import "tailwindcss";
@import "@repo/tailwind-config";
```

```tsx
import "@repo/ui/styles.css";
import "./globals.css";
```

```js
import { postcssConfig } from "@repo/tailwind-config/postcss";

export default postcssConfig;
```

--------------------------------

### Create Storybook directory

Source: https://turborepo.dev/guides/tools/storybook

Create the directory structure for the Storybook application.

```bash
mkdir apps/storybook
cd apps/storybook
```

--------------------------------

### Share Playwright Utilities via Peer Dependencies

Source: https://turborepo.dev/guides/tools/playwright

Use peerDependencies in shared packages to access Playwright from the consuming package without redundant installations.

```json
{
  "name": "@repo/playwright-utilities",
  "peerDependencies": {
    "playwright": "workspace:*"
}
}
```

```json
{
  "name": "@repo/playwright-utilities",
  "peerDependencies": {
    "playwright": "*"
}
}
```

```json
{
  "name": "@repo/playwright-utilities",
  "peerDependencies": {
    "playwright": "*"
  }
}
```

```json
{
  "name": "@repo/playwright-utilities",
  "peerDependencies": {
    "playwright": "workspace:*"
  }
}
```

--------------------------------

### Root package.json configuration

Source: https://turborepo.dev/guides/ci-vendors/travis-ci

Define the build and test scripts using turbo in your root package.json.

```json
{
  "name": "my-turborepo",
  "scripts": {
    "build": "turbo run build",
    "test": "turbo run test"
  },
  "devDependencies": {
    "turbo": "latest"
  }
}
```

--------------------------------

### Configure package exports

Source: https://turborepo.dev/guides/tools/typescript

Define entrypoints in package.json to allow other packages to consume the compiled code.

```json
{
  "exports": {
    "./*": {
      "types": "./src/*.ts",
      "default": "./dist/*.js"
    }
  }
}
```

--------------------------------

### Add a component to the monorepo

Source: https://turborepo.dev/guides/tools/shadcn-ui

Use the add command to include specific components in your project.

```bash
pnpm dlx shadcn@canary add [COMPONENT]
```

```bash
npx shadcn@canary add [COMPONENT]
```

```bash
npx shadcn@canary add [COMPONENT]
```

```bash
bunx shadcn@canary add [COMPONENT]
```

--------------------------------

### Create a Dockerfile for an application

Source: https://turborepo.dev/guides/tools/docker

This Dockerfile copies the necessary package files and source code to build and run the API application.

```docker
FROM node:16

WORKDIR /usr/src/app

# Copy root package.json and lockfile
COPY package.json ./
COPY package-lock.json ./

# Copy the api package.json
COPY apps/api/package.json ./apps/api/package.json

RUN npm install

# Copy app source
COPY . .

EXPOSE 8080

CMD [ "node", "apps/api/server.js" ]
```

--------------------------------

### Configure root Vitest projects

Source: https://turborepo.dev/guides/tools/vitest

Set up the root Vitest configuration to utilize the shared configuration package and define project roots.

```ts
import { defineConfig } from "vitest/config";
import { sharedConfig } from "@repo/vitest-config";

export default defineConfig({
  ...sharedConfig,
  projects: [
    {
      name: "packages",
      root: "./packages/*",
      test: {
        ...sharedConfig.test,
        // Project-specific configuration
      },
    },
  ],
});
```

--------------------------------

### Configure .gitlab-ci.yml for various package managers

Source: https://turborepo.dev/guides/ci-vendors/gitlab-ci

Pipeline configurations for GitLab CI using pnpm, yarn, npm, or bun.

```yaml
image: node:latest
stages:
  - build
build:
  stage: build
  before_script:
    - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6.32.2
    - pnpm config set store-dir .pnpm-store
  script:
    - pnpm install
    - pnpm build
    - pnpm test
  cache:
    key:
      files:
        - pnpm-lock.yaml
    paths:
      - .pnpm-store
```

```yaml
image: node:latest
stages:
  - build
build:
  stage: build
  script:
    - yarn install
    - yarn build
    - yarn test
  cache:
    paths:
      - node_modules/
      - .yarn
```

```yaml
image: node:latest
stages:
  - build
build:
  stage: build
  script:
    - npm install
    - npm run build
    - npm run test
```

```yaml
default:
  image: oven/bun:1.2
  cache:
    key:
      files:
        - bun.lock
    paths:
      - node_modules/
  before_script:
      - bun install

build:
script: - bun run build

test:
script: - bun run test
```

--------------------------------

### Configure Extensionless Subpath Imports

Source: https://turborepo.dev/guides/tools/typescript

Add fallback patterns to package.json to allow importing without explicit file extensions.

```json
{
  "imports": {
    "#*": [
      "./src/*",
      "./src/*.ts",
      "./src/*.tsx",
      "./src/*/index.ts",
      "./src/*/index.tsx"
    ]
  }
}
```

```tsx
import { Card } from "#card" // Uses fallback entries to resolve without an extension // [!code highlight]

export const Button = () => {
  return (
    <button>
      <Card />
    </button>
  )
}
```

--------------------------------

### Create a .dockerignore file

Source: https://turborepo.dev/guides/tools/docker

Prevents unnecessary files like node_modules from being copied into the Docker image.

```txt
node_modules
npm-debug.log
```

--------------------------------

### Configure unified quality scripts in package.json

Source: https://turborepo.dev/guides/tools/oxc

Combine linting and formatting scripts for unified quality control.

```json
{
  "scripts": {
    "lint": "oxlint .",
    "lint:fix": "oxlint --fix .",
    "format": "oxfmt --check",
    "format:fix": "oxfmt ."
  }
}
```

--------------------------------

### Configure turbo.json tasks

Source: https://turborepo.dev/guides/tools/vitest

Define task dependencies and persistence settings in the root turbo.json file.

```json
{
  "tasks": {
    "test": {
      "dependsOn": ["^test"]
    },
    "test:watch": {
      "cache": false,
      "persistent": true
    }
  }
}
```

--------------------------------

### Configure Storybook scripts

Source: https://turborepo.dev/guides/tools/storybook

Add dev and build scripts to the Storybook package.json.

```json
{
  "scripts": {
    "dev": "storybook dev -p 6006", // [!code highlight]
    "build": "storybook build" // [!code highlight]
  }
}
```

--------------------------------

### Define Buildkite pipeline steps

Source: https://turborepo.dev/guides/ci-vendors/buildkite

Pipeline configuration for running tests and builds using different package managers.

```yaml
steps:
  - label: ":test_tube: Test"
    command: |
      pnpm install
      pnpm test

  - label: ":hammer: Build"
    command: |
      pnpm install
      pnpm build
```

```yaml
steps:
  - label: ":test_tube: Test"
    command: |
      yarn
      yarn test

  - label: ":hammer: Build"
    command: |
      yarn
      yarn build
```

```yaml
steps:
  - label: ":test_tube: Test"
    command: |
      npm install
      npm test

  - label: ":hammer: Build"
    command: |
      npm install
      npm run build
```

```yaml
steps:
  - label: ":test_tube: Test"
    command: |
      bun install
      bun run test

  - label: ":hammer: Build"
    command: |
      bun install
      bun run build
```

--------------------------------

### Configure package.json for Turborepo

Source: https://turborepo.dev/guides/ci-vendors/github-actions

Define a build script in package.json to execute Turborepo tasks.

```json
{
  "name": "my-turborepo",
  "scripts": {
    "build": "turbo run build"
  },
  "devDependencies": {
    "turbo": "1.2.5"
  }
}
```

--------------------------------

### Define a Next.js ESLint configuration

Source: https://turborepo.dev/guides/tools/eslint

A sample configuration file for Next.js apps that extends shared configurations.

```js
/* Custom ESLint configuration for use with Next.js apps. */
module.exports = {
  extends: [
    "eslint-config-turbo",
    "eslint-config-next",
    // ...your other ESLint configurations
  ].map(require.resolve),
  // ...your other configuration
};
```

--------------------------------

### Add root lint script

Source: https://turborepo.dev/guides/tools/eslint

Create a script in the root package.json to execute the lint task across the workspace.

```json
{
  "scripts": {
    "lint": "turbo run lint"
  }
}
```

--------------------------------

### Execute Turborepo test tasks

Source: https://turborepo.dev/guides/tools/vitest

Run test tasks using global turbo commands or root package.json scripts.

```bash
turbo run test

turbo run test:watch
```

```json
{
  "scripts": {
    "test": "turbo run test",
    "test:watch": "turbo run test:watch"
  }
}
```

--------------------------------

### Define shared Vitest configuration package

Source: https://turborepo.dev/guides/tools/vitest

Create a dedicated package to house shared Vitest configurations, as individual projects cannot extend the root configuration directly when using Vitest Projects.

```json
{
  "name": "@repo/vitest-config",
  "version": "0.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  },
  "dependencies": {
    "vitest": "latest"
  },
  "devDependencies": {
    "@repo/typescript-config": "workspace:*",
    "typescript": "latest"
  }
}
```

```json
{
  "extends": "@repo/typescript-config/base.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules"]
}
```

```ts
export const sharedConfig = {
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./src/test/setup.ts"],
    // Other shared configuration
  },
};
```

--------------------------------

### Configure report task caching

Source: https://turborepo.dev/guides/tools/vitest

Set up the report task in the package-level turbo.json to depend on the staging step and track coverage blob inputs.

```json
{
  "extends": ["//"],
  "tasks": {
    "merge-blob-reports": {
      "dependsOn": ["build"],
      "inputs": [
        "$TURBO_DEFAULT$",
        "$TURBO_ROOT$/apps/*/coverage/blob/**",
        "$TURBO_ROOT$/packages/*/coverage/blob/**"
      ],
      "outputs": ["coverage/merged-blob/**"]
    },
    "report": {
      "dependsOn": ["merge-blob-reports"],
      "inputs": [
        "$TURBO_DEFAULT$",
        "$TURBO_ROOT$/apps/*/coverage/blob/**",
        "$TURBO_ROOT$/packages/*/coverage/blob/**"
      ],
      "outputs": ["coverage/report/**"]
    }
  }
}
```

--------------------------------

### Upload pipeline definition

Source: https://turborepo.dev/guides/ci-vendors/buildkite

Step to upload the pipeline definition from the repository in the Buildkite dashboard.

```yaml
steps:
  - label: ":pipeline:"
    command: buildkite-agent pipeline upload
```

--------------------------------

### Configure unified quality tasks in turbo.json

Source: https://turborepo.dev/guides/tools/oxc

Orchestrate linting and formatting tasks with dependencies to ensure safe execution order.

```json
{
  "tasks": {
    "//#quality": {
      "dependsOn": ["//#lint", "//#format"]
    },
    "//#quality:fix": {
      "dependsOn": ["//#lint:fix", "//#format:fix"]
    },
    "//#lint": {},
    "//#lint:fix": {
      "cache": false
    },
    "//#format": {},
    "//#format:fix": {
      "dependsOn": ["//#lint:fix"],
      "cache": false
    }
  }
}
```

--------------------------------

### Register Biome as a root task in turbo.json

Source: https://turborepo.dev/guides/tools/biome

Configure the root tasks in turbo.json to allow execution via the turbo CLI.

```json
{
  "tasks": {
    "//#format-and-lint": {},
    "//#format-and-lint:fix": {
      "cache": false
    }
  }
}
```

--------------------------------

### Update turbo.json build outputs

Source: https://turborepo.dev/guides/tools/storybook

Add storybook-static to the build task outputs to enable caching.

```diff
{
  "tasks": {
    "build": {
      "outputs": [
        ".next/**",
        "!.next/cache/**",
        "!.next/dev/**",
    +       "storybook-static/**"
      ]
    }
  }
}
```

--------------------------------

### Configure Just-in-Time Package Subpath Imports

Source: https://turborepo.dev/guides/tools/typescript

Define imports in package.json to target source code directly for Just-in-Time packages.

```json
{
  "imports": {
    "#*": "./src/*"
  }
}
```

```tsx
import { MY_STRING } from "#utils.ts" // Uses .ts extension // [!code highlight]

export const Button = () => {
  return (
    <button>{MY_STRING}</button>
  )
}
```

--------------------------------

### Turborepo task configuration

Source: https://turborepo.dev/guides/ci-vendors/travis-ci

Configure task dependencies and outputs in turbo.json.

```json
{
  "$schema": "https://turborepo.dev/schema.json",
  "tasks": {
    "build": {
      "outputs": [".svelte-kit/**"],
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["^build"]
    }
  }
}
```

--------------------------------

### Run Vitest Projects via CLI

Source: https://turborepo.dev/guides/tools/vitest

Execute tests for specific projects or multiple projects using the --project flag.

```bash
# Run tests for a specific project
vitest run --project=web

# Run tests for multiple projects
vitest run --project=web --project=ui

# Watch mode for a specific project
vitest --watch --project=web
```

--------------------------------

### Configure Storybook application task

Source: https://turborepo.dev/guides/tools/storybook

Define the build:storybook task in the Storybook application's turbo.json.

```json
{
  "extends": ["//"],
  "tasks": {
    "build:storybook": {
      "dependsOn": ["^build:storybook"],
      "outputs": ["storybook-static/**"]
    }
  }
}
```

--------------------------------

### Configure Vitest Projects

Source: https://turborepo.dev/guides/tools/vitest

Define a root vitest.config.ts that aggregates multiple projects, each with its own specific test configuration.

```ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    // Root-level config applies to ALL projects
    globals: true,
    environment: "jsdom",
  },
  projects: [
    {
      name: "web",
      root: "./apps/web",
      test: {
        // Project-specific config
        include: ["src/**/*.test.ts"],
      },
    },
    {
      name: "ui",
      root: "./packages/ui",
      test: {
        include: ["src/**/*.spec.ts"],
      },
    },
  ],
});
```

--------------------------------

### Execute test tasks via CLI or root scripts

Source: https://turborepo.dev/guides/tools/jest

Run test tasks using the global turbo CLI or via scripts defined in the root package.json.

```bash
turbo test
```

```bash
turbo test:watch
```

```json
{
  "scripts": {
    "test": "turbo run test",
    "test:watch": "turbo run test:watch"
  }
}
```

--------------------------------

### Build Docker Image with Cache Credentials

Source: https://turborepo.dev/guides/tools/docker

Executes a Docker build while passing the required remote cache credentials as build arguments.

```bash
docker build -f apps/web/Dockerfile . --build-arg TURBO_TEAM="your-team-name" --build-arg TURBO_TOKEN="your-token" --no-cache
```

--------------------------------

### Configure GitHub Actions workflow with caching

Source: https://turborepo.dev/guides/ci-vendors/github-actions

Integrate actions/cache into a GitHub Actions workflow to persist the .turbo directory across CI runs.

```yaml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@v4

      - name: Cache turbo build setup # [!code highlight]
        uses: actions/cache@v4 # [!code highlight]
        with: # [!code highlight]
          path: .turbo # [!code highlight]
          key: ${{ runner.os }}-turbo-${{ github.sha }} # [!code highlight]
          restore-keys: | # [!code highlight]
            ${{ runner.os }}-turbo-

      - name: Setup Node.js environment
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build
```

--------------------------------

### Define Vitest scripts in package.json

Source: https://turborepo.dev/guides/tools/vitest

Configure test and test:watch scripts within individual workspace package.json files.

```json
{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest --watch"
  }
}
```

--------------------------------

### Configure formatting scripts in package.json

Source: https://turborepo.dev/guides/tools/oxc

Define scripts for checking and fixing code formatting in the root package.json.

```json
{
  "scripts": {
    "format": "oxfmt --check",
    "format:fix": "oxfmt ."
  }
}
```

--------------------------------

### Configure turbo.json tasks

Source: https://turborepo.dev/guides/tools/tailwind

Defines build and dev tasks to run component and style sheet processes in parallel.

```json
{
  "extends": ["//"],
  "tasks": {
    "build": {
      "dependsOn": ["build:styles", "build:components"]
    },
    "build:styles": {
      "outputs": ["dist/**"]
    },
    "build:components": {
      "outputs": ["dist/**"]
    },
    "dev": {
      "with": ["dev:styles", "dev:components"]
    },
    "dev:styles": {
      "cache": false,
      "persistent": true
    },
    "dev:components": {
      "cache": false,
      "persistent": true
    }
  }
}
```

--------------------------------

### Build Docker image from monorepo root

Source: https://turborepo.dev/guides/tools/docker

Executes the Docker build process targeting a specific application's Dockerfile from the monorepo root.

```bash
docker build -f apps/web/Dockerfile .
```

--------------------------------

### Configure Turbo caching for stories

Source: https://turborepo.dev/guides/tools/storybook

Exclude story files from the root build task and define a dedicated build:storybook task.

```json
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", "!**/*.stories.{tsx,jsx,mdx}"], // [!code highlight]
      "outputs": [".next/**", "!.next/cache/**", "!.next/dev/**"]
    },
    "build:storybook": {} // [!code highlight]
  }
}
```

--------------------------------

### Define merge and report scripts

Source: https://turborepo.dev/guides/tools/vitest

Add scripts to package.json to handle the staging of blob files and the execution of the Vitest merge command.

```json
{
  "scripts": {
    "merge-blob-reports": "node dist/scripts/merge-blob-reports.js",
    "report": "vitest --merge-reports coverage/merged-blob --passWithNoTests --coverage --coverage.provider=istanbul --coverage.reporter=html --coverage.reporter=text --coverage.reportsDirectory=coverage/report"
  }
}
```

--------------------------------

### Run build before linting

Source: https://turborepo.dev/guides/tools/oxc

Ensure compiled packages are built before running linting when using type-aware rules.

```bash
turbo run build --filter=./packages/* && turbo run lint
```

--------------------------------

### Add build outputs to .gitignore

Source: https://turborepo.dev/guides/tools/storybook

Exclude the Storybook build directory from source control.

```diff
+ storybook-static
```

--------------------------------

### Name the TypeScript configuration package

Source: https://turborepo.dev/guides/tools/typescript

Define the package name in package.json to allow other workspaces to reference this configuration.

```json
{
  "name": "@repo/typescript-config"
}
```

--------------------------------

### Define root test scripts

Source: https://turborepo.dev/guides/tools/vitest

Add scripts to the root package.json to enable running tests across projects.

```json
{
  "scripts": {
    "test:projects": "vitest run",
    "test:projects:watch": "vitest --watch"
  }
}
```

--------------------------------

### Configure persistent tasks in turbo.json

Source: https://turborepo.dev/guides/tools/jest

Disable caching and enable persistence for watch mode tasks in the root turbo.json configuration.

```json
{
  "tasks": {
    "test": {},
    "test:watch": {
      "cache": false, // [!code highlight]
      "persistent": true // [!code highlight]
    }
  }
}
```

--------------------------------

### GitHub Actions workflow for CI

Source: https://turborepo.dev/guides/ci-vendors/github-actions

Workflow configuration for running CI pipelines on GitHub Actions, tailored for different package managers.

```yaml
name: CI

on:
  push:
    branches: ["main"]
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    name: Build and Test
    timeout-minutes: 15
    runs-on: ubuntu-latest
    # To use Remote Caching, uncomment the next lines and follow the steps below.
    # env:
    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
    #  TURBO_TEAM: ${{ vars.TURBO_TEAM }}

    steps:
      - name: Check out code
        uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - uses: pnpm/action-setup@v3
        with:
          version: 8

      - name: Setup Node.js environment
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build

      - name: Test
        run: pnpm test
```

```yaml
name: CI

on:
  push:
    branches: ["main"]
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    name: Build and Test
    timeout-minutes: 15
    runs-on: ubuntu-latest
    # To use Remote Caching, uncomment the next lines and follow the steps below.
    # env:
    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
    #  TURBO_TEAM: ${{ vars.TURBO_TEAM }}

    steps:
      - name: Check out code
        uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - name: Setup Node.js environment
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'yarn'

      - name: Install dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Test
        run: yarn test
```

```yaml
name: CI

on:
  push:
    branches: ["main"]
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    name: Build and Test
    timeout-minutes: 15
    runs-on: ubuntu-latest
    # To use Remote Caching, uncomment the next lines and follow the steps below.
    # env:
    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
    #  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
    #  TURBO_REMOTE_ONLY: true

    steps:
      - name: Check out code
        uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - name: Setup Node.js environment
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Test
        run: npm run test
```

```yaml
name: CI

on:
  push:
    branches: ["main"]
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    name: Build and Test
    timeout-minutes: 15
    runs-on: ubuntu-latest
    # To use Remote Caching, uncomment the next lines and follow the steps below.
    # env:
    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
    #  TURBO_TEAM: ${{ vars.TURBO_TEAM }}

    steps:
      - name: Check out code
        uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - uses: oven-sh/setup-bun@v2

      - name: Setup Node.js environment
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: bun install

      - name: Build
        run: bun run build

      - name: Test
        run: bun run test
```

--------------------------------

### Enable blob reporter in shared Vitest configuration

Source: https://turborepo.dev/guides/tools/vitest

Configure the shared Vitest settings to output coverage data in blob format for later merging.

```ts
export const sharedConfig = {
  test: {
    reporters: ["default", "blob"],
    outputFile: {
      blob: "coverage/blob/report.json",
    },
    coverage: {
      provider: "istanbul" as const,
      enabled: true,
    },
  },
};
```

--------------------------------

### Define root report execution script

Source: https://turborepo.dev/guides/tools/vitest

Create a root-level script to orchestrate running tests followed by the report generation task.

```json
{
  "scripts": {
    "report": "turbo run test && turbo run report"
  }
}
```

--------------------------------

### Define build scripts

Source: https://turborepo.dev/guides/tools/typescript

Add build and development scripts to the package.json to enable compilation with tsc.

```json
{
  "scripts": {
    "dev": "tsc --watch",
    "build": "tsc"
  }
}
```

--------------------------------

### Configure VS Code Jest extension settings

Source: https://turborepo.dev/guides/tools/jest

Use the --log-prefix=none flag in your VS Code settings to ensure the Jest extension can parse output from Turborepo.

```json
{
  "jest.jestCommandLine": "turbo run test --log-prefix=none --"
}
```

--------------------------------

### Define component-level styles

Source: https://turborepo.dev/guides/tools/tailwind

Imports Tailwind CSS with a prefix to avoid style specificity issues.

```css
/* Component-level styles for the UI package */
@import "tailwindcss" prefix(ui);
```

--------------------------------

### Define test script in package.json

Source: https://turborepo.dev/guides/tools/vitest

Configure the test script within an individual package to run Vitest.

```json
{
  "scripts": {
    "test": "vitest run"
  },
  "devDependencies": {
    "vitest": "latest"
  }
}
```

--------------------------------

### Configure remote caching with secrets

Source: https://turborepo.dev/guides/ci-vendors/buildkite

Apply TURBO_TOKEN and TURBO_TEAM as environment variables using the Buildkite secrets plugin.

```yaml
steps:
  - label: ":test_tube: Test"
    command: |
      npm install
      npm test
    plugins:
      - secrets:
          variables:
            TURBO_TOKEN: TURBO_TOKEN
            TURBO_TEAM: TURBO_TEAM

  - label: ":hammer: Build"
    command: |
      npm install
      npm run build
    plugins:
      - secrets:
          variables:
            TURBO_TOKEN: TURBO_TOKEN
            TURBO_TEAM: TURBO_TEAM
```

--------------------------------

### Configure Dockerfile for Remote Caching

Source: https://turborepo.dev/guides/tools/docker

Injects TURBO_TEAM and TURBO_TOKEN as build arguments to enable remote cache access during the build process.

```docker
ARG TURBO_TEAM
ENV TURBO_TEAM=$TURBO_TEAM

ARG TURBO_TOKEN
ENV TURBO_TOKEN=$TURBO_TOKEN

RUN yarn turbo run build
```

--------------------------------

### Configure package.json for Tailwind

Source: https://turborepo.dev/guides/tools/tailwind

Defines exports and build scripts for Tailwind CSS within the UI package.

```json
{
  "exports": {
    "./styles.css": "./dist/index.css",
    "./*": "./dist/*.js"
  },
  "scripts": {
    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
    "build:components": "tsc",
    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
    "dev:components": "tsc --watch"
  },
  "devDependencies": {
    "@repo/tailwind-config": "workspace:*",
    "@tailwindcss/cli": "^4.1.5",
    "@tailwindcss/postcss": "^4.1.5",
    "autoprefixer": "^10.4.20",
    "tailwindcss": "^4.1.5"
  }
}
```

--------------------------------

### Configure shared Tailwind CSS package

Source: https://turborepo.dev/guides/tools/tailwind

Define the package configuration, shared styles, and optional PostCSS settings for a shared Tailwind package.

```json
{
  "name": "@repo/tailwind-config",
  "version": "0.0.0",
  "type": "module",
  "private": true,
  "exports": {
    ".": "./shared-styles.css",
    "./postcss": "./postcss.config.js"
  },
  "devDependencies": {
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.5"
  }
}
```

```css
@import "tailwindcss";

@theme {
  --blue-1000: #2a8af6;
  --purple-1000: #a853ba;
  --red-1000: #e92a67;
}
```

```javascript
export const postcssConfig = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
```

--------------------------------

### Register root task in turbo.json

Source: https://turborepo.dev/messages/missing-root-task-in-turbo-json

Registering a root task in turbo.json to allow other tasks to depend on it.

```json
{
  "tasks": {
    "//#build": {}
  }
}
```

--------------------------------

### Configure Compiled Package Subpath Imports

Source: https://turborepo.dev/guides/tools/typescript

Target built output directories for compiled packages using subpath imports.

```json
{
  "imports": {
    "#*": "./dist/*"
  }
}
```

```tsx
import { MY_STRING } from "#utils.js"; // Uses .js extension // [!code highlight]

export const Button = () => {
  return <button>{MY_STRING}</button>;
};
```

--------------------------------

### Define lint scripts in package.json

Source: https://turborepo.dev/guides/tools/oxc

Add lint and lint:fix scripts to the root package.json to execute oxlint across the project.

```json
{
  "scripts": {
    "lint": "oxlint .",
    "lint:fix": "oxlint --fix ."
  }
}
```

--------------------------------

### Define test task in turbo.json

Source: https://turborepo.dev/guides/tools/jest

Register the test task in the root turbo.json to enable caching and parallelization.

```json
{
  "tasks": {
    "test": {}
  }
}
```

--------------------------------

### Configure package-level lint script

Source: https://turborepo.dev/guides/tools/eslint

Add the lint script to the package.json of each package requiring ESLint.

```json
{
  "scripts": {
    "lint": "eslint ."
  }
}
```

--------------------------------

### Correct task declaration for single-package workspace

Source: https://turborepo.dev/messages/package-task-in-single-package-workspace

Remove the package prefix from the task name to resolve the error in a single-package repository.

```json
{
  "tasks": {
    "build": {
      "cache": true
    }
  }
}
```

--------------------------------

### Define the ESLint config package.json

Source: https://turborepo.dev/guides/tools/eslint

The package manifest for the shared ESLint configuration package, listing necessary dependencies.

```json
{
  "name": "@repo/eslint-config",
  "version": "0.0.0",
  "private": true,
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-turbo": "latest",
    "eslint-config-next": "latest"
  }
}
```

--------------------------------

### Import shared ESLint configuration

Source: https://turborepo.dev/guides/tools/eslint

Import and export the shared configuration in your application's eslint.config.js file.

```js
import { nextJsConfig } from "@repo/eslint-config/next-js";

/** @type {import("eslint").Linter.Config} */
export default nextJsConfig;
```

```js
import { nextJsConfig } from "@repo/eslint-config/next-js";

/** @type {import("eslint").Linter.Config} */
export default [
  ...nextJsConfig,
  // Other configurations
];
```

--------------------------------

### Register root tasks in turbo.json

Source: https://turborepo.dev/guides/tools/oxc

Configure the lint tasks in turbo.json, disabling caching for the fix command.

```json
{
  "tasks": {
    "//#lint": {},
    "//#lint:fix": {
      "cache": false
    }
  }
}
```

--------------------------------

### Prune a workspace for Docker

Source: https://turborepo.dev/guides/tools/docker

Generates a pruned monorepo subset in the ./out directory, including only necessary workspaces and a pruned lockfile.

```bash
turbo prune api --docker
```