Monorepo Concept
Tags: monorepo, javascript, react, lerna
Published: 2024-02-27 15:34:36

**Monorepo** is a software development strategy where multiple projects are managed in a single code repository. In this strategy, each project has its own folder or package, but all code resides in a single repository. **Monorepo** can be a powerful tool for managing large and complex codebases.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eupg93terlaq01m9zr0o.png)

**Advantages of monoreponement:**

- **Reduces repetition:** Because code used in multiple projects is kept in one place, code duplication is reduced. This makes the code base more consistent and easier to maintain.
- **Increases productivity:** Monorepo makes it easier for development teams to make changes to the codebase and add new features. Using a single repository makes things like code reviews and merges simpler.
- **Accelerates development:** Monorepo ensures that changes to the codebase are instantly reflected across all projects. This speeds up the development cycle and enables faster deliveries.

**Disadvantages of Monorepon:**

- **Complexity:** Monorepo can be a more complex structure for large and complex codebases. This can make it difficult to navigate and debug the codebase.
- **Performance:** Monorepo may require more storage and processing power for large codebases.
- **Training:** Monorepo may require development teams to learn a new way of working.

**JavaScript Libraries for Using Monorepo:**

Many JavaScript libraries are available to facilitate development with Monorepo. Some of the most popular libraries are:

- **[Lerna](https://lerna.js.org/):** A JavaScript library that makes developing with Monorepo easier. Lerna helps automate things like package management, task execution and version control.
- **[Yarn](https://yarnpkg.com/features/workspaces):** JavaScript package manager. It has many features that make developing with Monorepo easier.
- **[Nx](https://nx.dev/):** It is a tool for developing applications with various technologies such as Angular and React. Nx supports monorepo builds and allows you to manage multiple projects or libraries in a single repository. It also offers various features to facilitate the development process.
- **[Rush](https://rushjs.io/):** It is a monorepository management tool developed by Microsoft. It has many features similar to **Lerna**.

> **Monorepo** can be a powerful tool for managing large and complex codebases. If you are considering using **Monorepo**, it is important to first carefully evaluate the advantages and disadvantages of this strategy.

Let’s make a simple **monorepo** project using Lerna and React JS.

- First, install Lerna:

```bash
npm install -g lerna

```

- Next, create a home folder and go into it:

```bash
mkdir monorepo-example
cd monorepo-example
```

- Command to install monorepo with Lerna:

```bash
lerna init
```
Let’s have two packages, “common” and “sample-app”. Our scenario is to use the modal component in the common package in the sample-app application.

- Let’s create a folder packages and inside it create a folder common and a folder sample-app:

```bash
mkdir packages
cd packages
mkdir common
mkdir sample-app
```
- Let’s go inside each package and create React applications:

```bash
cd packages/common
npx create-react-app .
cd ../sample-app
npx create-react-app .
```
- To add the dependency between sample-app and common, let’s give the common package as a dependency of the sample-app package:

package.json

```json
...
 "dependencies": {
    "common": "file:../common/src/components/modal"
  },
...
```
Then run the yarn command to install the package:

```bash
yarn
```

Let’s add the Modal component in the sample-app package:

App.js

```js
import Modal from "common/src/components/modal/Modal";

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Monorepo Example App</h1>
        <Modal/>
      </header>
    </div>
  );
}

export default App;
```

> You may need an additional loader to handle the result of these loaders.

When we stand up the sample-app package, we are likely to get an error like below. So we will need to configure webpack with a package called “craco”. After installing the package, let’s create a craco.config.js file in the main directory and add the following codes.

```bash
yarn add -D @craco/craco
```

```js
const path = require("path");
const { getLoader, loaderByName } = require("@craco/craco");

const packages = [];
packages.push(path.join(__dirname, "../common"));
module.exports = {
  webpack: {
    configure: (webpackConfig, arg) => {
      const { isFound, match } = getLoader(webpackConfig, loaderByName("babel-loader"));
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];

        match.loader.include = include.concat(packages);
      }

      return webpackConfig;
    },
  },
};
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgbdr3uqyj2rfy9y74eo.png)

You can access the source codes of the sample project from [this link](https://github.com/melihs/monorepo-example). 🔗

Continue with content 🚀
You can access my other content by clicking [this link](https://dev.to/melihs). I would be very happy if you like and leave a comment 😇