Today, we are happy to announce the release of Nx 10.4 that includes the introduction of cleaner ESLint configuration, Pnpm compatibility, and more!

Nx is a set of Extensible Dev Tools for Monorepos, which we developed at Nrwl based on our experience working at Google and helping Fortune 500 enterprises build ambitious applications at scale.

If you aren’t familiar with it, learn about Nx at nx.dev/angular and nx.dev/react.

Cleaner ESLint Configuration

ESLint Presets

Nx 10.4 continues to improve the ESLint configuration. Again, James Henry, the maintainer of @typescript-eslint, helped introduce configurations for users to use in their repositories with just one line of code!

// .eslintrc.json
{
  "extends": ["plugin:@nrwl/nx/react"],
  ...
}

With that one line, that configuration now includes all of the rules that we recommend for working with React. Similarly, we also have other configurations that are specific to certain projects allowing different projects to easily configure their linting rules. Below is a list of the different configurations that we currently offer (and plan to offer):

• plugin:@nrwl/nx/typescript, our recommended rules for Typescript files
• plugin:@nrwl/nx/javascript, our recommended rules for Javascript files
• plugin:@nrwl/nx/react-typescript, our recommended rules for Typescript files with React
• plugin:@nrwl/nx/react-javascript , our recommended rules for Javascript files with React
• plugin:@nrwl/angular , our upcoming recommended rules for Angular files! This is not released yet but it is being actively developed.

Before, we used to generate 200+ lines of ESLint configuration for every single React project. Using these configurations, we now generate only 4 lines of configuration for React projects to achieve the same result!

// apps/react-app/.eslintrc.json
{
  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"]
}

Note: Existing configurations will have duplicate rules intelligently removed from the configuration during the migration. If you have not touched your configuration at all, 200+ lines will be removed from your configurations but the configuration will continue to function as it did before!

Extending these configurations to meet your needs is still just as simple as it was before!

// .eslintrc.json
{
  "extends": ["plugin:@nrwl/nx/react"],
  "rules": {
    // Any rules added here will be added on top of the configuration above.
    "no-console": "warn"
  }
}

ESLint Overrides

Along with preset configurations, Nx 10.4 also configures the workspace to use ESLint overrides. A monorepo and even projects within a monorepo may have different types of files that require different rules. For instance, rules from @typescript-eslint require files to be processed via @typescript-eslint/parser which has a bit of unnecessary overhead on top of espree, the default ESLint parser. To avoid this unnecessary overhead, Nx configures ESLint to apply certain rules only to certain files via overrides.

// .eslintrc.json
{
  "rules": { /* Other config that applies to all files */ },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"]
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"]
    }
  ]
}

Note: Using overrides along with the configurations described in the above section allow us to easily apply the appropriate rules to the appropriate files

For Angular users, while we have not released a configuration for Angular files yet, the improvements in Nx 10.4 provide a great foundation for providing a recommended configuration for Angular projects in the near future.

Pnpm Compatibility

Performant Npm (pnpm) is a relatively new alternative to npm that is faster than both npm and yarn. As the name suggests, pnpm is faster and more efficient than both npm and yarn.

We recently put some effort into making Nx compatible with pnpm! Users who have pnpm setup, can now use pnpx create-nx-workspace@latest --package-manager pnpm to create a new workspace using pnpm. From a quick comparison, the time it takes to create a new workspace for each package manager is the following:

• npm : 42.86 seconds
• yarn: 29.20 seconds
• pnpm : 19.37 seconds

Along with having a faster alternative for creating new workspaces, using a faster package manager is significant for most monorepos. Because monorepos have relatively more code in them, it usually leads to having more dependencies and longer install times as well. We switched from yarn to pnpm for our internal monorepo and saw the install time go from 3 minutes 30 seconds to 1 minute 15 seconds!

Learn more about pnpm on their official site and considering giving it a try!

Nx is built with Nx

This section doesn’t include new features but is more of a fun fact portion of the blog post that you might find interesting.

If you have visited our GitHub repository lately, you will find that Nx, is now developed using Nx. In fact, this has been the case ever since Nx 9.4! While this yields little to no improvements to the user experience of Nx, this does make it much easier to contribute to Nx! For example, to build Nx, we use this command: npx nx run-many --target=build --all --parallel.

In Nx 10.4, we took this one step further by building the application that runs in the browser when using the nx dep-graph command, with the @nrwl/web:build builder. There are no changes to the dep-graph application just yet but with the improved development experience of developing the dep-graph application, we plan to make some improvements that we were not easy to achieve before.

Looking Forward to Nx 11

Last week, Angular 11 was released. Work on Nx 11 has already begun as well including some ambitious changes that are going to take a few more weeks of time. As usual, once we wrap up Nx 11, we will also provide plans for what to expect coming leading up to Nx 12. Stay tuned for our announcement of Nx 11 for more details!

How to Update Nx

Each release of Nx also contains additional minor features and bug fixes. Updating Nx can be done with the following commands, and will update your dependencies and code to the latest version:

yarn update

Or for npm

npm run update