NX Monorepo: Setting up React Apps and Shared Libraries

In modern front-end development, managing multiple projects or apps within a single codebase can quickly become cumbersome. This is where monorepos come into play. A monorepo is a software development strategy where multiple projects are stored in a single repository. Tools like NX make managing a monorepo for React applications, shared libraries, and more, incredibly efficient.

If you are unaware of Monorepo and trying to understand if you need it. You can check this article below:

Why Monorepo Architecture? A Guide to Streamlining Code Management

As modern software systems grow in complexity, so does the challenge of managing code across multiple projects, dependencies, and teams. A strategy that’s gaining popularity to address these challenges is monorepo architecture. This approach brings multiple projects, services, and components together in a single code repository, streamlining development workflows, improving

Agile CoderSmruti Ranjan Badatya

In this blog, we’ll go over how to set up React apps and shared libraries using NX, explore some essential commands, and explain how to manage testing and dependencies within your monorepo.

If you are a video person, you can check this video that will be showing exactly what we are trying to learn in this article:

What is NX?

NX is a powerful set of extensible tools built on top of Angular CLI and designed to help developers build, manage, and test multiple projects within a monorepo. It provides a structured and scalable workflow for managing different types of applications (like React, Angular, also provides the option to create apps for various other stacks, and mixed stacks can be present, etc.), as well as shared libraries, services, and more.

Getting Started: Initial Setup

Before diving into the specific commands, let’s first ensure that you have NX installed.

1. Install NX CLI globally (if not already installed):

npm install -g nx

2. Create a new NX workspace for React apps:

npx create-nx-workspace@latest <workspace-name>

3. Choose React as your stack when prompted.

NX also provides the option to create apps for various other stacks, and mixed stacks can be present in the workspace as well.

4. You can choose what Framework to use for your React Stack. For pure React select None.

5. For setting up a mono repo in the workspace, we need to choose the Integrated Monorepo option

6. Give a suitable name to the application

7. Then we will be asked to choose the bundler, you can choose as per your choice.

Vite is the most popular bundler for React in 2024, it uses esbuild internally which is very efficient and lowers the build size significantly.

8. Then if you want to add e2e testing, choose a runner, I will go with none for now:

Cypress is a very popular testing library. I would recommend this if you want to opt for e2e. This has a great community to help as well.

9. Then we will be asked for the Style Sheets, I will select Tailwind. You can check out other options as well.

10. We can skip the CI provider, although you can opt for it if required.

11. You can learn about Remote caching and decide whether to enable it or not. I am not going to use this.

In short, Remote caching means storing the dependencies in NX cloud, so when we need it during CI builds, the builds will be faster, taking less time to pass the pipelines.

That's it. Now, we will have a workspace with a react app that has already been created. Here are the relevant commands

1. nx serve app1 - to start the server
2. nx show project app1 - to show the project details
3. nx test app1 - to run the tests for app1
4. nx lint app1 - to run the lint for app1

Creating a React Shared Library

We can create a React UI library that can be shared with multiple React applications using this command:

nx g @nx/react:library libs/shared-ui

This will again ask us for some prompts like

1. What unit test runner should be used? Jest
2. What bundler would you like to use to build the library? Vite

Here are the relevant commands for the Library:

1. nx lint shared-ui - to run the lint for shared-ui
2. nx test shared-ui - to run the tests for shared-ui

Using the Shared Library in any React App

So, first of all, we have to add the alias for the shared library in the tsconfig.base.json, add the following

{
  "paths": {
    "@shared-ui": ["libs/shared-ui/src/index.ts"]
  }
}

@shared-ui will be the path for importing all the components in the react applications.

Now, we can import the components defined in @shared-ui, but before that, we have to import and export all the components from shared-ui/src/index.ts .

export { default as Component1 } from "./Component1";
export { default as Component2 } from "./Component2";

Now, in any of the React Applications, we can use the component like this:

import { Component1, Component2 } from "@shared-ui";

Checking the Dependency Graph

So, when we build a lot of React Apps and libraries in the workspace, sometimes it gets difficult to go through the tree of dependency that is what depends on what.

nx dep-graph

This command will run a development server that will show a dependency graph between apps, and libraries. And also what command depends on what other commands.

For example, the build of app1 depends on the build of shared-ui, and same goes for app2

Using NX for a monorepo architecture empowers developers to manage multiple projects and shared libraries in a structured, efficient way. From dependency management to testing, NX simplifies complex workflows, making it a top choice for modern front-end development.

Whether you’re building a single React app or managing a large-scale system with multiple projects and shared libraries, NX provides the tools you need to succeed.

Start small by setting up a monorepo with a single app and shared library, then gradually expand as your system grows. With NX, you’ll be well-equipped to handle the challenges of modern software development.

That's it for today. See ya 👋 !