Monorepo with JavaScript: Organizing Code in Practice

Monorepo with JavaScript: Organizing Code in Practice

Developing complex projects in JavaScript (Node.js) often faces the problem of code management. When you have several packages, libraries, or microservices, each living in its own repository, this leads to code duplication, complexity of version synchronization, and slowdown of CI/CD. The solution is a monorepo. In this article, we will analyze how to organize a monorepo with JavaScript in practice: from choosing tools to setting up build and publishing.

What is a monorepo and why is it needed?

A monorepo is an approach to code management where all packages, libraries, and applications of a project are stored in a single repository. Unlike multi-repositories (each package in its own repo), a monorepo offers:

\n
• Unified change history: easily track how changes in one part affect another.
\n
• Code reuse: shared utilities and components live in one place without publishing to npm.
\n
• Simplified refactoring: changing the API of one package is immediately visible in all dependents.
\n
• Unified CI/CD settings: one configuration file for all packages.
\n

For JavaScript (Node.js), a monorepo is especially relevant as it allows you to get rid of "dependency hell" and speed up development. Let's look at a practical implementation.

Tools for a monorepo in JavaScript

There are several popular tools on the market. We will consider two main ones: npm workspaces (built into npm) and Lerna (extended functionality).

1. npm workspaces (built-in support)

Starting from npm v7, the package manager supports workspaces. This is the simplest way to start. Example project structure:

my-monorepo/\n├── packages/\n│   ├── core/\n│   │   ├── package.json\n│   │   └── index.js\n│   ├── utils/\n│   │   ├── package.json\n│   │   └── helpers.js\n│   └── app/\n│       ├── package.json\n│       └── server.js\n├── package.json\n└── lerna.json (optional)

Root package.json:

{\n  "name": "my-monorepo",\n  "private": true,\n  "workspaces": ["packages/*"]\n}

Now all packages in packages/* are automatically linked. To install dependencies, simply run npm install in the root. Dependencies between packages are specified standardly:

// packages/app/package.json\n{\n  "name": "@my/app",\n  "dependencies": {\n    "@my/core": "*",\n    "@my/utils": "*"\n  }\n}

npm workspaces creates symlinks in the node_modules folder, so imports work like with regular packages.

2. Lerna (advanced management)

Lerna is a tool for managing monorepos with the ability to publish, version, and run scripts in parallel. Installation:

npm install --global lerna

Initialization in the project:

lerna init

lerna.json file:

{\n  "version": "independent",\n  "npmClient": "npm",\n  "packages": ["packages/*"]\n}

The independent mode allows each package to have its own version. Main commands:

\n
• lerna bootstrap — installs dependencies and links packages.
\n
• lerna run build — runs the build script in all packages.
\n
• lerna publish — publishes changed packages to npm.
\n

Practical code organization

Let's look at an example of setting up a monorepo for a web application with a Node.js backend and shared utilities.

Step 1: Basic structure

Let's create three packages:

Blogs

Zero-downtime Deployment of TypeScript Services: A Step-by-Step Guide

Arrays of Objects in TypeScript: A Complete Guide with Examples

Arrays in Java: How to Declare and Initialize? A Complete Guide

Book Recommendations

Concurrency in PHP: Asynchrony, Multithreading, and Parallelism

C++: Tips and Best Practices. From Beginner to Pro

Go Succinctly (Go Briefly)

Rust in Action

Read also

Deploying a TypeScript Application on VPS: A Step-by-Step Guide Top 10 Rust Frameworks for Web Development: Advanced Level Memory Management in Rust: Why No Garbage Collector and How It Works How to Change Java JDK on macOS: 5 Beginner Mistakes and Their Solutions GraphQL vs REST in C#: What to Choose for Your API in 2024