Updating Turborepo to use Yarn Berry

> Click here to jump straight to the setup <

A Little Bit of Background

About 6 years ago, when I started coding with React and NodeJS, I knew almost nothing about either of them, including their build systems. I had previously been using a, in retrospect, horrible Google in-browser cloud-based IDE for one of Google’s since-abandoned app development systems. So I came to React and NodeJS with no knowledge of JSX, bundlers, and package managers like NPM.

When I found out about NPM and the NPM registry, I couldn’t believe what an amazing system it was! Such a huge variety of packages available to do whatever you can think of, for free, is a pretty awesome thing - despite the potential security risk aspect. Certainly, back in my heydays of C programming with DOS-based IDE’s back some 20-ish + years ago, you had to code every aspect … reinvent the wheel so to speak, every time. Well, ok, there were some libraries available, but certainly nothing near the scope of the NPM registry.

So when I started using NPM to pull in libraries I needed, like Express and axios, I thought it was the greatest thing since sliced bread. That is, until I started noticing some odd behaviour with the installation of some local libraries I had built. All of a sudden, NPM started creating these deep redundantly-nested folders in node_modules, and my code no longer ran.

Enter Yarn.

After doing a bit of digging, I found out about Yarn. It had no issues with my local libraries, fixed things right up, and seemed much more efficient. I’ve been using Yarn ever since.

Recently I had to setup a new laptop, and got my usual dev environment running with, of course, Yarn.
I wrote some code for something I wanted to test, installed the libraries I needed … but no node_modules folder was created!

I thought there might have been something buggy with Yarn, but when I tried to run the code, it ran without issue! Curious how the code was running with the libraries missing, I checked the Yarn site and found out about their Zero-Installs tech, which apparently isn’t that new, but was certainly new to me. Depending on the code base and config, Yarn will now create a hidden .yarn folder, with a much more organized and efficient way to store needed dependencies where only a single version of each dependency is installed, getting rid of the dependency hell many of us are so familiar with.

---

Modified Turborepo starter updated with Yarn Berry zero-installs

In my previous post, I spoke about monorepos, and the various pros and cons of using them. In this post, I’ll go over the steps to update Vercel’s Turborepo to use the newer Yarn Berry, which does away with the node_modules folder, and allows for much better dependency management.

Modifications

This modified Turborepo uses the newer Yarn Berry with zero-installs for package management. The TypeScript config has also been pre-configured to work with VS Code, but you’ll need to manually tell VS Code how to recognize the TypeScript version, which I’ll outline further below.

Setup

Clone The Repo

If you’d prefer to skip the manual steps to convert this Turborepo, you can clone one I’ve already setup.

Note: This is not an official Turborepo starter, and may not be as up to date as the official ones. To use the latest Turborepo starter, follow the steps in Steps to Convert Your Own Turborepo below.

To clone my pre-configured Turborepo:

Either fork & clone from this repo in Github: https://github.com/mlaposta/turborepo-yarn-zero-installs

Or

Download it using degit to start with no git history.
From a command shell:

npx degit mlaposta/turborepo-yarn-zero-installs turborepo-yarn-zi
cd turborepo-yarn-zi
yarn
git init . && git add . && git commit -m "Init"

Steps to Convert Your Own Turborepo

If you want to make sure you’re starting with the latest Turborepo template, follow the steps below.

1. Install Turborepo

From a command shell, run:

npx degit vercel/turbo/examples/with-yarn turborepo-yarn-zi
cd turborepo-yarn-zi

2. Update the repo to use yarn zero-installs

In the root folder (turborepo-yarn-zi), open package.json, and add "typescript": "latest" to devDependencies.

From a command shell, run:

yarn set version berry
yarn install

Open .yarnrc.yml, look for the nodeLinker setting and remove it.

From a command shell, run:

yarn install
yarn dlx @yarnpkg/sdks vscode

Note: If you’re not using VS Code, and using another editor instead, refer to Yarn’s Editor SDKs page for the appropriate sdk to use.

3. Update .gitignore for zero-installs

In your .gitignore file, add:

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

4. Run yarn again to check for changes

From a command shell, run:

yarn

5. Init git and set master

From a command shell, run:

git init .
git branch -m master
git add .
git commit -m "Init"

6. Update VS Code to use the workspace TypeScript version

If you’re using TypeScript along with VS Code, it won’t recognize TypeScript on its own due to the monorepo config with Yarn Berry, so you’ll need to do a quick config step to tell VS Code how to recognize the TS code.

In VS Code:

1. Open a TypeScript file, and press Ctrl + Shift + p.
2. Choose Select TypeScript Version.
3. And then select Use Workspace Version.

That’s All!

You should now be ready to start using your Turborepo with Yarn Berry!

Note that depending on which setup method you used (cloning my pre-configured repo or setting up from scratch), you will likely want to change the name of the folders/packages to match your own layout.