Lesson Description

The "Learna" Lesson is part of the full, TypeScript Monorepos: Architect Maintainable Codebases course featured in this preview video. Here's what you'd learn in this lesson:

Mike explains how Lerna simplifies managing monorepo dependencies and tasks like build, test, and lint, especially when combined with pnpm and Nx for faster, cached, and parallelized task execution.

Preview
Close

Transcript from the "Learna" Lesson

[00:00:00]
>> Mike North: Next we're going to dig into some more advanced monorepo build and task running tools. The first is lerna, and then we're going to get to using Nx. So Lerna, in some ways it's the original JavaScript Monorepo tool. It has been around for about a decade. But what's important to know is that the way it works today is very, very different than what you might have seen if you're poking at it a couple of years ago.

[00:00:33]
Part of this is because Lerna as a project is now maintained by the same team that works on Nx. So to some degree, it's a little bit of a wrapper around Nx that allows for a simplified usage pattern. So let's begin by installing lerna, and we're going to make sure we're doing so while in the workspace.

[00:00:53]
Root, pnpm dlx learna, init. So again, dlx is download execute. That's like running npx if you're familiar with the npm equivalent. And so we're downloading lerna and we're running the init command, and what it's gonna do is create a lerna.json file. Gives us an npm schema. Sorry, a JSON schema.

[00:01:18]
It detects that we are using pnpm. Lerna works really, really well with pnpm. It does work well with npm workspaces and with yarn workspaces, but just the level of configuration you need in the pnpm world. It's almost nothing because we already have this workspaces yaml file and like you would otherwise have to be adding more information into this file if your package manager of choice didn't make it so easy to parse that out.

[00:01:51]
Similarly, lerna, because part of what it does is allow you to install workspace dependencies, lerna knows we're using pnpm and it will follow that workspace colon star convention. So this is not interfering with all of the norms that we've been discussing so far. I'm gonna install Learna as a dev dependency as well,
>> Mike North: Just to make sure I always have it.

[00:02:27]
All right, so let's use lerna to run builds here. And we'll do that by saying pnpm lerna run build and you see lerna powered by Nx and it's going to each of these packages and it's building each of them. So it can build, it can test, it can lint.

[00:02:58]
And behind the scenes, Nx is doing the lifting here.
>> Mike North: We have a lint error somewhere. We must have forgotten something a little ways back. These are files in a dist folder. We shouldn't be linting things in a dist folder. Let's go ahead and fix that. Since we've got this error here, there has to be an ignores already.

[00:03:27]
Perfect. We'll do this and dist. That should work.
>> Mike North: Great.
>> Mike North: So Nx detected a flaky task. I can tell you what this means. Can't tell you exactly why this one's flaky. I'm not sure to be blunt, but part of what Nx does, it's cached task artifacts. Meaning for a given set of inputs, a deterministic task will give you a consistent set of outputs.

[00:04:13]
What Nx is detecting here is that something's changed. You know what it could be? Let's see if we get another flaky task notification here. It's gonna guess that it's the fact that we changed our config, but I'm just speculating at this point. So anyway, it's running these things and let me show you something that pnpm has a little bit more trouble doing, or at least you'd have to run a more elaborate command for this.

[00:04:44]
Pnpm lerna run build, lint, test, check -- stream. Stream means, if you noticed when we were previously executing tasks, we kind of just saw the green check marks for them completing. We weren't seeing the output. The only if things error will you see output. But if we run this, you can see, all right, it's doing a bunch of stuff.

[00:05:05]
We're actually seeing the build output and it all completes. If we didn't use stream, it'd be a much more abbreviated thing where we just see a bunch of stuff happening in parallel. You have a lot of control over how tasks are executed. We could say, I only want two tasks running at the same time.

[00:05:26]
And you can see I've used Concurrency 2. This would be if you've got other things happening on your machine you don't want, say you're twitch streaming while you're coding, and you don't wanna just peg every core on your CPU for build and your video will start to stutter, this would be how you'd sort of throttle it down a little bit.

[00:05:49]
The default here is to let it loose and run everything in parallel. But you can explicitly specify that running parallel, which we don't need to do. So great,it's sort of an abbreviated syntax. It's kind of cool that we can comma separate a bunch of tasks that we wanna run and it runs them on a bunch of different packages in our repo, there's also scope.

[00:06:17]
>> Mike North: Sorry, this has to be something like seeds/ui. So here we were saying I wanna run all these tasks, but only in seeds/ui. Or we could do this, right, it's any text fragment here, basically that can resolve to some subset of your packages. So that's great. But let's look at something and pnpm can run tasks similar to this.

[00:06:47]
It still is dependency aware, but here's something that's a little bit different.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now