How to build a monorepo with the Nx tool?

blank
Share via:

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

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

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 storing all of your separate pieces of code in a single powerful repository rather than handling many small repositories. A monorepo, for instance, will house both website and mobile application codes in one location.

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

One of the biggest advantages of monorepos is that every update can be made in a single atomic commit. When developers have access to the source code, they can view all of 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.

Nx monorepo development

Nx is an advanced set of extensible monorepo development tools that focuses on modern full-stack web technologies. Nx offers you a holistic development experience, the ability to generate consistent code and share 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, 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 those modules. This 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 use their favorite backend and frontend frameworks and integrate them 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:

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

lder contains backend and frontend applications code, the libs folder contains common code for both frontend and backend, 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

Now, 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 🙂 how powerful this tool is. But let’s move forward and add the first Express backend code.

Add frontend application

As we already have the initial project layout, we are going to generate our first ReactJS application.

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, these options can be chosen based on your project requirements. Now, we are starting our frontend 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. To pre-generate a component we run:

$ 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 frontend code to use our Label component.

blank

If command nx serve frontend is still running, changes will be applied automatically.

Add backend microservice

Our frontend is up and running but yet unaware of a backend service. Let’s fix it 🙂

Generate backend code

At the very beginning, we have to install an express-generator to be able to produce backend code.

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

Once this stage is completed, we will create our first backend application and tell it which frontend project it has to link to.

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

That command creates initial backend code and puts it into our apps/backend folder. It also creates apps/frontend/proxy.conf.json file, which contains the backend address for a local development.

All we need to do now is to test, build and start our backend API.

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

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

Generate core library code

As we already have our backend 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 import alias “@backend/core”.

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

We are going to modify our backend API server to use the just generated “core” library.

blank

Rebuild and restart 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 backend API. Let’s update our Label component to use the backend API server.

blank

Hurray, we are all set. Feel free to explore more useful Nx plugins here.

Try modern dev experience with Nx monorepo build

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 frontend and backend 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. 

Let’s talk about your project

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

Leave a Comment

Scroll to Top