Turborepo Overview

Turborepo is a monorepo tool that eliminates build pipelines issues present in monorepos. By providing an efficient build mechanism and package management. You can make changes across many codebases easily with the help of Turborepo.

source: @turborepo.com

According to their website :

💡 "Turborepo is a high-performance build system for JavaScript and TypeScript codebases." from : Turborepo.com

Turborepo charges your monorepo by reducing build time and giving you additional devtools. That will help you with building and continuously integrating your application.

🤷 Why use Turborepo?

Many monorepo tools exist. Tooling, automation and decoupling are Monorepo's projects core strengths. Who wouldn't like to automate particular build or run tasks that stops a developer from doing what he loves best. Monorepo tools like Lage, Bazel, Turborepo, Lerna, etc exist. They all come with one feature or the order.

The image below compares popular monorepo tools

Turborepo being one one of the newest tools on the market, flourishes with features and sets out to compete with build tools such as webpack. Their innovation towards optimization puts them high above their competitions.

Below are some cool features of Turborepo 😎

Parallel Execution
Turborepo utilizes multiple CPU powers with modern parallel techniques. Ensuring that no CPU is left idle in a running process.
Zero-Runtime Overhead
Turborepo isolates itself from the runtime process of your code. This will ensure optimal performance of your system, as only the necessary things are used during build processes.
Incremental builds
Turborepo follows a do-not-repeat yourself approach. Turborepo will remember things you’ve built and skip the stuff that's already been computed. This will improve execution speed and faster performance.
Remote Caching
Remote caching allows you to store and retrieve the results of process execution to and from a remote server. With Turborepo, you can share a remote build cache with your team and CI/CD for faster builds.

Building a Monorepo With Turborepo

We’ve talked a lot about monorepos and Turporepo. We’ll be testing our theoretical knowledge of monorepos by building a practical monorepo application with Turborepo.

First and foremost, install yarn package manager. you can also use npm and pnpm too! To install yarn, run the code below :

npm install --global yarn

1. Run Turborepo CLI

The fastest way to get a feel of how Turborepo works is to run their CLi. This CLI scaffolds a monorepo with apps (docs, web) and packages (design system and shared configs (eslint, tsconfig)). You can check it out with the command below :

npx create-next-app@latest

You’ll be prompted to install Turborepo’s CLI after running the code. Enter “y” to accept.

You will be asked to also choose package managers. We’ll be using yarn, you can also use npm or pnpm.

If the process is successful, your workspace will look like the one in the image below. You can explore them individually to see what you've got.

2. The package.json file

From the package.json file, the entry points to our application is “turbo”. You can use this turbo together with run and then pass other custom turbo flags to accomplish most processes in Turborepo.

This is how package.js file looks :

{
  "name": "turbo-demo",
  "scripts": {
    "build": "turbo run build",
    "test": "turbo run test"
  },
  "devDependencies": {
    "turbo": "1.2.5"
  }
}

Turbo syntax :

turbo run <task>

turbo run build and then pass the flag's name.

You can access all the flags allowed in Turborepo from their official CLI Reference page.

You can check turbo.json to see turbo dependencies.

It looks generally like this :

{
  "$schema": "<https://turborepo.org/schema.json>",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": []
    },
    "test": {
      "dependsOn": ["^build"],
      "outputs": []
    }
  }
}

We'll make use of this file in the continuous integration section.

3. Running our dev scripts

Since we already have all the files we need to get Turborepo up and running from their demo sample.

yarn run dev

⚠️ Both dev scripts are run simultaneously, starting your Next.js apps on ports 3000 / 3001.

You can run only one of the apps using the --filter flag.

npm run dev --filter docs

You'll notice that it now only runs docs:dev

You can set whether to cache your dev or not by going to turbo.json and passing either truth or false values.

Check out Turborepo's getting started tutorial for more insight.