Written byGapur Kassym✏️

We all start our first steps in software engineering with small projects. Over time, our projects become larger and more complex. This is where the new architecture of the monorepo project comes into play. There are many tools for developing monorepo projects but in this guide, we will focus on Turborepo and its recent v2 release.

New features in Turborepo 2.0

Turborepo, developed by Vercel, is a popular tool for creating monorepos in the JavaScript/Typescript ecosystem. It is powerful, fast, and easy to use, whether you want to install it or add it to an existing project.

If you are new to Turborepo and want a deeper dive, check out LogRocket’sguide to building a full-stack TypeScript application with Turborepo.

Recently, the Turborepo team introduced new core features in version 2.0. These features include:

• A new terminal UI that enhances productivity and development speed with interactive tasks and clearer logs
• Watch Mode, a dependency-aware task observer for any tool in your monorepo project
• All-new documentation that offers comprehensive information about monorepository concepts, API references, and tool guides

New terminal UI

In previous versions of Turborepo, when we were working on both libraries and apps simultaneously, we had to read a large amount of log information in one place. Now, starting with version 2.0, we can select specific tasks — whether for a library or an app — and explore their logs individually. This makes it easier to focus and read.

Additionally, in previous versions of Turborepo, we could not interact with the script to execute commands, although many other monorepo tools allowed this. Now we can do this by typing to our scripts viastdin, and entering data directly into the interface. This allows us to run specific test suites using Jest, perform database migrations, and much more.

To make the task interactive, we can update theturbo.json file by adding"persistent": true for the specific task:

{"tasks":{"dev":{"cache":false,"persistent":true//addandmakethetaskinteractive}}}

Then we can select the task in the terminal UI and pressEnter to enter the task shell andCTRL+Z to exit.

Watch Mode

Turborepo can run many tasks at the same time, which helps us work faster. However, starting with version 2.0, we can get the most out of Turborepo's parallelization by using the "watcher" feature that allows us to re-run our code whenever we change something in our source code. Many tools don't do this or don't support monorepos, which leads to problems with scripts that depend on other scripts in our repository.

Let’s demonstrate how we can use it easily:

turbo watch dev linttest

Now Turborepo will re-run tasks whenever we make changes to our code using the configuration fromturbo.json.

All-new documentation

The Turborepo team has releasedupdated documentation based on the strengths of previous versions and user feedback. They now offer:

• Monorepo fundamentals and how-tos
• Guides for integrating any tools with Turborepo
• Architecture details and improved search

A dive into caching in Turborepo

One of the main reasons Turborepo stands out as a monorepo tool is its use of caching. Turborepo uses caching to speed up the development process and prevent doing the same work repeatedly. Turborepo caching saves a lot of time when working locally, and when combined with remote caching, it becomes even more powerful by sharing the cache across the entire team.

We can try to get our first cache by creating a Turborepo project with the following command:

npx create-turbo@latest // npmpnpm dlx create-turbo@latest // pnpm

Now, let’s run thebuild script inpackage.json, which triggers aturbo build:

npmrunbuild

This will result in a cache miss because we have never run the previousbuild script before with this input set in this repository: If we runturbo build again, we get the following result:

Remote caching with Turborepo

Turborepo stores the results of tasks in the.turbo/cache directory and can share the cache with our teammates and CI to speed up work.

To use it, we need to authenticate with our remote cache provider using the following command:

npx turbo login // npm

Then, link the repository on our machine:

npx turbolink // npm

Now, when we run a task, Turborepo will automatically send the task’s output to the remote cache. The next time the same task is run on any machine authentication with the remote cache, it will retrieve the cached result on the first run.

Creating a monorepo project with Turborepo 2.0

Now, to get a good understanding of the new features in Turborepo 2.0, let's create our first monorepo project using a basic starter example.

I will first create a monorepo project using Turborepo:

npx create-turbo@latest // npmpnpm dlx create-turbo@latest // pnpm

This will prompt us for our project name and to select the package manager we want to use: And voilà, we have just created our monorepo project using Turborepo! Our project includes the following packages/apps:

• docs: A documentation Next.js app example
• web: A web Next.js app example
• @repo/ui: React component library forweb anddocs apps
• @repo/eslint-config: Commoneslint configurations for libraries and apps
• @repo/typescript-config:tsconfig.json for libraries and apps

Ourturbo.json file is set up as follows:

{"$schema":"https://turbo.build/schema.json","ui":"tui","tasks":{"build":{"dependsOn":["^build"],"inputs":["$TURBO_DEFAULT$",".env*"],"outputs":[".next/**","!.next/cache/**"]},"lint":{"dependsOn":["^lint"]},"dev":{"cache":false,"persistent":true}}}

Above, we set a specific URL schema for our Turbo configuration. We also definedui astui to format the terminal UI. Then, we specified thebuild,lint, anddev tasks.

Next, we will run all apps with the following command:

pnpm run dev

It runsdev scripts in all apppackage.json files and opens them in a new terminal with tasks: As we see above, we have two tasks on the left side of the terminal, and task details on the main content of the terminal window. If we navigate to the local URL, we will see more output logs, details about web app states, requests, and more. By switching between tasks, we can examine each detail separately by task content. This is an incredibly useful feature and makes it easier to understand while we are working on a specific app or package.

Lastly, we are going to test the new Watch Mode feature in our Turborepo project. Let's run all of our tasks with the following command:

turbo watch dev lint

Now, we can see all the tasks on the left sidebar. If we navigate toweb#lint task, we can see lint run once: If we change anything in the source code of the web app, thelint task will be re-run liketurbo run: This is a very useful feature to speed up our work.

Turborepo vs. Other monorepo tools

There are many tools available for working with monorepos, such as Lerna, Nx, and Bazel, each with its own strengths and weaknesses. Some are designed specifically for the frontend, backend, or both, while others excel in large projects or focus mainly on TypeScript.

But Turborepo stands out for its emphasis on speed, caching and parallelization, ease of use, and its efficiency when working with both small and large projects. It also has a large community of users. There are many reasons why you should use Turborepo, especially given the Turborepo 2.0 release.

Thanks for reading. I hope you found this piece useful. Happy coding!

Get set up with LogRocket's modern error tracking in minutes:

1. Visithttps://logrocket.com/signup/ to get an app ID.
2. Install LogRocket via NPM or script tag.LogRocket.init() must be called client-side, not server-side.

NPM:

$npm i--save logrocket // Code:import LogRocket from'logrocket'; LogRocket.init('app/id');

Script Tag:

AddtoyourHTML:<scriptsrc="https://cdn.lr-ingest.com/LogRocket.min.js"></script><script>window.LogRocket&&window.LogRocket.init('app/id');</script>

3.(Optional) Install plugins for deeper integrations with your stack:

• Redux middleware
• ngrx middleware
• Vuex plugin

Get started now