Large-scale JavaScript projects can have multiple frontends and backends that interact and share libraries and interfaces with each other. This means there should be effective collaboration between the different teams working on these applications.
Nx is a tool used by Google to scale multiple applications used by different groups of developers in a single Mono repo. In this article, we will learn Nx with a real-life example of how to create a JavaScript Mono repo. You can read more about Nx from its source documentation here.
Why Mono Repo?
A full-stack JavaScript venture at scale can have numerous frontends running on diverse systems. Each frontend seems connected with diverse backend applications and each backend application might assist got to associated with the others. Be that as it may, each autonomous application may have a ton of similitudes since they all have a place to the same JavaScript biological system.
In these cases, Mono repos ended up a incredible way to streamline sharing code, tests and interfacing between different applications. Mono repos has a common code base or git store that oversees diverse applications. They help reinforce collaboration among distinctive teams since everyone has more perceivability of the project, because it could be a single expansive codebase instead of numerous divided codebases.
Tech monsters like Microsoft and Facebook moreover utilize Mono repos for numerous of their JavaScript ventures.
What is Nx?
Mono repo represents an approach to managing the development and deployment of large projects. However, to fully exploit the potential of monorepos, it is imperative to have the right set of tools to manage them effectively. Nx emerged as a tool to streamline tasks such as testing, building, and deploying large-scale JavaScript applications. Consider a situation in which you are tasked with scaling a JavaScript project that includes two separate interfaces built on top of ReactJS and Angular. At the same time, you are managing a JavaScript backend implemented using NodeJS or NestJS, which requires transparent communication with these two frontends. Furthermore, the challenge is to share libraries and interfaces between these three applications. In this context, let's explore how Nx can serve as the solution to achieve this complex combination.
Creating an Nx Workspace
An Nx project in its bare bones is termed a workspace. You don’t need to install Nx separately to create an Nx project, you can do it directly using npx, which comes by default when you install NodeJS and NPM. So, let’s dive right into it and create a new Nx workspace using the following command:
npx create-nx-workspace
You have now created a new Nx workspace. Soft! Let's take a quick look at the boilerplate project we currently have:
Note that the project itself is preconfigured with Jest and ESLint. The related configuration files (jest.config.ts and .eslintrc.json) can be found in the root directory.
In addition, there is a package.json file in the project root directory. Since we are working with monorepo we will have a single dependency management solution for all the applications in our Nx workspace. There is also an nx.json file that specifies your Nx workspace configuration. There are two important folders in the workspace: the application folder and the libs folder. The application folder will store all the different applications in your project. If you expand the app folder, you'll find an Angular project with end-to-end testing enabled. If we add more Angular or responsive projects to our workspace, those projects will be in this app folder.
The libs folder will store all the code you want to share between different applications in your monorepo. If you are using TypeScript, the libs folder is the right place to put some common shared interfaces. You can also place some common UI elements here.
The Nx Console
We can use the powerful VS Code extension called Nx console to easily generate Nx commands.
Adding React to the Nx Workspace
Now let's add the new React app to our Nx workspace. We can do this directly using the Nx console, so you don't need to memorize any such specific commands. Go to the Nx dashboard and select the generate option under “CREATE & RUN GOALS”. This will remove a bunch of commands. You can then select the “Create React App” command:
Once you do that, you should get a form specifying some options for your Angular project. As you start selecting these options, you can see the actual command that is generated on the fly.
Let’s give our React application a name and set css as the default style:
Adding Angular to the Nx Workspace
Now that we've added the Angular app to our monorepo workspace, let's add another interface to our monorepo. This time we are going to add the React app to our Nx workspace. To get React support in the Nx console, you will need to install the @nrwl/react library.
Run the following command at the root of your project:
npm i @nrwl/angular
Running Nx Projects Locally
Head over to the Nx console, chose the run command and then select the individual projects you want to run:
Once you run each of these individual commands, Nx should kickstart the two frontend projects for you, here’s what the React project should look like:
Similarly, you should also have your Angular Project up and running:
Sharing Libraries with Nx
One of the coolest features of Nx for monorepo development is library sharing. In fact, abstraction becomes even more important in monorepo because you can share libraries and interfaces between multiple applications in the same codebase.
Conclusion
In a nutshell, Nx stands out as a very valuable tool designed with the purpose of seamlessly extending single JavaScript repositories covering a wide range of separate frontends and backends. The flexibility it offers in extending the shared library concept is particularly remarkable, and it goes beyond that by facilitating the seamless sharing of important TypeScript interfaces between other applications. each other in the repository.
An illustrative application of this feature is the smooth distribution of the API schema between the repository's backend and UI segments. That way, Nx allows developers to ensure consistent and accurate communication between these two integral parts of the software ecosystem. This streamlined approach not only improves development efficiency, but also contributes to the overall robustness and maintainability of the project. Furthermore, the benefits of Nx go far beyond its technical features. This tool fosters a collaborative and consistent development environment by promoting standardized operations and reducing redundancy. This leads to better code quality, better team coordination, and ultimately a more streamlined development process.
In a nutshell, Nx has emerged as an indispensable asset for projects looking to tackle the complexities of scaling single JavaScript repositories with various frontends and backends. The ability to facilitate the extension of shared libraries and seamlessly share the TypeScript interface between applications improves development efficiency, codebase robustness, and team collaboration. By leveraging Nx, development teams can effectively address the challenges posed by complex single repositories and pave the way for a more successful and sustainable software development journey.