Being on-trend, Monorepos are widely used for huge software projects. Google, Facebook, and other global companies rely on this code architecture approach in their software development management. 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 create 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 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 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.
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 those 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:
/__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 nxAt the moment, we are going to generate the initial project layout:
$ mkdir monorepos && cd monorepos && npx [email protected] helloapp --preset=appsYou 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 frontendWe 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 frontendWe 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. In order to pre-generate a component, we run:
$ nx g @nrwl/react:component label --project=frontendI 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.
Changes will be applied automatically if the command nx serve frontend is still running.
Add backend microservice
Our frontend is up and running, but 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/expressOnce 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=frontendThat command creates the initial backend code as well as puts it into our apps/backend folder. It also creates an apps/frontend/proxy.conf.json file, containing the backend address for 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 backendThe 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/jsAfter 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 backend API server to use the just generated “core” library.
Rebuild and restart the backend service to see the changes.
$ nx build backend
$ nx serve backendLink 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.
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.