---
title: 'Nx 19.5: StackBlitz, New Features, And More!!'
slug: 'nx-19-5-adds-stackblitz-new-features-and-more'
authors: ['Zack DeRose']
cover_image: '/blog/images/2024-07-25/nx-19-5-thumbnail.png'
tags: [nx, release]
---

## Table of Contents

In this blog post:

- [StackBlitz Support](#stackblitz-support)
- [NEW: Pattern Support for `targetDefaults`](#new-pattern-support-for-targetdefaults)
- [NEW: Individual Targets Can Now Opt Out of Parallelism](#new-individual-targets-can-now-opt-out-of-parallelism)
- [Experimental: Gradle Test Atomization](#experimental-gradle-test-atomization)
- [Support for React 19 (rc) and Angular 18.1](#support-for-react-19-rc-and-angular-181)
- [NEW: Nx Cloud Hobby Tier](#new-nx-cloud-hobby-tier)
- [Automatically Update Nx](#automatically-update-nx)
- [Monorepo World Conference Speakers to Be Announced Soon!!](#monorepo-world-conference-speakers-to-be-announced-soon)

## StackBlitz Support!!

Nx now has support for Stackblitz. This means that you can create a StackBlitz with a whole Nx Workspace inside of it and run all Nx capabilities from their embedded terminal.

[![Nx Workspace in Stackblitz](/blog/images/2024-07-25/react-app-in-stackblitz.jpg)](https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-cwruaw?file=apps%2Freact-app%2Fsrc%2Fapp%2Fapp.tsx)

[Check out the example](https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-cwruaw?file=apps%2Freact-app%2Fsrc%2Fapp%2Fapp.tsx) above - you can use the standard command in the terminal:

```shell
> nx serve react-app
```

to develop your application inside of the stackblitz.

We're excited for this as it opens up many interesting use-cases, including easier ways of sharing examples, better opportunities for reproduction of issues or bugs, and potential for us to use embedded examples in our documentation in the future.

Web Assembly (or WASM) is the underlying technology being used here, so in addition to stackblitz any other tools built on a node context should now work as well.

## NEW: Pattern Support for `targetDefaults`

When using the Atomizer features of plugins like [`@nx/playwright`](/nx-api/playwright) and [`@nx/cypress`](/nx-api/cypress), you end up creating tasks with dynamic but predictable names.

![Tasks Created With Atomizer](/blog/images/2024-07-25/e2e-task-names.jpg)

Notice how the `e2e-ci--src/example.spec.ts` and `e2e-ci--src/test.spec.ts` tasks here are created by the `@nx/playwright` plugin based on the playwright spec files present in your workspace.

We've now added pattern matching to `targetDefaults` task names as a way to target these dynamic tasks.

The following will set all such tasks to depend on their `build` task:

```json
{
  "targetDefaults": {
    "e2e-ci--**/*": {
      "dependsOn": ["build"]
    }
  }
}
```

Note that our plugins will set sensible configurations here out of the box when creating new workspaces using our generators.

Read more about [reducing configuration with `targetDefaults`](/recipes/running-tasks/reduce-repetitive-configuration#reduce-configuration-with-targetdefaults) and [how you can define task pipelines with `targetDefaults`](/features/run-tasks#defining-a-task-pipeline).

## NEW: Individual Targets Can Now Opt Out of Parallelism

One of our goals in changing the landscape of CI is to make CI more declarative - defining the what rather than the how.

Unfortunately, to accomodate for port collisions on end-to-end test, we've long adjusted our generated ci script to look like this:

```yml
- run: npx nx affected -t lint test build
- run: npx nx affected --parallel 1 -t e2e-ci
```

This is unfortunately more imperative, as we are starting to give instructions on how to run and order your CI, rather than defining what to run in our CI. In addition, these instructions will still run `lint`, `test`, and `build` targets first and wait until they all complete before then running `e2e-ci` - which leaves some inefficiencies on the table.

To address this, all tasks now support a `parallelism` property. By setting this property to `false`, you can now inform the Nx task runner to not attempt to run a certain task in parallel. This way we can define parallelism as a property of a task, and move our task running to be more declarative again.

Both our `@nx/playwright` and `@nx/cypress` plugins will now set `targetDefaults` for atomized tests to turn off `parallelism` from now on:

```json
{
  // ...
  "targetDefaults": {
    "e2e-**/*": {
      // ...
      "parallelism": false
    }
  }
}
```

This way we can simply run the command:

```shell
> nx run-many --targets=lint,test,e2e-ci,build
```

And in CI, Nx Agents will allow all tasks to run in parallel on the same machine, except for the atomized end-to-end tasks, which will only run in isolation.

Learn more about how you can [Parallelize Tasks Across Multiple Machines Using Nx Agents](/ci/intro/tutorials/github-actions#parallelize-tasks-across-multiple-machines-using-nx-agents):

{% youtube
src="https://youtu.be/0YxcxIR7QU0"
title="Faster e2e Tests!"
width="100%" /%}

## Experimental: Gradle Test Atomization

Our new [`@nx/gradle` plugin](/nx-api/gradle) now supports Test Atomization out of the box.

![Gradle Atomized](/blog/images/2024-07-25/gradle-atomized.jpg)

This means that as you add tests in your gradle projects, we'll automatically create a new task for each test class, allowing you to distribute the execution of these tasks in your CI pipeline, just like with our `@nx/playwright` and `@nx/cypress` plugins.

## Support for React 19 (rc) and Angular 18.1

Nx 19.5 adds support for the React 19 release candidate and updated our Angular package to support the latest Angular minor version: 18.1.

When using our `@nx/angular` package, we'll automatically update you to the latest angular version when you run our migration. Using the `--interactive` flag you can choose to opt in or out of the latest Angular version:

```shell
> nx migrate latest --interactive
✔ Do you want to update to TypeScript v5.5? (Y/n) · true
✔ Do you want to update the Angular version to v18.1? (Y/n) · true
Fetching @angular/core@18.1.2

 NX   The migrate command has run successfully.
```

Our `@nx/react` package will now create new React applications using version 18.3, and we now support the new experimental `reactCompiler`. Users can install the [`babel-plugin-react-compiler` package](https://www.npmjs.com/package/babel-plugin-react-compiler) and you can follow [this guide for how to enable it with Nx](/recipes/react/react-compiler#react-compiler-with-nx).

Note that due to the extent of breaking changes coming with React 19, we will not be providing a automated migration to React 19 via [`nx migrate`](/nx-api/nx/documents/migrate).

## Automatically Update Nx

As always - updating Nx and its plugins is easy as we ship an [automated migration command](/features/automate-updating-dependencies).

```shell
npx nx migrate latest
```

After updating your dependencies, run any necessary migrations.

```shell
npx nx migrate --run-migrations
```

## NEW: Nx Cloud Hobby Tier

Our new expanded Hobby Tier now adds trial support for all features AND includes credits to run Nx Agents.

Sample the entire suite of features to see its impact on your organization. Start with everything, scale when you need more.

[![Nx Cloud Tiers](/blog/images/2024-07-25/start-with-everything-scale-when-you-need.jpg)](/pricing#plan-details)

Checkout the [plan details page](/pricing#plan-details) for more info, and see how Nx Cloud can help you!

## Monorepo World Conference Speakers to Be Announced Soon!!

[![Monorepo World](/blog/images/2024-07-25/monorepo-world.jpg)](https://monorepo.world)

The [Monorepo World conference](https://monorepo.world) is coming up soon on October 7, 2024 at the Computer History museum in Mountain View, California.

[Get your tickets now](https://ti.to/nx-conf/monorepoworld2024), consider [requesting access to the invite-only Enterprise Summit on October 8](https://ti.to/nx-conf/monorepoworld2024), and be sure to stay tuned as we'll be announcing speakers soon!

## Learn more

- [Nx Docs](/getting-started/intro)
- [X/Twitter](https://twitter.com/nxdevtools) -- [LinkedIn](https://www.linkedin.com/company/nrwl/)
- [Nx GitHub](https://github.com/nrwl/nx)
- [Nx Official Discord Server](https://go.nx.dev/community)
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
- [Speed up your CI](https://nx.app/)