DEV Community

Cover image for πŸ’ Cherry-Picked Nx v19 Updates
jogelin
jogelin

Posted on • Originally published at jgelin.Medium

πŸ’ Cherry-Picked Nx v19 Updates

Release Note 19 (2024–05–06)

Image description

[🌊 Nx Core]

Metadata Property in Project Configuration

Already covered in my previous blog post on v18.3, Nx introduced a new metadata property in the project.json:

{
  "name": "my-java-project",
  "metadata": {
    "technologies": ["java17"],
    "ciRunner": "ubuntu-20.04-m6a.large",
    "owners": ["backend-team"]
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode

In Nx v19, you’ll be able to generate these metadata directly from your plugins:

export const createMetadata: CreateMetadata = (graph) => {
  const metadata: ProjectsMetadata = {};
  metadata['my-java-project'] = {
    metadata: {
      technologies: ['java17'],
      ciRunner: 'ubuntu-20.04-m6a.large',
      owners: ['backend-team']
    }
  }
  return metadata;
}
Enter fullscreen mode Exit fullscreen mode

This opens many possibilities for project customization like listing technologies or the runner you want to use on your CI.

It also helps define a project type described in my article πŸ‘₯ Reproducible Nx Workspace with HugeNx’s Conventions.

Change imports for the Webpack plugin

It is always a better idea not to expose all utilities in the same index.ts especially when they are not related. It has an impact on the config loading for example.

Here is a good decision from Nx related to Webpack configurations:

Before

const { NxAppWebpackPlugin } = require('@nx/webpack');
const { NxReactWebpackPlugin } = require('@nx/react');
Enter fullscreen mode Exit fullscreen mode

After

const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
Enter fullscreen mode Exit fullscreen mode

Global forwardAllArgs for nx:run-commands

Before, when you had multiple commands in your nx:run-commands executor, you had to specify for each command if you wanted or not to forward arguments:

    "configure-branch-environment": {
      "executor": "nx:run-commands",
      "options": {
        "commands": [
          { 
            "command": "echo \"BRANCH=$(git branch --show-current)\" > .local.env",
             "forwardAllArgs": false 
          },
          { 
            "command": "echo \"COMMIT_SHA=$(git rev-parse HEAD)\" >> .local.env",
             "forwardAllArgs": false
          },
          { 
            "command": "ls",
             "forwardAllArgs": false 
          },
          { 
            "command": "cat .local.env",
             "forwardAllArgs": false 
          }
        ],
        "cwd": "{projectRoot}"
      }
    },
Enter fullscreen mode Exit fullscreen mode

Now you can specify it globally:

    "configure-branch-environment": {
      "executor": "nx:run-commands",
      "options": {
        "commands": [
          "echo \"BRANCH=$(git branch --show-current)\" > .local.env",
          "echo \"COMMIT_SHA=$(git rev-parse HEAD)\" >> .local.env",
          "ls",
          "cat .local.env"
        ],
        "cwd": "{projectRoot}", 
        "forwardAllArgs": false
      },
    },
Enter fullscreen mode Exit fullscreen mode

[πŸ’Ž Project Crystal]

Add generators to convert projects to inferred targets

[πŸ’« Upgrades]

Image description

Support React 18.3

Image description

[🌐 nx.dev]

Main Navigation Menu

Image description

New Blog Page

https://nx.dev/blog

Image description

New Enterprise Page

https://nx.dev/enterprise

Image description

[☁️ Nx Cloud]

DTE v2

https://nx.dev/ci/reference/release-notes#dte-algorithm-v2-experimental-flag

NX_CLOUD_DTE_V2: 'true'
Enter fullscreen mode Exit fullscreen mode

Looking for some help? 🀝Connect with me on Twitter β€’ LinkedIn β€’ Github


Related

Image description

Top comments (0)