How can a monorepo help you build a scalable project more efficiently?

There are a few ways to handle multiple packages used to create one project. The multirepo model assumes that the packages are located in different code repositories. Monorepo is a single repository that contains and handles different packages. Due to this fact, a monorepo can be mistaken for monolith architecture. However, let’s take a closer look at a project created as a monorepo and compare it with a monolith. We will notice that monorepo consists of multiple logically separated subprojects.

This article will focus on monorepo architecture as it seems like the most modern approach to build complex apps. It is successfully used by companies such as Google, Microsoft, Facebook, and popular projects such as Create React App, Babel, Storybook, Primer, Jest, Strapi and many more.

Why a monorepo?

Google’s code repository is speculated to be the largest in the world. It was classified as an ultra-large-scale system and can manage tens of thousands of contributions every day. The code is stored in a single repository that is over 80 terabytes large. What was the reason behind the decision to choose the monorepo model? According to an article published by Rachel Potvin and Josh Levenberg, Google codebase consists of around one billion files. Throughout 18 years of its existence, tens of thousands of developers worldwide have made 35 million commits. Supporting such a colossal codebase and maintaining good performance for tens of thousands of users is a challenge. 

Pros & Cons

The Monorepo model has many advantages. It enables extensive code sharing and reuse, simplifies dependency management, enables large-scale refactoring and makes collaboration across teams easier. Moreover, it improves code visibility and provides a clear tree structure. There are a few downsides, though. With a growing codebase grows its complexity. This can lead to the problem of creating unnecessary dependencies. With an increasing scale, code discovery may become more and more difficult. There is no per-project access control. Monorepo also requires more storage by default.

Tools to use in a monorepo

How about smaller-scale applications built by thousands of developers around the world every day? Could a monorepo be of any use in such cases? Of course! A quick search on the Internet provided me with at least 11 different tools for a monorepo. They include Yarn Workspaces, Bit, Nx, Rush, Lerna, Bazel (Google), Buck (Facebook), Pants (Twitter),  Pleaso, Oao and Bolt. As I haven’t had experience using any of them except for Nx, I will expand on this one a little bit.

Nx was developed by Nrwl and is a tool that facilitates the development of monorepo applications of all sizes. It helps to build, test and deploy the app. It has support for TypeScript, React, Angular, Cypress, Jest, Prettier, Nest.js, Next.js, Storybook, Ionic and many more and provides a robust CLI, caching and dependency management. I like Nx because it generates a nice and clear dependency graph to understand a project’s structure. It shows what parts of your project have been affected by a change in your code. It rebuilds and tests only those parts in isolation from the rest of the application. This makes working with monorepo way faster. 

Example

Let’s say that you want to use Nx for your next project in React. You can create your first workspace by merely typing the command npx create-nx-workspace@latest. This command will prompt you for a project name, a preferable CSS format option, and ask if it should use Nx Cloud (enables distributed computation caching).

Nx will prompt you for a project name and a preferable CSS format option and ask if it should use Nx Cloud (enables distributed computation caching). Now you will see a bunch of new files in your directory. 

The application is placed in the /apps folder. It already has a Jest config file and linting set up. It also contains a pre-populated React component. So thanks to this single command, we get a fully functioning React app. You can open the app in the browser window by running the command nx serve your-app-name.

Now, let’s say that I want to add a new Next project to my workspace. To do this, I can simply add an appropriate plugin and type the command nx g @nrwl/next:app my-app. This command provides everything needed to bootstrap a new application into the existing workspace.Using Nx, you don’t have to worry about configuring Jest or even wiring in your components. It also contains pre-configured Cypress tests. 

To get familiar with other useful commands, you can run nx --help or nx list. These commands display a list of available commands and plugins respectively.

The snippets above are just a few out of many useful Nx functionalities. All of them have been documented here, and I highly recommend to take a look at them and check out Nx tutorials. If you prefer using UI instead of typing commands, there is an Nx Console plugin for VS Code. It enables us to see all the available commands, along with all the projects within the application. 

Last few words

In this short article, I tried to introduce the idea of the monorepo model. It looks like an efficient way of handling all packages in the same codebases. Many big companies with huge repositories have successfully used Monorepoe, but it seems like it can be useful for projects of any scale. Multiple tools make working with monorepo nice and easy.

Would you like to know more about Monorepo? We’d be happy to help. Write to us at hello@start-up.house