What is a Monorepo?

A monorepo (short for “monolithic repository”) is a single repository that contains multiple projects or packages. Instead of having separate repositories for each project, everything is stored in one place. This makes it easier to manage dependencies, share code, and coordinate changes across projects.

Why Use a Monorepo?

1. Code Sharing: Easily share code between projects (e.g., a shared UI library).
2. Dependency Management: Manage dependencies for all projects in one place.
3. Consistency: Ensure consistent tooling and configurations across projects.
4. Simplified Workflow: Make changes across multiple projects in a single commit.

Tools for Managing Monorepos

The most popular tools for managing monorepos in the JavaScript/React ecosystem are:

1. Nx: A powerful tool for managing monorepos with built-in support for React.
2. Lerna: A tool for managing JavaScript projects with multiple packages.
3. Turborepo: A high-performance build system for monorepos.

Example: Setting Up a Monorepo with Nx

Step 1: Install Nx

Run the following command to create a new Nx workspace:

npx create-nx-workspace@latest

Follow the prompts to set up your workspace. For example:

• Workspace name: my-monorepo
• Preset: apps (for React apps)
• Default package manager: npm or yarn

Step 2: Generate a React App

Inside your monorepo, generate a new React app:

nx generate @nrwl/react:application my-app

Step 3: Generate a Shared Library

Create a shared library for reusable components:

nx generate @nrwl/react:library shared-ui

Step 4: Folder Structure

Your monorepo will look like this:

my-monorepo/
├── apps/
│   └── my-app/          # Your React app
├── libs/
│   └── shared-ui/       # Shared UI library
├── nx.json              # Nx configuration
├── package.json         # Root dependencies
└── workspace.json       # Workspace configuration

Step 5: Use the Shared Library in Your App

1. Create a component in the shared library:

// libs/shared-ui/src/lib/Button.js
import React from 'react';

const Button = ({ children, onClick }) => {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', backgroundColor: 'blue', color: 'white' }}>
      {children}
    </button>
  );
};

export default Button;

1. Use the shared component in your app:

// apps/my-app/src/app/App.js
import React from 'react';
import Button from '@my-monorepo/shared-ui'; // Import from the shared library

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
    </div>
  );
}

export default App;

Step 6: Run the App

Start the development server:

nx serve my-app

Example: Setting Up a Monorepo with Lerna

Step 1: Install Lerna

Run the following command to initialize a Lerna monorepo:

npx lerna init

This will create a lerna.json file and a packages folder.

Step 2: Create a React App

1. Navigate to the packages folder:

cd packages

1. Create a new React app using create-react-app:

npx create-react-app my-app

Step 3: Create a Shared Library

1. Create a new folder for the shared library:

mkdir shared-ui
cd shared-ui

1. Initialize a new package:

npm init -y

1. Create a shared component:

// packages/shared-ui/src/Button.js
import React from 'react';

const Button = ({ children, onClick }) => {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', backgroundColor: 'blue', color: 'white' }}>
      {children}
    </button>
  );
};

export default Button;

1. Update package.json to include the main entry:

{
  "main": "src/Button.js"
}

Step 4: Link the Shared Library

1. Use Lerna to link the shared library:

npx lerna bootstrap

1. Use the shared component in your app:

// packages/my-app/src/App.js
import React from 'react';
import Button from 'shared-ui'; // Import from the shared library

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
    </div>
  );
}

export default App;

Step 5: Run the App

Start the development server:

cd packages/my-app
npm start

Summary

• A monorepo is a single repository that contains multiple projects or packages.
• Use tools like Nx, Lerna, or Turborepo to manage monorepos.
• Share code between projects using shared libraries.
• Keep your projects organized and consistent.