Frontend Architecture.md

Monorepo setup with Lerna and Yarn workspaces

Lerna

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Lerna tries to ease the management of npm links when dealing with multi package projects hosted in a single repository. It analyzes the packages and automatically creates the required npm links between them. It also handles execution of tasks across multiple packages and eases the pain of versioning and publishing. It has its shortcomings but it’s worth using it. Big projects like Babel and Jest use Lerna.

Yarn Workspaces

Yarn Workspaces manages our dependencies. Rather than having multiple node_modules directories, it intelligently optimizes the installing of dependencies together and allows for the cross-linking of dependencies in a monorepo. Yarn Workspaces provide tools, like Lerna, the low-level primitives it needs to manage multi-package repositories.

Workspaces are a new way to setup your package architecture (..) It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass.

Your dependencies can be linked together, which means that your workspaces can depend on one another while always using the most up-to-date code available. This is also a better mechanism than yarn link since it only affects your workspace tree rather than your whole system.

Yarn is in many ways much better than npm.

You can use the workspaces feature with or without Lerna. When both projects are used together, Lerna delegates the dependencies management to Yarn.

In order to begin, let’s enable **Yarn Workspaces **

yarn config set front-end true
yarn init

lerna init

Then add Lerna dependency

yarn add lerna --dev (If this doesn't give you 'lerna', use sudo npm install --g lerna)

you’ll then want to initialize Lerna, which will create a lerna.json and a packages directory

lerna init

In order to set up Lerna with Yarn workspaces, we need to configure the lerna.json

Let’s add yarn as our npmClient and specify that we’re using yarn workspaces. For this tutorial we’ll be versioning our packages independently.

// lerna.json
{
  "packages": ["packages/*"],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

At this point we should only have a root package.json. In this root package.json we need to add workspaces and private to true. Setting private to true will prevent the root project from being published to NPM.

// package.json
{
  "name": "my-design-system",
  "private": true,
  "workspaces": [
     "packages/*"
  ]  
}