[RESEARCH] Javascript/build system: turborepo

[developerasun]

topic : understanding turborepo build system in software development

read this

Turborepo is a build system for JavaScript and TypeScript monorepos: codebases containing multiple projects, often using multiple frameworks, in a single unified code repository. Monorepos have many advantages, but they require appropriate tooling in order to scale. Turborepo leverages advanced build system ideas and techniques to speed up development, without the configuration and complexity. By abstracting the configurations, scripts, and tooling, Turborepo allows you to start shipping fast.

You can incrementally adopt Turborepo for new and existing projects. To create a new monorepo, get started with:

npx create-turbo@latest

Add Turborepo to your existing monorepo

turbo works with Yarn, npm, and pnpm.

Configure workspaces

turbo is built on top of Workspaces, a way of managing multiple packages from within a single monorepo package. Turborepo is compatible with the workspace implementations from all package managers. For more information on managing your Turborepo workspaces, see the Workspaces documentation.

You can configure workspaces any way you want, but a common folder structure example is keeping applications in the /apps folder and packages in the /packages folder. The configuration of these folders is different for each package manager.

# Specify your packages in pnpm-workspace.yaml.

packages:
  - "packages/*"
  - "apps/*"

reference

• https://turborepo.org/docs/getting-started

[developerasun]

Install turbo

Add turbo as a development dependency in the root of your monorepo.

pnpm add turbo -Dw

The turbo package is a little shell that will install the proper turbo-- package for you operating system and architecture.

Create turbo.json

In the root of your monorepo, create an empty file named turbo.json. This will hold the configuration for Turborepo. If your git repo's base branch is not origin/master, then you need to specify a baseBranch too. For example, origin/main.

{
  "$schema": "https://turborepo.org/schema.json",
  "baseBranch": "origin/main"
}

[developerasun]

installation with pnpm

1. go to project root
2. run below command

# deprecated
pnpx create-turbo@latest
# command
pnpm dlx create-turbo@latest

[developerasun]

Managing dependencies

To manage dependencies within workspaces in your monorepo, you will need to run commands that will only manage the dependencies of each workspace rather than for the entire monorepo.

pnpm add <package> --filter <workspace>

For example,

# install 
pnpm add react --filter web // pnpm add react --filter web
# uninstall
pnpm uninstall <package> --filter <workspace> // pnpm uninstall react --filter web
# update
pnpm up <package> --filter <workspace> // pnpm up react --filter web

# inject dev dependency to project (in project root)
pnpm install -D (package-name-in-package.json) (project-name-in-package.json)

[developerasun]

Filtering Packages

Filtering packages allows you to target your tasks to only the packages you care about. Turborepo supports a pnpm-like --filter flag that allows you to select the packages that will act as "entry points" into your monorepo's package/task graph. You can filter your project by package name, package directory, whether packages include dependents/dependencies, and by changes in git history.

turbo will run each task against each matched package, ensuring that any dependencies are run first, according to the pipeline specification in turbo.json.

[developerasun]

Pipeline

To define your monorepo's task dependency graph, use the pipeline key in the turbo.json configuration file at the root of monorepo. turbo interprets this configuration to optimally schedule, execute, and cache the outputs of each of the package.json scripts defined in your workspaces.

Each key in the pipeline object is the name of a package.json script that can be executed by turbo run. You can specify its dependencies with the dependsOn key beneath it as well as some other options related to caching. For more information on configuring your pipeline, see the Pipelines documentation.

Packages that do not have the specified script defined in their package.json's list of scripts will be ignored by turbo.

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      // A package's `build` script depends on that package's
      // dependencies' and devDependencies'
      // `build` tasks  being completed first
      // (the `^` symbol signifies `upstream`).
      "dependsOn": ["^build"],
      // note: output globs are relative to each package's `package.json`
      // (and not the monorepo root)
      "outputs": [".next/**"]
    },
    "test": {
      // A package's `test` script depends on that package's
      // own `build` script being completed first.
      "dependsOn": ["build"],
      "outputs": [],
      // A package's `test` script should only be rerun when
      // either a `.tsx` or `.ts` file has changed in `src` or `test` folders.
      "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]
    },
    "lint": {
      // A package's `lint` script has no dependencies and
      // can be run whenever. It also has no filesystem outputs.
      "outputs": []
    },
    "deploy": {
      // A package's `deploy` script depends on the `build`,
      // `test`, and `lint` scripts of the same package
      // being completed. It also has no filesystem outputs.
      "dependsOn": ["build", "test", "lint"],
      "outputs": []
    }
  }
}

reference

• https://turborepo.org/docs/getting-started#create-a-pipeline