MonoRepo Architecture

When we think about building apps, we usually talk about an app, a git repository, and a build output. However, this configuration of an application and a repository does not always reflect the real-world experience of developers. Often organizations will use a single repository with all the applications, components, and libraries that could be used in common development. These are called a monorepository or single repository, and they are starting to become very popular.

So, what makes a monorepository interesting for organizations? Why put all the code in one place? Why not have a single git repository where you have many small and separate repositories? If we keep all our code in one project.

By keeping all the code in one repository, you keep all dependencies up to date across the organization. This is probably the biggest benefit of a single repository. This way we will stop having to waste time updating all the dependencies of several different...

MonoRepo Architecture

When we think about building apps, we usually talk about an app, a git repository, and a build output. However, this configuration of an application and a repository does not always reflect the real-world experience of developers. Often organizations will use a single repository with all the applications, components, and libraries that could be used in common development. These are called a monorepository or single repository, and they are starting to become very popular.

So, what makes a monorepository interesting for organizations? Why put all the code in one place? Why not have a single git repository where you have many small and separate repositories? If we keep all our code in one project.

By keeping all the code in one repository, you keep all dependencies up to date across the organization. This is probably the biggest benefit of a single repository. This way we will stop having to waste time updating all the dependencies of several different...

Technical requirements

To complete this chapter, you will need the following:

• Node.js 19+
• Visual Studio Code

You can find the code for this chapter in the book’s GitHub repository: https://github.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/tree/main/Chapter14.

Advantages of a monorepository and the problems it solves

Some of the advantages of a MonoRepo (monorepository) are:

• Sharing is made easy: With all the code in one place, it becomes easier to utilize the same code or tools across multiple projects, saving valuable time and effort.
• No mix-ups: In a MonoRepo, every project utilizes the same version of shared components, eliminating concerns about compatibility issues between different versions.
• Change everything at once: In a MonoRepo, making changes across all projects simultaneously becomes a straightforward task, as opposed to the complexity of managing individual projects in separate repositories.
• Grouped changes: Modifying multiple projects simultaneously within a MonoRepo ensures that all related components stay synchronized, allowing for efficient and cohesive updates.
• Everyone can see everything: With all the code centralized in one repository, all developers have access to it, fostering a...

Creating a MonoRepo with NPM Workspaces

NPM Workspaces was introduced in NPM 7 and is a generic term that refers to the set of features in the npm CLI that provides support for managing multiple packages from your local filesystem, from within a singular top-level root package.

The first thing you need to do in order to create a monorepository is to create a root package.json file, which should contain the following code:

{
  "name": "web-creator",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

We will name our MonoRepo web-creator. We need to specify that web-creator will be private (only the root), and we need to specify the workspaces where our packages will live, which is on "packages/*"; the * means that we will include any directory that exists under the packages folder. After this, you need to create the packages directly.

Let’s create two directories inside our new packages folder...

Implementing TypeScript in our MonoRepo

In the following sections, I will outline the steps to create a multi-site project. Due to the substantial amount of code involved, I’m unable to include it all in this book. However, I invite you to review the complete code in the repository available at https://github.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/tree/main/Chapter14/web-creator.

The first thing you need to do in order to add TypeScript to your project is to install the typescript package at the root level:

npm install -D typescript

After this, you need to create the tsconfig.json file at the root level as well with the following code:

{
  "extends": "./tsconfig.common.json",
  "compilerOptions": {
    "baseUrl": "./packages",
    "paths": {
      "@web-creator/*": ["*/src"]
    }
  }
}

As you can see, we extend the tsconfig...

Creating a devtools package to compile packages with Webpack

The first package we need to create to be able to compile other packages is called devtools and should be created in packages/devtools. Let’s see how it should look in its package.json file:

{
  "name": "@web-creator/devtools",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "npm-run-all clean compile",
    "clean": "rm -rf ./dist",
    "compile": "tsc",
    "lint": "npm run --prefix ../../ lint",
    "lint:fix": "npm run --prefix ../../ lint:fix"
  },
  "author": "Carlos Santana",
  "license": "MIT",
  "devDependencies": {
    "@types/cli-color": "^2.0...

Creating the utils package

After we’ve created the devtools package, it is time to add a basic utils package to test the Webpack compilation with devtools. For this, you will need to create a directory at packages/utils. For the example in the book, we will just add one util file to test our devtools, but in the actual repository you will find way more util files that have been added to the project.

As always let’s start creating our package.json in the utils package:

{
  "name": "@web-creator/utils",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "cross-env NODE_ENV=production npm-run-all clean compile webpack:production",
    "build:dev": "cross-env NODE_ENV=development npm-run-all clean compile webpack:development",
    ...

Creating the API package

In this package, we will implement a multi-service system that will help us have more than one service to connect to multiple databases. Let’s see how our package.json file should look for the api package:

{
  "name": "@web-creator/api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production npm-run-all clean compile webpack:production",
    "build:dev": "cross-env NODE_ENV=development npm-run-all clean compile webpack:development",
    "clean": "rm -rf ./dist",
    "compile": "tsc",
    "dev": "ts-node-dev src/index.ts",
    "lint": "npm run --prefix ../../ lint",
    "lint:fix": "npm run --prefix ../../ lint:fix",
    "webpack:development": "webpack --config=../../webpack.config...

Creating the frontend package

In this package, we will implement a multi-site system that will help us have more than one site with the same code base.

Let’s see how our package.json file should look for this package:

{
  "name": "@web-creator/frontend",
  "version": "1.0.0", 
  "scripts": {
    "dev": "cross-env NODE_ENV=development npm run next:dev",
    "build": "next build",
    "next": "ts-node src/server.ts",
    "next:dev": "ts-node src/server.ts",
    "lint": "npm run --prefix ../../ lint",
    "lint:fix": "npm run --prefix ../../ lint:fix",
    "typecheck": "tsc --noEmit"
  },
  "author": "Carlos Santana",
  "license": "ISC",
  "peerDependencies": {
    "react": ">=17.0.2",
    "react-dom"...