Nx’s New Look in v8
Today, we are happy to announce the release of Nx 8 which has a fresh new look, improved React support, and leverages the new features of Angular 8!
Nx is a set of extensible dev tools for monorepos, which we developed at Nrwl based on our experience working at Google and helping Fortune 500 enterprises build ambitious applications.
Recap: What happened in Nx 7.x?
A lot of features have been added since Nx 7.0 was released back in October 2018.
Nx.dev — New Website
We launched a new website for Nx in February 2019. Nx.dev has a lot of resources for beginners as well as advanced users of Nx:
React Support
To serve the needs of organizations which utilize frameworks other than Angular or multiple frameworks, we added React Support in Nx 7.7. This also means React developers can now leverage features such as code generation, formatting, and monorepo development!
Try this today:
npx create-nx-workspace@latest react-proj --preset react # Create a new workspace with a react appCypress Support
To improve the e2e testing experience, we added Cypress Support in Nx 7.0. Cypress is an end-to-end testing tool which provides a better developer experience with features like a GUI and time-travel debugging.
Nest Support
In continuation to the Node Support added in Nx 6.4, in Nx 7.3 we added Nest Support to make it easier to create robust backends that will scale in the same repo as frontend code! Nest is an opinionated Node framework inspired by Angular.
Try this today:
npx create-nx-workspace@latest nest-proj --preset nest-proj # Create a workspace with a Nest appWhat is new in Nx 8?
Pluggable Package Structure
Nx 8 introduces a new pluggable package structure where the features of Nx are split out into individual packages:
- @nrwl/workspace: Provides the core of Nx, like `affected` and Workspace Schematics
- @nrwl/angular: Provides code generation for Angular, Ngrx, and DataPersistence
- @nrwl/react: Provides code generation and tools for React
- @nrwl/nest: Provides code generation and tools for Nest
- @nrwl/express: Provides code generation and tools for Express
- @nrwl/jest: Provides tools to run Jest
- @nrwl/cypress: Provides tools to run Cypress
With this new package structure, you can pick and choose only the capabilities that you need to use. For example, if you only use Angular, you do not need to add React capabilities and vice versa. You can also use these packages outside of Nx in any Angular CLI workspace! Simply add them by running ng add:
ng add @nrwl/angular
ng add @nrwl/react
ng add @nrwl/nest
ng add @nrwl/express
...Visit our API Docs to see the new structure.
We made this change to make it easier for the community to extend Nx. We look forward to seeing the new capabilities the community creates!
We have provided migrations for current Nx users which will make the upgrade as effortless as possible.
Improved React Support
We are continuing to make Nx a great tool for React development. Nx 8.0 brings component generation to React apps.
npx create-nx-workspace@latest react-proj --preset react # Create a new workspace with a react app
ng g c home --style emotion # Creates HomeComponent w/ EmotionWe also made the existing schematics more robust: using class vs functional components and pascal vs spinal case filenames.
Differential Loading
The Angular CLI team has added the ability to build applications which utilize Differential loading to ship modern (and less) code to modern browsers. Differential loading produces both ES2015 and ES5 bundles in the index.html and allows the user’s browser to decide which bundles should be used. Modern browsers, such as the latest versions of Chrome, Safari, Firefox, and Edge all support ES2015 and will use the ES2015 bundles. Legacy browsers, such as IE11 will use the ES5 bundles. Differential loading does not require complications to your deployment and can be deployed just like apps today. Nx 8 now defaults to differential loading for React and Web applications as well as Angular applications!
Angular 8 and Ivy Support
Angular 8 launched just today with a lot of new features! Some of these features include:
- Differential Loading
- Lazy Loading using Dynamic Imports
- Angular Ivy (experimental preview)
- Web worker support
Nx 8 enables all of these features including the capability to generate an application which uses Ivy!
npx create-nx-workspace@latest angular-proj --preset angular-ivy # a new workspace with an Angular project built with Ivy
npx create-nx-workspace@latest angular-proj --preset full-stack # a new workspace with a full stack application built with Angular Ivy and NestJSWe do not recommend moving production apps over to Ivy just yet, but it is a good time to start experimenting with it, and it is very easy in Nx.
Read more about Angular 8 in the official announcement!
Getting started with Nx
We encourage you to review our documentation to see how to get started with Nx, whether you have an existing Angular Application or are starting a new project. We hope you find it helpful.
How to Update Nx
Updating Nx can be done with the following commands and will update your dependencies and code to the latest version:
yarn update
# Or for NPM
npm run updateExplore More
As always, if you are looking for Angular consulting, training and support, you can find out more about how we work with our clients here.
Tune into Nrwl’s upcoming live broadcast, “Building with Bazel” by registering for your free Nrwl Connect account at connect.nrwl.io. Details about the broadcast will be sent to all Connect members to remind you to tune in on June 12th! A video link will also be emailed after the event.
If you liked this, click the 👏 below so other people will see this here on Medium. Follow Jason Jean and @nrwl_io to read more about Nx and Nrwl. Also follow Jason, Nx, and Nrwl on Twitter!
