How To Build A Monorepo With The Nx Tool? A Full Nx Monorepo Tutorial

Being on-trend, Monorepos are widely used for substantial software projects. Google, Facebook, and other global companies rely on this code architecture approach in their software development management. Using Monorepos has a lot of benefits, but developers need to choose the proper tools to succeed in achieving these advantages.

There are a lot of excellent monorepo tools with various approaches out there. Nx is one of them. This resource was produced and designed to assist developers in understanding what monorepo is, the benefits they can provide, and how to build one. We offer a tutorial on creating a consistent and “readable” monorepo layout using the Nx generation build system.

What is a monorepo?

A monorepo is a single repository that stores several separate projects linked together. A mono repository is a code architecture concept that involves keeping all your particular pieces of code in a single robust repository rather than handling many small repositories. A monorepo, for instance, will house both website and mobile application codes in one location.

Many major companies, including Google, Facebook, and Uber, leverage Monorepo. Instead of keeping each product or module in its source control system, they are kept in the same location. This approach allows businesses to simultaneously create, debug, and deploy all projects and their reusable components.

One of the most significant advantages of monorepos is that every update can be made in a single atomic commit. When developers can access the source code, they can view all the changes and the relationships across all projects. This way, they can push updates easier and faster. Identifying dependencies is also simple with monorepos since every coder follows the same structure.

What is Nx?

Nx is a powerful toolkit for building scalable enterprise applications with some of the most popular JavaScript frameworks, such as Reach, Angular, Node.js, and some other popular frameworks. It includes advanced features such as сode generation, testing, and plugins for application linting, building, and deploying. Nx is designed to help developers manage the complexity of large codebases and workflows, providing a set of best practices for code management.

Nx is a versatile tool that can be used in various stages of the development process, which can noticeably improve the overall developer experience. For more in-depth information on using Nx and its amazing features, check out our comprehensive Nx monorepo tutorial, where we provided several particular examples of using the Nx tool in application building.

Nx monorepo development

Nx is an advanced set of extensible monorepo development tools focusing on modern full-stack web technologies. The technology offers you a holistic development experience and the ability to generate consistent code, sharing it in a managed way. Nx enables incremental builds as well. It does not rebuild and retest all elements after each commit. Nx makes it easy to share code by providing a workspace, a command-line interface, and cloud-based computation caching.

Nx also examines the repository to discover which modules were affected by a modification and then builds, runs, and tests only these particular modules. It is a time-saving method of doing builds, especially if your modules contain a lot of common libraries. If a large group of developers collaborates in the engineering process, Nx’s guide about sharing code will also be helpful.

Nx employs a distributed computation cache, which means that if one developer has already written or tested similar code, Nx will speed up the command for the entire team in all modules. So, you avoid multiple retesting from scratch. With Nx tools, coders can integrate their favorite backend and frontend frameworks with any modern technology.

Let’s build a monorepo, assuming we have an Express backend API, ReactJS frontend, and use Gitlab-CI for deployments. So, our repo layout will look similar to the following:

/__helloapp
     |_ apps/
     |        |_backend/
     |        |_frontend/
     |_ libs/
     |_ tools/
     |_ …  

The folder contains backend and frontend applications code; the libs folder contains common code for both frontend and backend, and the tools folder has some operational tools to make the coder’s life easier.

Initial Nx tool setup

Let’s assume we already have npm installed; to proceed, we have to install the nx tool. Since we are going to use it a lot, let’s install it globally:

$ npm install -g nx

At the moment, we are going to generate the initial project layout:

$ mkdir monorepos && cd monorepos && npx create-nx-workspace@latest helloapp --preset=apps

You can now explore your basic project layout, take a look at the README file, and you will be surprised by the fact of how powerful this tool is:) But let’s move forward and add the first Express backend code.

get a custom solution for your project

contact our expert

Add frontend application

As we already have the initial project layout, we are going to generate our first application using React. React.js development services are probably the most demanded part of front-end development, so the choice is justified.

Generate ReactJS application

It is as easy as running commands.

$ nx g @nrwl/react:app frontend

We have used scss for a stylesheet format and avoided adding a router. However, you can choose these options based on your project requirements. Now, we are starting our front-end application in development mode.

$ nx serve frontend

We should be able to see the predefined web application at http:// localhost:4200/.

Let’s play around and add our first component.

Monorepo frontend: generate ReactJS component

All is easy with the Nx too, and this step is not an exception. We run the following code in order to pre-generate a component:

$ nx g @nrwl/react:component label --project=frontend

I have answered “Yes” to the question “Should this component be exported in the project? (y/N)” asked by the command above.

Now, let’s update our front-end code to use our Label component.

In case the command nx serve frontend is still running, changes will be applied automatically.

Add backend microservice

Our front end is up and running, but we are unaware of a back-end service. Let’s fix it 🙂

Generate backend code

At the very beginning, we have to install an express-generator in order to be able to produce back-end code.

$ npm install --save-dev @nrwl/express

Once this stage is completed, we will create our first back-end application and tell it which front-end project it has to link to.

$ nx generate @nrwl/express:app backend --frontendProject=frontend

That command creates the initial back-end code as well as puts it into our apps/backend folder. It also creates an apps/frontend/proxy.conf.json file containing the back-end address for local development.

All we need to do now is to test, build, and start our back-end API.

$ nx test backend
$ nx build backend
$ nx serve backend

The Serve command will start the back-end API service at port 3333. We can open it by http:// localhost:3333/api URL.

Generate core library code

As we already have our back-end service built, we can add the core library that could encapsulate the main business logic. Let’s install a plugin first.

$ npm i --save-dev @nrwl/js

After that, we will generate our first library. Let’s assume we have to make it publishable and available by importing the alias “@backend/core.”

$ nx g @nrwl/js:lib core --buildable --publishable --importPath="@backend/core"

Hence, we are going to modify our back-end API server to use the just-generated “core” library.

Rebuild and restart the backend service to see the changes.

$ nx build backend
$ nx serve backend

Link monorepo’s frontend and backend together

At this moment, we have to tell our web application how to use the back-end API. Let’s update our Label component to use the back-end API server.

Hurray, we are all set. Feel free to explore more useful Nx plugins on the Nx website to discover how the monorepo Nx approach may help you improve your development workflow and make your coding experience more efficient.

Try modern dev experience with Nx monorepo build

Nx monorepo set of tools offers a comprehensive and sophisticated development environment enabling you to create scalable and modular projects more quickly and efficiently. Furthermore, Nx monorepo provides advanced tooling and features that can significantly optimize your project’s development process. However, let’s check some of the Nx monorepo pros and cons.

Advantages:

• It is an excellent solution for building a full-stack codebase in a single repository;
• Advanced tooling and features for web development, including code generation, linting, testing, and dependency graph visualization;
• Modular architecture enables developers to build projects in a scalable way, making the maintenance and extension of codebases easier;
• Excellent documentation is available on the official website and in the community.

Disadvantages:

• Nx monorepo’s size and complexity may impact build times, requiring additional strategies to optimize potential performance issues. A large number of projects can also affect a dev’s machine;
• Versioning of packages and projects can be more challenging in a monorepo environment, as changes to one package can affect other projects;
• You need to pay additional attention to prevent coupling between packages;
• Switching to additional tooling inside the Nx can also be quite challenging.

Final thoughts on Nx Monorepo

With Nx, building a monorepo and a full-stack application using common libraries and modern technologies has become easy. As you can see, Nx tools can help us create a solid monorepo and host both front and back-end apps in our location. This unveils new possibilities in large project development, maintenance, and management.

We hope this monorepo build tutorial will be useful for your large projects to offer a modern dev experience and will save time for engineering and space on your repositories. 

FAQ

Our services

JavaScript Development

React.js Developers

Custom Software Development

Dedicated Development Teams

Let’s talk about your project

Drop us a line! We would love to hear from you.

• Richard Zaslavsky Client Partner
• Book a Call