Nx 13 Roadmap

[vsavkin]

Read this post to learn about what is new in Nx 12.

Core

Supporting Large Workspaces

In Nx 12, we have updated our code change analysis and hashing algorithms to make sure that only relevant parts of workspace.json get into the hash. Now changing the global config file no longer invalidates the hash of every project or marks everything as affected.

In Nx 13, we will allow you to split your configuration into multiple files. Every project can have nx-project.json with its config in its directory. With this workspace.json will become a lot smaller which will simplify rebasing.

Deps Between Targets

Nx will allow you to specify how targets depend on each other. You will be able to express things like "To test Project A, I need to build all the deps of Project A first". With this, when you invoke nx test a, Nx will run the necessary build tasks automatically (most likely retrieving them from the cache).

More Work on Plugins Adding/Removing Edges

In Nx 12, we provided a way for a plugin to be invoked in the dep graph creation process. Now Nx can analyze Java/Go/Rust/etc similar to JS/TS. We are working on examples, docs, blog posts showing how to do it.

Incremental Builds Are Recommended Way for Mid-Size/Large Apps

Currently, it’s a good option only for large apps. For everything else the costs outweigh the benefits. We are working on a series of improvements to make this a good option for an application of any size. Some of the improvements have already been released (e.g., optimizing cache restoration, which can a problem on Windows due to slow IO), some are going to be released in 12.1 (e.g., Deps Between Targets), and some will be released shortly after (e.g., testing and linting taking advantage of incremental builds).

React & Next.js & Gatsby

We’ve been putting a lot of effort into making Nx the best tool for building any React application. Nx 12 came with a tonne of bug fixes and small improvements. We released a command migrating any monorepo to Nx in 30 seconds. We also released a command migrating existing CRA projects to Nx. We are continuing this work.
In addition, we are planning to:

• Add support for webpack 5 (if the user opts in).
• Merge the React Native plugin into the main repo.
• Add Detox executors for React Native to run e2e tests.
• Improve deployment of Next.js apps to Vercel, Netlify and Firebase -- including deployment of functions.
• Improve support for incremental and distributed builds of large React and Next.js applications.

Angular

We are planning to:

• Add support for Angular 12.
• Add support for WebPack 5.
• Improve support for incremental and distributed builds of large Angular applications.

Storybook

We are planning to:

• Switch from Knobs to Storybook controls based stories, that have been introduced in Storybook v6.
• Rework the Storybook React integration to leverage the same build configuration as the other Nx React apps.
• Allow to have parallel Cypress test execution for Storybook tests.
• Integrate with Storybook Composition.

Nx Console (VSCode Plugin)

We have several engs now working on Nx Console, so expect a lot of improvements.

Some highlights:

• Codelens within workspace.json (run executors directly from workspace.json)
• Provide Debugging support / launch configs
• JSON schema validations for workspace.json (+ nx-project.json)
• Depgraph integrations

Cypress/Jest/ESLint

We’ll update the versions of Jest, Cypress, ESLint, Storybook. We are also working on drastically speeding up tests and lints for large workspaces by utilizing buildable libs.

Nx.Dev is Rewritten in Next.js

The docs site is being rewritten in Next.js. As a result, the process of publishing the docs is going to be streamlined.

Support for Distributed Command Execution

Nx will provide affordances for distributed command execution, where nx affected ... or nx run-many ... or even nx build myapp will be able to run on multiple agents. Nx Cloud is going to use those affordance to provide config-free distribute command execution, but you can also build your own.

Nx 13 will be released in October 2021.

[nartc]

In Nx 12, we will allow you to split your configuration into multiple files. Every project can have nx-project.json with its config in its directory. With this workspace.json will become a lot smaller which will simplify rebasing.

I'm assuming this is a typo where In Nx 12 should be In Nx 13 instead

[violabg]

Great news, keep the hard work.
What I would like to see is, fast refresh support for react applications and react native expo support.

[ruslan-byondxr]

@nartc In Nx 12 you can do it with standaloneConfig

[sirajc]

Thanks for sharing detailed Roadmap. Angular 12 with Webpack 5 support will be part of Nx 13.
Does this mean we have to wait for Angular 12 upgrade until October?

[johanchouquet]

@sirajc, this is also what i don't understand quite well. It seems that nx 12.3.0 already supports angular 12, as this links states. https://github.com/nrwl/nx/releases/tag/12.3.0.

So, supporting angular 12 would imply supporting its tooling, such as webpack 5. But as I was reading the nx 13 roadmap, I'm confused.
@vsavkin @FrozenPandaz

[FrozenPandaz]

Yes! Angular 12 and Webpack 5 (for Angular apps) are supported by 12.3.0!

[johanchouquet]

Thanks for the clarificaiton @FrozenPandaz !

[patdx]

Very exciting changes :)

I hope you will consider experimental support for Webpack 5 sooner than October if possible, even if it is not officially supported yet, and even if the "shiny new features" like module federation, etc, are not usable yet.

I have already started to run into issues with Webpack 4 like:

• Some dependency started using package.json exports field but Webpack 4 does not parse it yet, so I need to manually use Webpack resolve.alias to override it.
• Modern code in NPM packages or my own code must be transpiled before being parsed by Webpack 4 (Since Webpack 4's Acorn Parser is stuck at version 6).

Personally I can work around these issues, but they are difficult to debug, and I think these kinds of issues may affect more people and projects in the coming months, since:

• There is a new push to have ESM only packages
• Some popular tools like Next.js are already going for Webpack 5 by default

Nx is fantastic tool, thank you for maintaining this system :)

[Biffyn]

+1 for Webpack 5 support

[m-sanders]

Adding on to this. We're also eagerly awaiting Webpack 5 support in Nx specifically for Next.js. We're keen to move to Webpack 5 for better tree shaking. We've found that Webpack 4 + Nx libraries re-exporting from index.ts barrel files results in a lot of dead code and deps being included in our bundles. Hopefully Webpack 5 will go a long way to reduce our bundle sizes.

If we have to wait until October, we may need to find an alternative solution for the time being.

[arielweinberger]

Webpack 5 support before October, as an experimental flag, will be very appreciated.

[crates]

@vsavkin - I understand that there's a TON of work that goes into a major version upgrade like this. With that said, why do you suppose it can't be done until October? Is there anything we, as part of the community, can do to help expedite it?

Angular 12 came out today, btw! Now Webpack 5 is supported in production and not just considered experimental.

One more feature request: with ng 12 and Webpack 5, module federation and micro-frontend patterns are finally accessible.
If Nx could include that on their roadmap it would be prospectively HUGE for anyone who needs this pattern.
I can tell you that the massive firm I'm working for would be using Nx immediately for MFEs if it were an option to do so.
MFEs aren't likely to go away any time soon; in fact, they will probably start taking over at big companies in the near future.

[paulm17]

Could support for BlitzJS be introduced for NX 13? Thanks

#4482

[puku0x]

webpack 5 support is coming!
#5892

[binary64]

Cypress: Could you consider including Cypress Component Testing too?
Nextjs: Could you consider supporting ant design?
TypeScript: Is it time to go strict: true yet? 🎸

Fantastic work for the last few versions (since I have started using Nx). It has been a life-changer!

[edbzn]

Cypress component testing is already working using the @nrwl/cypress:cypress executor and the testingType option defined to component.

[OzzyTheGiant]

Is Vue support coming sometime in the future? Would like to try this out on a Vue monorepo, maybe even do custom commands for Go backends

[danielquintero]

https://github.com/ZachJW34/nx-plus

[ChristopherGillis]

@vsavkin When are we expecting this drop? Is there a status page somewhere we can monitor?

[lukasjusko]

@vsavkin Has this landed in NX 13, or is it planned for some minor version in the future?

We are also working on drastically speeding up tests and lints for large workspaces by utilizing buildable libs.