Lerna

Setup the project with one command

When I first had a look at Lerna, I couldn't understand how it works and what was its value. Essentially, what would have been a repository is now a folder in packages. All the dependencies will be installed with lerna bootstrap.

What does this mean? When you clone the monorepo, you will get all the code required to run the app. When you run yarn install you'll install all the dependencies.

Setting up Lerna

Create lerna.json

lerna.json

{
  "packages": ["packages/**"],
  "version": "independent",
  "npmClient": "yarn"
}

Install Lerna at the root of the project.

$ yarn add lerna

Let's try

Go to the packages/api and install express

$ cd packages/api
$ yarn add express

The express dependency should have been added to packages/api/package.json

packages/api/package.json

  "dependencies": {
    "express": "^4.17.1"
  }

Let's do the same for packages/web and add react

$ cd packages/web
$ yarn add react

We should now have node_modules folders in api and web.

$ ls packages/api/node_modules # You should see express
$ ls packages/web/node_modules # You should see react

Let's try to delete both node_modules folders and bootstrap from the project's root directory. It should install all dependencies.

$ lerna bootstrap

Don't forget to add node_modules to .gitignore.

Post install

We can add anything in scripts of our package.json and run it with yarn name-of-script.

Let's try this first with our package.json from the root directory, :

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "name-of-script": "echo my script"
},

$ yarn name-of-script
yarn run v1.15.2
$ echo my script
my script
✨  Done in 0.06s.

There are pre-defined keywords for npm-scripts. You can find all of them here but we are interested in postinstall.

postinstall: Run AFTER the package is installed

We can add our bootstrap step here:

package.json

"scripts": {
    "postinstall": "lerna bootstrap"
},

We can now install all the dependencies from the root directory:

$ yarn
[1/4] 🔍  Resolving packages...
$ lerna bootstrap
lerna notice cli v3.16.4
lerna info versioning independent
lerna info Bootstrapping 2 packages
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna success Bootstrapped 2 packages
✨  Done in 1.75s.

Final files and folders structure

.
├── lerna.json
├── node_modules
├── package.json
├── packages
│   ├── api
│   │   ├── package.json
│   │   ├── node_modules
│   │   └── yarn.lock
│   └── web
│       ├── package.json
│       ├── node_modules
│       └── yarn.lock
└── yarn.lock

lerna branch available on GitHub.