Monorepo and Nx Tool

Greetings, Developer! This blog will provide an analysis of Monorepo and its associated tools. We will begin by defining Monorepo and examining its advantages and disadvantages. We will then examine the Nx tool, which is utilized in the development of modern monorepo applications. 

What is Monorepo? 

“Mono repo” refers to a single repository with numerous distinct projects and well-defined relationships. It functions essentially as a large, version-controlled code repository for projects and libraries. The term “mono repo,” which stands for “monolithic repository,” should not be confused with “monolithic architecture,” which is a method of creating independent software.

Monorepo-style development is an approach to software development in which:

• You can develop multiple projects within a single repository.
• The interdependence of these projects facilitates code sharing between them.
• You can rebuild and evaluate the projects affected by your modifications. There is no requirement to build and test every project in the repository. 

Several big businesses, like Google, are well-known for using monorepositories. Google chose to implement Monorepo early on and expanded its usage as the organization expanded. The Google Monorepo was conducted in 2015: 

• 86 terabytes of data. 
• 2 billion lines of code. 
• 9 million unique source files. 

Google uses a monorepository since it is essential to foster an open and collaborative culture. 

Difference between Monorepo and Monolith? 

A monorepo is a comprehensive code base that contains numerous projects that may or may not have interdependencies, while a monolith (or monolithic application) is a service or a group of services focused on a single project. However, the project can consist of numerous sub-projects. Usually, we associate a monolith with a singular entity containing related data. Monolith is a single-tiered application created to function as a single service. A monolith can be handled within a monorepo. On the contrary, a monorepo is not suitable to store within a monolithic application; it is better suited for use with microservices. 

Thus, monorepo and monolith are not the same. On the other hand, monorepos drastically reduces the cost of developing libs, microservices, and microfrontends by making code sharing and cross-project refactoring simpler. Therefore, deployment flexibility is typically increased by implementing a Monorepo. 

Pros and cons of Monorepo 

Advantages of Monorepo: 

• Easy visibility: It will be simpler to analyse the code when working on microservices with Monorepo. It will make the code simpler to comprehend and easier to find and fix issues. Moving code across repositories is substantially slower than altering the code in a monorepo and changing the overall code structure because of direct access to all microservices.

• Code sharing: Code sharing is one of Monorepo’s core components. Rather than duplicating the code, you can write your code as a module that can be called from any project. Teams can store several microservices in the same repository and use common models, shared libraries, and helper code among them. It is much simpler to increase the DRY (ness) of your code when we can reuse similar patterns, components, and types not only between several front-end libraries but also between the front-end and back-end.

• Standardisation: Monorepo makes code standardization easier. You have the authority to make each team member follow uniform coding standards for all projects. Monorepo encourages excellent practices by allowing several projects and libraries in your repository to utilize the same linter and prettier configurations.

• Simplified Dependency Management: Monorepos can simplify internal and third-party dependency management. Referenced dependencies are all in the same code base, which helps address issues like the diamond dependency problem and the risk of having numerous projects with different versions of the same dependency.

• Atomic changes: When making changes that will affect other projects or libraries (for example, an API specification), you can track and deploy all changes on a single branch or commit, reducing the need to locate all relevant projects and the additional coordination work that comes with it.  

Disadvantages of Monorepo: 

Although monorepos can also have certain drawbacks,

• Managing a large monorepo can be challenging, particularly if the project involves many services or applications. Moreover, build times may be prolonged when all code is built simultaneously. 

• Access control: In certain cases, your organisation might not wish for each engineer to have access to the complete codebase. This requires planning, coordination, and customisation. 

Tools For Building Monorepo: 

Many tools are available for building Monorepo applications. 

Monorepos are neither a good nor a bad tool for development teams. Conversely, there are several compelling justifications for their capacity to propel an engineering organization forward, along with several tangible challenges associated with their application. 

Nx Framework:

Nx is a framework that enables you to design, test, and build your project at any scale using the most popular front-end and back-end frameworks, including React, Angular, NestJs, and Express. To facilitate this, Nx comes preconfigured with an extensive set of tools that simplify your Monorepo’s administration.

Features of Nx Frameworks 

• Nx offers a centralized workspace configuration that makes it easier to manage monorepo. You can create projects, libraries, and dependencies in your monorepo to organize and manage your codebase better.
• Nx offers the ability to build micro-front-ends and share the same component in React and Angular applications. You can code your component logic once and then utilize it in your project without any modifications. In addition to that, all projects and libraries will have testing tools such as Cypress, Storybook, and Jest. 

• You can create a dependency graph of the workspace to get a quick overview of your project structure.
• Nx has certain eslint rules that enable you to meticulously decouple and isolate your library and dependencies.
• It offers generators that assist in establishing components, services, modules, and other code artifacts. This saves time during development and guarantees uniformity across projects.

Let Us look at how to set up a Nx workspace: 

• Open a terminal in the project folder and type.

npx create-nx-workspace nx-blog #[npx create-nx-workspace ]

• Select the integrated Monorepo option, which allows you to create different applications with different frameworks.

• Then, select the apps option, which will give you an empty monorepo.

• Open the project in vscode, and you will find the following folder structure:

 

• Let’s decode the folder structure. The most important things to remember are apps, libs, nx.json, and package.json.

• • apps folder: The apps folder is where all the applications you make using various frameworks are stored. For instance, when you create a react app, the base react app code will be in the “apps” folder, and the same applies to Angular and Next.js.
  • libs folder: Every project in the workspace uses all the libraries, shared components, and utils stored in the libs folder. For instance, all components needed for the project need to be in this folder. Nx suggests a best practice, i.e., APP should contain 20% code and libs should contain 80%.
  • Package.json: It’s the same thing that contains all the third-party libraries that you install and use across all the projects in the workspace.
  • Nx.json 

• Next, we will proceed with installing the NextJS application in our workspace. To do that, run the below command and use npm to install the next package. Once this has been implemented, you can update package.json. 

 npm install --save-dev @nrwl/next

• Then, we must install next and then create an app in next.

npx nx g @nrwl/next:app NxNextBlog      [NxNextBlog- Application Name] 

• Make use of the generator to create pages, components, and libraries. 
  • To create pages  

npx nx g @nrwl/next:page  --project=

• • To create components  

npx nx g @nrwl/next:component  --project=

• • To create library  

npx nx g @nrwl/next:lib 

• To learn more, look at this documentation 

 

• After running this command, a new project with next is created in the app folder.

 

• Next, install serverless node TS

npm i @ns3/nx-serverless 

• Let’s create a serverless project using the command

npx nx generate @ns3/nx-serverless:app serverless-node-ts 

• You can also visualize the dependency graph in visual format by running the command

npx nx graph

 

Nx project Example:

• This is the folder structure that we follow for a project.

 

• Let’s decode this folder structure.

• • Here, we have two applications.

• • • app-initializer [next Ts]
    • api-app – initializer [serverless node TS]

• • Under the libs folder, we have four folders.

• • • app-initializer: It contains components and features that only belong to the app-initializer application.
    • assets: It contains all the assets that need to be in this workspace, and the assets are accessible by all applications in this project.
    • Shared components: It contains shared components that are reusable across all applications inside the workspace, like Navbar, Sidebar, Input etc.
    • themes: It contains global themes that are to be followed across all projects in the workspace.

Conclusion: 

In summary, monorepos represent an exceptional methodology for software development that presents a range of benefits and obstacles. These repositories contain multiple projects or services, enabling code sharing, collaboration, and standardized development practices. Monorepo development is especially helpful for large-scale projects since it makes dependency management easier, guarantees atomic updates, and improves visibility. 

Nx Workspace actively designs an innovative collection of development tools to streamline the creation of modern monorepo applications. Nx offers a comprehensive solution for streamlining the development workflow in a monorepo by providing integrated features for code generation, dependency management, and task execution.