Today, we are happy to announce the release of Nx 9.4 that includes many new features, including Gatsby support!

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 at scale.

If you aren’t familiar with it, learn about Nx at nx.dev/angular and nx.dev/react.

Initial support for Gatsby

Nx workspaces support many different types of applications, ecosystems, and libraries. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. Gatsby includes support for multiple data sources, and deployment to many different hosts. Within an Nx workspace, you can now generate a Gatsby application, along with the integration to build, test, and lint the project. Combined with the power of Nx to easily generate shared libraries, integrate with the dependency graph, local caching, and more, your Gatsby applications and websites can work more easily within an Nx workspace. To try out Gatsby:

Install the Nx Plugin for Gatsby in your Nx workspace.

yarn add @nrwl/gatsby --dev

npm install @nrwl/gatsby --save-dev

Generate a new Gatsby application:

nx generate @nrwl/gatsby:app myblog

To serve the application:

nx serve myblog

To build and serve the production application, use the --prod flag.

To build the application:

nx build myblog

We are continuing to work to ensure the support for Gatsby continues to improve. Feel free provide us feedback on GitHub on how to improve the experience.

Customizable workspace layouts

An Nx workspace always has two primary places to give structure the code in your monorepo in the apps and libs directories. This gives you a standardized structure to follow, but in some cases you have an existing folder structure you want to preserve, or you want to use a different structure altogether, while being able to take advantage of what Nx offers. Now, within an Nx workspace, you can customize the folders where applications and libraries are generated.

The excerpt below from an updated nx.json shows the workspaceLayout option, allowing you to put apps in the projects directory, and the libs in the packages directory.

{
  "npmScope": "my-org",
  "workspaceLayout": {
    "appsDir": "projects",
    "libsDir": "packages"
  }
}

The schematics provided by Nx core plugins are aware of the new layout, and generate files, and update configuration accordingly.

Custom Babel configuration

Nx provides standard configuration for presets and plugins for using Babel with React, and Web projects out of the box. You can also extend the configuration through customizing your Webpack configuration. To make extending your Babel configuration more straightforward, Nx now provides multiple levels of customization. A babel.config.json is generated at the root of the workspace that enables proper TypeScript support for all projects in the workspace. A .babelrc file is also generated for each project with sane defaults that you can easily customize. This allows for more granular customization between projects without collisions.

Check out our Nx Plugin for React to see other features provided by Nx, and take another look at Why you should switch from Lerna to Nx for building React projects within a monorepo.

Seamless Connection to Nx Cloud

A small change to use Nx can result it faster builds locally. This time savings can be applied across teams, and across an organization. Nx Cloud provides a distributed cache, to enable faster builds locally, and in your Continuous Integration environments. To make this process even more seamless, Nx Cloud provides a package to connect to Nx Cloud in two easy steps.

First, install the Nx Cloud package:

yarn add @nrwl/nx-cloud --dev

Next, add the Nx Cloud integration to your workspace.

yarn nx g @nrwl/nx-cloud:init

And that’s it! Your account on Nx Cloud will be automatically created, and connected to our free tier and start saving time on your builds. Connect your account using the provided link to get advanced insights about your build process to improve your team’s velocity at https://nx.app.