About Nx

Sat, 15 Mar 2025 15:51:42 GMT

Nx is a build system + monorepo tool + smart task runner. The whole thing is rather confusing, so I'm writing this to note down some stuff that I found out.

Target

If you read the docs of Nx, you've probably seen the word being thrown around. Essentially, target is just a fancy word for task, or more precisely, the abstract blueprint for a task. The official definition is "A task is an invocation of a target. If you invoke the same target twice, you create two tasks." (See here). Examples of target include build, test, lint, etc.

Project.json

project.json is just Nx's version of package.json. Meaning, it specifies configuration of 1 project (as opposed to the entire monorepo). It's the preferred way to configure your project when you're working with Nx, as you can do stuff with project.json that you can't do with the traditional package.json.

Caching

In a monorepo, you may need to run a lot of tasks, with different projects. Some tasks depend on each other. They may end up looking like this:

Nx monorepo task graph

If every time you run a task, Nx has to re-run all the tasks that it depends on, then it's going to be slow and a waste of resources. Instead, Nx will cache the results for you. The next time you run the task, if the inputs do not change, then Nx will return the cached result instead of re-running the task. Read more here.

You can configure the inputs that decide whether a task should be re-run or not. You can also configure the cache outputs, which are the stored results of the task that will be restored if it's a cache hit.

Plugin and Executor

Plugins are packages for Nx. Plugins contain executors. Executor is a Node script. One plugin can contain multiple executors.

When you "invoke a target", you're invoking an executor with some options. Of course, you can opt our of using executors and write your own scripts too.

{
  "root": "apps/cart",
  "sourceRoot": "apps/cart/src",
  "projectType": "application",
  "generators": {},
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "options": {
        "outputPath": "dist/apps/cart",
        ...
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "options": {
        ...
      }
    }
  }
}

P/S: Have you heard about "distributed task execution". It turns out tasks can be distributed across multiple machines. Wow.