David (ダビッド ) | 23 days ago | 5 min read

Nx: Why It's My Go-To Tool for TypeScript Projects

I’ve been designing and deploying software for nearly 20 years. Along the way, I've repeatedly faced a classic challenge: how do we manage projects made up of multiple parts—a backend, a frontend, shared libraries—without going crazy?

Basically, there are two ways to organize your code in Git: multi-repo, where each service, application, and library traditionally gets its own repository, and monorepo, where everything lives in a single repository. You can find more details in my post where I discuss these organizational types.

Getting back to the original question, the short answer is "with a monorepo," although a smarter answer would be "with a tool that supercharges that monorepo." Today, I want to talk about that tool: Nx. This post is an introduction based on my own experience, the first in a series where we'll explore its full potential.

Organized Chaos: Why a Monorepo?

Imagine this scenario: you're building a modern web application. You have a NestJS REST API and a React frontend. Both parts need to share the same data interfaces (DTOs), the same validation logic, or even utility functions.

The traditional approach would be to have two separate repositories. Soon, the problems start to creep in:

You update an interface in the backend and forget to replicate the change in the frontend.
Keeping dependencies in sync is a manual and error-prone process.
Build, test, and linting configurations are duplicated and diverge over time.

A monorepo tackles this by keeping all the code in a single repository. But a monorepo without tooling is like a city without roads. And this is where Nx shines.

What Exactly is Nx?

Nx isn't just a monorepo manager. It's an extensible and intelligent build system designed to make working with monorepos fast, consistent, and scalable.

Think of Nx as the brain that understands your entire codebase. Its key concepts are:

Workspace: This is the monorepo itself, the container for all your projects.
Projects: Inside a workspace, you have projects. Nx distinguishes between applications (apps), which are executable (your API, your web app), and libraries (libs), which are reusable pieces of code (UI components, shared logic, etc.).
Dependency Graph: This is Nx's superpower. It analyzes your code and creates a map of which project depends on which other. You can visualize it with the nx graph command, and it's a fantastic way to understand complex architectures.

The Killer Features: What Does Nx Offer?

Intelligent Caching: Nx remembers the results of the tasks it runs (builds, tests...). If you haven't changed a project's code or its dependencies, Nx won't re-run the task. It will retrieve the result from the cache in milliseconds. This dramatically speeds up CI/CD pipelines.
Code Generators: With nx generate @nx/react:component MyComponent, you create a new component with all its configuration, test files, and styles, following best practices. It saves you time and maintains consistency.
Executors: These are responsible for running tasks. Nx provides executors for building, testing, and serving your applications, but you can also create your own.

The Power of the Plugin Ecosystem

Nx's functionality is expanded through plugins. For a stack like the one I use in my example project (React + NestJS), the essential plugins are:

@nx/js: For managing pure TypeScript/JavaScript libraries.
@nx/react: Full support for React applications, including Vite.
@nx/nest: Everything you need to build robust APIs with NestJS.

Strengths vs. Weaknesses

✅ Strengths:

Blazing-fast speed: The caching is, simply put, revolutionary.
Consistency and Scalability: It enforces a structure that facilitates teamwork and project growth.
Confidence in a TypeScript Stack: When working with TypeScript on both the frontend and backend, having everything under the Nx umbrella gives you tremendous confidence in managing types and dependencies.

⚠️ Weaknesses (based on my own experience):

Initial Learning Curve: At first, Nx's structure, its configuration files (project.json, nx.json), and the sheer number of options can be overwhelming. You have to get used to it.
Mastering the Plugins: The hardest part for me was getting familiar with managing all the plugins and the options each one offers. Once you overcome that barrier, it becomes very intuitive.
Prerequisite: To get the most out of it, you need a solid foundation in TypeScript and a good understanding of how tsconfig.json files work. This knowledge will save you a lot of headaches with path resolution and monorepo configuration.

Practical Case: My Full-Stack Project with Nx

To put all this to the test, I've developed a full-stack application:

Stack:
- Frontend with React (Vite),
- Backend with NestJS, and TypeORM for interacting with a PostgreSQL database. Everything is set up to run with Docker and a CI/CD pipeline in GitHub Actions.
The Problem: I wanted common objects (interfaces, DTOs, validators) between the frontend and backend to be a single source of truth. I also wanted the entire platform in one place to navigate the code and its configuration much faster.
The Solution with Nx: To share classes and other elements, the strategy was to create a shared library (libs/tds-bm-common) within the monorepo. For everything else, the monorepo itself already provides the organization I need.

// Example in a backend file (NestJS)
import type { CreateFolderDto, UpdateFolderDto } from '@tds/tds-bm-common';

// The same import works in the frontend (React)!
import type { CreateFolderDto, UpdateFolderDto } from '@tds/tds-bm-common';

No more duplication and mismatches. The organization Nx provides is, simply put, the backbone of the entire project.

You can find how I'm working with this system in the following repository:

Conclusion and Next Steps

My journey with Nx started out of technical curiosity several years ago, but I quickly saw the practical advantages it offered for developing and maintaining JavaScript/TypeScript projects. The initial time investment in learning its philosophy is well worth it, with a significant long-term payoff in project maintainability and scalability.

This post is just the tip of the iceberg. To see the full potential, including its integration with CI/CD and the new AI features, the Nx team has prepared this summary video that is pure gold.

As you've seen, the true power of Nx is revealed when we integrate it with other tools. That's why, in upcoming articles in this series, we'll dive deep into them.

Now, over to you: Do you use Nx in your daily work? What's your favorite monorepo tool? Have you faced the same problems? I'd love to read about your experience in the comments!