Monorepo setup

Git Repo Setup

To setup a monorepo for Rosetta UI Library, we will use

• lerna
• Yarn workspace

Why Lerna?

To manage publishing and versioning of each components.

Why Yarn WorkSpace

To maintain monorepo and to reduce space requirement for multiple copies of node modules.

Steps

Install Yarn and Lerna globally ( you need to have nodeJs already installed on the machine). Run following command on the terminal

    npm install -g yarn

Once yarn is installed, install lerna

    npm install -g lerna

Initialize repo with

    yarn init

Lets create lerna.json file

    lerna init

Update lerna.json file with below text

{  "packages": ["packages/*"],  "version": "0.0.0",  "npmClient": "yarn",  "useWorkspaces": true,  "command": {    "version": {      "allowBranch": "main",      "conventionalCommits": true,      "message": "chore(release): publish"    }  }}

Update package.json file with below text

{    ...,    "private": true,    "workspaces": {        "packages": [        "packages/*"        ]    }
}

At this point, your folder structure should look like

 dir/    packages/    lerna.json    package.json

Time to create few react app in our Monorepo. We will use CRA for initial setup, but will update default project, with custom webpack setup, which can be use as template for creating new projects

Create React app inside packages directory

    cd packages    npx create-react-app default-project

Update root/package.json

"scripts": {    "bootstrap": "lerna bootstrap",    "build": "lerna run build",    "start": "lerna run start --stream",    "new-version":"lerna version --conventional-commits --yes"  },

If don't want to commit and push when generating new verions

"new-version":"lerna version --conventional-commits --no-git-tag-version"

If don't wnat to commit Lerna bootstrap

Lerna run build

Lerna run start --stream

Update start script inside default project to

    "start": "PORT=30001 react-scripts start",

Create one more React app, using CRA and update start script to

 "start": "PORT=30002 react-scripts start",

Navigate to root directory of your project in command line and run

    yarn start

You should have two React app started and running in the browser.