🍒 Cherry-Picked Nx v19 Updates
Tags: nx, monorepo, angular, javascript
Published: 2024-05-27 07:42:07

## **Release Note 19 (2024–05–06)**


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gntztp74u86psyhl50uv.png)](https://github.com/nrwl/nx/releases/tag/19.0.0)

## **\[🌊 Nx Core\]**

### **Metadata Property in Project Configuration**

Already covered in [my previous blog post on v18.3](https://medium.com/javascript-in-plain-english/cherry-picked-nx-v18-3-updates-0502ff485629), Nx introduced a new `metadata` property in the `project.json`:

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

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

```typescript
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;
}
```

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](https://medium.com/javascript-in-plain-english/reproducible-nx-workspace-with-hugenxs-conventions-a247c0541049).

### **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](https://medium.com/u/2817fb68583) related to Webpack configurations:

Before

```typescript
const { NxAppWebpackPlugin } = require('@nx/webpack');
const { NxReactWebpackPlugin } = require('@nx/react');
```

After

```typescript
const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
```

### **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:

```typescript
    "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}"
      }
    },
```

Now you can specify it globally:

```typescript
    "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
      },
    },
```

## **\[💎 Project Crystal\]**

### **Add generators to convert projects to inferred targets**

* [https://nx.dev/nx-api/cypress/generators/convert-to-inferred](https://nx.dev/nx-api/cypress/generators/convert-to-inferred)
    
* [https://nx.dev/nx-api/eslint/generators/convert-to-inferred](https://nx.dev/nx-api/eslint/generators/convert-to-inferred)
    
* [https://nx.dev/nx-api/playwright/generators/convert-to-inferred](https://nx.dev/nx-api/playwright/generators/convert-to-inferred)
    

## **\[💫 Upgrades\]**


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zebwi59uc1lspjvvi8pv.png)
](https://rollupjs.org/migration/)

### **Support React 18.3**


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2picw75r05v7po7kf9xj.png)](https://github.com/facebook/react/blob/main/CHANGELOG.md)

## **\[🌐 nx.dev\]**

### **Main Navigation Menu**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcijj90ocro1ntef35q0.png)

### **New Blog Page**

[https://nx.dev/blog](https://nx.dev/blog)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8erv4v82kbfms8eo4sai.png)


### **New Enterprise Page**

[https://nx.dev/enterprise](https://nx.dev/enterprise)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8e16vy4au8n3vlq0klx.png)


## **\[☁️ Nx Cloud\]**

### **DTE v2**

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

```typescript
NX_CLOUD_DTE_V2: 'true'
```

---

> ***Looking for some help?*** *🤝**Connect with me on* [***Twitter***](https://twitter.com/jonathan_gelin) *•* [***LinkedIn***](https://www.linkedin.com/in/jonathan-gelin/) *•* [***Github***](https://github.com/jogelin)

---

## **Related**

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xde8flkefkaw405vk004.png)](https://jgelin.medium.com/the-nx-series-d83b92185539)