Add Nx to a Lerna based monorepo

Juri Strumpflohner
InstructorJuri Strumpflohner
Share this video with your friends

Social Share Links

Send Tweet

In this lesson, we're going to have a look at how to add Nx to a Yarn / NPM / PNPM monorepo for achieving faster task scheduling abilities. In particular, we also see how Lerna v5.1+ comes with an easy useNx: true opt-in flag, allowing to use Nx to run tasks, but keeping the old Lerna commands.

Instructor: [0:00] For the purpose of this demonstration, I just downloaded an arbitrary repository from GitHub, which uses Yarn Workspaces here, where we can for instance run yarn build. [0:09] It happens to use Lerna behind the scenes to run the build for the package. We can use something like yarn test, which will again invoke Lerna and execute the testing for the three packages that live in this Workspace.

[0:23] Adding Nx is as simple as installing the Nx package. All we have to do is add Nx here, add it as a development dependency, and also specify the -W, meaning that we install it at the very root package JSON of this monorepo.

[0:38] We also made it a bit more simple by just using the add-nx-to-monorepo command. Now that Nx is installed, let's have a look quickly at the changes that have been applied.

[0:49] First of all, there is the Nx package. There's also the nx-cloud package because we opted into that, but that is completely optional. There's also an Nx.json.

[0:58] Now, the Nx.json is optional as well. You might probably have it at some point, just to specify some more customizations. That's basically it.

[1:07] Now, we could go ahead and just use Nx. Nx will automatically detect the package JSONs that are in this repository, and be able to identify which packages are in there and go ahead and execute them.

[1:16] For instance, we could just do Nx affected:test, and that would automatically now run with the dynamic terminal of Nx, all the packages that are in there and all the tests.

[1:26] Now, you can also see that if I rerun it, it has also the caching in place. It is immediate. Now, apart from the task scheduling, you also now get the Nx graph capabilities. We can visually explore how the workspace looks like.

[1:40] If we open up the visual exploration here, we can enable our projects. We can immediately see that this workspace consists of React application of a React app, route library, as well as a shared theme library.

[1:52] Now, we mentioned initially that this repository specifically uses Lerna. There's a lerna.json file in here. Now, if you have Lerna 5.1 installed in your workspace, then there is an option to very easily also opt-in to Nx.

[2:10] You can just go into the lerna.json file and use Nx and set that to true. The main advantage here is that we don't even have to change now this grids, which we have in our package.json.

[2:22] By using the use Nx in the lerna.json, now we can just run yarn test, for instance, to use the test script, which is already there.