Monorepo App with Lerna

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

• More about working with Lerna - https://dev.to/shnydercom/monorepos-lerna-typescript-cra-and-storybook-combined-4hli
• More about workspaces - https://www.smashingmagazine.com/2019/07/yarn-workspaces-organize-project-codebase-pro/
• More about Lerna - https://github.com/lerna/lerna

Comments

[Pacharapol Withayasakpunt]

OK, just don't Lerna to mix frontend and backend. They needs different kinds of node_modules.

[Victor Magarlamov]

Yes, I understand it. In my project the api package is a set of methods that send requests to backend. But anyway thanks for your comment)

Backend and frontend in one is a monolithic app.

[Zoltan Kochan]

I'd recommend to use pnpm + changesets or Rush instead of Lerna.

[Victor Magarlamov]

Thank you for these links! I didn't know about these projects.