Monorepo App with Lerna

#webdev #lerna #javascript #sideprojects

Monorepo is a way to organize an application. In this case, the application is divided into several parts, each of which is a separate package. For example, look at the React repository. You will see that the main parts of this library are separate packages: "react-reconciler", "react-dom"… In other word, monorepo is a multi-package repository.

What are the advantages of this way? In a nutshell, separation into logical parts facilitates versioned, testing and understanding of the overall project. But better than any words is practical experience.

Many years ago I made a personal website for the russian artist Gregory Maiofis. It was a monolithic Ruby On Rails application. Recently I decided to rewrite this as a single-page and monorepo application. You can see the result on github.

In this work I used Lerna and below I want to tell you (in short) how to use this multi-package application management tool.

The first command is lerna init. It creates a new lerna repo. Open the lerna.json file after executing this and add the following lines:

"useWorkspaces": true, 
"command": {
  "run": {
    "npmClient": "yarn"
  }
}

And add to the package.json file:

"workspaces": {
  "packages": [
    "packages/*"
  ]
}

These changes allow us to use yarn workspaces.

I organized my project in the following manner:

packages
  |---app   // main application with CRA
  |---admin // Admin Panel
  |---ui    // a library of common React components
  |---api   // a library for working with API

The main commands:

// bootstrap the packages in the current Lerna repo
lerna bootstrap

// Symlink together all packages
lerna link

// execute the "start" command in all packages 
// that contains this command
// in my case it will be "app" and "admin"
lerna run start

// execute the build command in the "ui" package only
lerna run --scope @project/ui build