Skip to content

Commit

Permalink
docs(core): Nx 19 blogpost
Browse files Browse the repository at this point in the history
  • Loading branch information
ZackDeRose committed May 7, 2024
1 parent 1fe262a commit f1f2324
Show file tree
Hide file tree
Showing 12 changed files with 173 additions and 0 deletions.
173 changes: 173 additions & 0 deletions docs/blog/2024-05-07-nx-19-release.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
---
title: Nx 19.0 Release!!
authors: ['Zack DeRose']
cover_image: '/blog/images/2024-05-07/nx-19-thumbnail.png'
tags: [nx, release]
---

Hey folks! Zack here.

It's been awhile for me - if you weren't aware, I had something of a [personal tragedy]() in February, not long after our big launch week where we launched Nx 18, which introduced the biggest new enhancement to Nx to date: Project Crystal.

[![Project Crystal](/blog/images/2024-02-05/featured_img.png)](/blog/2024-02-05-nx-18-project-crystal)

You can read more on project crystal [here](/blog/2024-02-05-nx-18-project-crystal). The main thing to know though is that Project Crystal adjusts the idea of Nx plugins, so that the mere presence of the plugin in your Nx Workspace removes the need to maintain any configuration for most cases.

Since I'm starting to return to my duties at Nx, I'm in a situation where I need to catch myself up on everything new that's just landed with Nx 19 - released just earlier this week. So that's exactly what we're going to do in this article. Here's the rundown of what's new:

- [NEW PLUGIN: @nx/gradle](#new-plugin-nxgradle)
- [Nx Atomizer Enhancements](#nx-atomizer-enhancements)
- [Project View Enhancements](#more-project-view-enhancements-for-targets)
- [Generators to Migrate to Project Crystal](#generators-to-migrate-to-project-crystal)
- [BREAKING CHANGE: Updating Bundled Environment Variables: `NX_` to `NX_PUBLIC_`](#breaking-change-updating-bundled-environment-variables-to)
- [General Crystal Polishing](#general-crystal-polishing)
- [New Conference: Monorepo World 2024](#new-conference-monorepo-world-2024)
- [Wrapping Up, And A Heartfelt Thank You](#wrapping-up-and-a-heartfelt-thank-you)
- [Learn More](#learn-more)

## NEW PLUGIN: @nx/gradle

[![NEW PLUGIN: @nx/gradle](/blog/images/2024-04-19/featured_img.png)](/blog/2024-04-19-manage-your-gradle)

We've launched a new first-party plugin for Gradle!

Emily, the engineer that worked on this effort, posted an entire article where you can find the full details [here](/blog/2024-04-19-manage-your-gradle).

Like most of our Nx plugins, you'll be able to use this plugin to generate new applications and projects in your workspace for Gradle, as well as to manage your project dependencies and tasks!

Like all our plugins from here on out, this plugin is supports Project Crystal from the start, which allows us to determine information to create Nx Tasks based on the way your Gradle projects are setup - no further Nx-specific configuration required!

In addition, you can now find [a new tutorial on using Nx with Gradle](/getting-started/tutorials/gradle-tutorial) which will expand on the Java Spring framework's tutorial for multimodal projects and show you how Nx further enhances those features. This tutorial takes you all the way through setting up your CI pipeline with Nx Cloud, so be sure to check it out!

## Nx Atomizer Enhancements

The Nx Atomizer launched in Nx 18 with Project Crystal. Essentially, "Atomizer" is the name we use to describe how Nx will automatically shard out your e2e tests in your CI pipelines via our first party plugins. You can find out more information in the video below:

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

While the Atomizer was great for reducing the wall time of end-to-end tests in CI pipelines, one unfortunate trade-off of the Atomizer was that rather than being able to a single task to represent your end-to-end validation tasks, you instead had a collection of tasks that tended to clutter up tools when viewing your Nx Tasks. It also wasn't very clear which tasks belonged to which group!

We've addressed this in Nx 19 by introducing the concept of Task Grouping inside of our tooling.

Now, when running the command:

```shell
nx show project e2e-angular --web
```

You'll see the following in the project view:

![Nx Show Project Web View](/blog/images/2024-05-07/nx-show-project-view.webp)

Notice how all tasks are now appropriately grouped in the `E2E (CI)` group!

You can also find the same enhancements in Nx Cloud. Below is a view of all tasks in the [CI pipeline](https://staging.nx.app/runs/ctbAZfiLy3), notice how all e2e groups are collapsed by default to give a concise view, while allowing you to expand to see how each individual task is progressing:

![Grouped e2e tests in Nx Cloud](/blog/images/2024-05-07/nx-cloud-atomizer-groupings.gif)

To support this new feature, we've added the concept of `metadata` as a property of Nx projects. You can see this by running the command:

```shell
nx show project e2e-angular --json | jq
```

![Show Project JSON view](/blog/images/2024-05-07/show-project-json.webp)

Notice that the information on how the tasks are grouped is automatically inferred by your Nx Plugin and put into the `metadata` for your project! All Nx Plugins that support Aisomization will do this automatically for you, and if you are writing a custom plugin for your own tool or special use-case, you can leverage this `targetGroups` property to group your targets in Nx and Nx Cloud tooling as well!

## More Project View Enhancements For Targets

In addition to adding `metadata` to Nx projects, we've also added the concept of `metadata` for Nx tasks!

This means that you'll see additional information on tasks in the project detail web view:

![Technology icons in Project Detail View](/blog/images/2024-05-07/icon-in-project-detail-view.gif)

And in Nx Cloud:

![Technology icons in Nx Cloud](/blog/images/2024-05-07/nx-cloud-icons.gif)

This will help easily identify at-a-glance the technology the various targets are using. All this is supported out of the box by our plugins and you should see this as soon as updating to Nx 19.

To see how we support this new feature, checkout the json view of our project again:

```shell
nx show project e2e-angular --json | jq
```

![Highlighting target metadata](/blog/images/2024-05-07/highlight-target-metadata.webp)

Notice how tasks now have a `metadata` property including the `technology` and a `description`. As with the Atomizer, any custom tools can also take advantage of these properties to enable this behavior in Nx and Nx Cloud tooling!

## Generators to Migrate to Project Crystal

As part of Nx 19, we've included migrations for our Playwright and Cypress plugins to allow you to easily opt into Project Crystal features!

To migrate your workspace, you can use the command:

```shell
nx generate convert-to-inferred
```

Before running this command you could expect your project detail view to look like this:

```shell
nx show project my-react-app-e2e --web
```

![Before Migration](/blog/images/2024-05-07/before-migration.webp)

And after running the generator, you can expect your project detail view to look like this:

![After Migration](/blog/images/2024-05-07/after-migration.webp)

Notice that in addition to reducing the configuration in your `project.json` file, this generator will also turn on the Nx Atomizer for you, so Nx will always shard your end-to-end tasks based on the tests present in your workspace going forward.

## BREAKING CHANGE: Updating Bundled Environment Variables: `NX_` to `NX_PUBLIC_`

An important update for folks using environment variables in their builds!

Previously, when building projects your projects in an Nx workspace, our builds were setup to include any environment variables prefixed with `NX_` and include them in the built artifact so they would be accessible there. This is often used for setting things like urls for different versions of external services to hit - for example, sending requests to your local development server while developing, but pointing to the production service for your production build.

Going forward, these environment variables will need to be prefixed with `NX_PUBLIC_`. This is a security consideration, by requiring a more specific prefix, we're making sure that no unintended secrets end up in your production builds unintentionally!

Because of the nature of this change - which will affect many `.env` and similiar type files, we will NOT be providing an automatic migration for this change. So be sure to manually update any environment variables that you want bundled into your builds from `NX_` to `NX_PUBLIC_`.

## General Crystal Polishing

Along with the features above (many of which further build upon the foundation that Nx Project Crystal laid), we've done quite a bit since Nx 18 to polish the features that we introduced with Project Crystal.

You can find a full list of fixes and features applied in this major release [here](https://github.com/nrwl/nx/releases/tag/19.0.0).

![Changelog for Nx 19](/blog/images/2024-05-07/fixes.gif)

With Project Crystal landed now, we're also adjusting our priorities to place a higher importance on stability. You should see this reflected in Nx 19. In future cycles, we've also committed to continuing to reduce the total number of open github issue, and further increasing stability going forward.

## NEW CONFERENCE: Monorepo World 2024

[![NEW CONFERENCE: Monorepo World 2024](/blog/images/2024-05-07/welcome-to-monorepo-world-2024.webp)](https://monorepo.tools/conf)

We've got a new conference coming up: [Monorepo World 2024](https://monorepo.tools/conf)!

This conference will cover all things dealing with monorepos, and we're excited to host it at the Computer History Museum in Mountain View, California this October 7th!

You can [reserve your tickets now](https://ti.to/nx-conf/monorepoworld2024)! In person tickets start at $300 a piece for Early Bird (open until May 31), and online attendance is free.

The [Call for Speakers](https://sessionize.com/monorepo-world) is open now, and will close on June 20, 2024.

We'll be excited to see y'all there!

## Wrapping Up, And A Heartfelt Thank You

That's it for now

## Learn more

- [Nx Docs](/getting-started/intro)
- [Nx GitHub](https://github.com/nrwl/nx)
- [Nx Official Discord Server](/community)
- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
- [Speed up your CI](https://nx.app/)
Binary file added docs/blog/images/2024-05-07/after-migration.webp
Binary file not shown.
Binary file added docs/blog/images/2024-05-07/before-migration.webp
Binary file not shown.
Binary file added docs/blog/images/2024-05-07/fixes.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/blog/images/2024-05-07/nx-19-thumbnail.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/blog/images/2024-05-07/nx-cloud-icons.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit f1f2324

Please sign in to comment.