The Nx framework provides the most important tools and features for building frontend applications and backends. In this article, we’ll look at how to build React apps in particular using the tool collection, from setting up a workspace to testing the finished application.

Nx supports developers in developing applications, building on a set of standard libraries. It doesn’t matter if the application uses Angular, Vue, or React. It also doesn’t matter if it’s a frontend application or a Node.js backend. For all these environments, Nx provides for a collection of tools and standard architecture. The main features of Nx are:

• Support in the development process through tests, build tools, and static code analysis
• Speed in the application of tools by checking only the relevant and respectively affected code passages
• Caching of results to further speed up the build process.
• Consistent command syntax, regardless of which environment is used
• Generators help automate code changes
• Nx’s plug-in architecture makes it easy to extend the platform. The community already provides solutions for many standard problems as plug-ins.

In this article, we’ll take a concrete look at using Nx in a React project and go into detail about its various features.

Setting up an Nx workspace

One of Nx’s most important features is the command line interface. The command npx create-nx-workspace creates a new Nx workspace. More specifically, the command line starts an interactive process that leads us step-by-step through the generation of a new application. The first question in this process is the workspace name. This is crucial for the name of the directory where the application is located. The name cannot contain a space. Nx will also translate this name into lowercase letters.

The second question that the initialization process asks is what should actually be created in the workspace. The list of supported solutions ranges from an empty workspace with a basic structure, to full-fledged React or Angular applications, to backend applications with Nest.js and Express. The --preset=react option ensures that React is set as a preselection when calling npx create-nx-workspace. Subsequently, the initialization process asks for the name of the application.

The fourth question deals with application styling. In addition to standard solutions such as CSS or SASS, popular React libraries such as styled-components, emotion, or styled-jsx are available for selection.

In the last step, the installation routine asks whether the application should use the Nx Cloud service to improve the build process. This service is free in the basic version, but is also available as a relatively inexpensive paid service that includes some additional features compared to the free variant.

For the sample application, we choose the workspace name shopping. The application will be a React application and will be named shopping-list. Styled components are used for styling.

After all of the questions have been answered, Nx sets up the workspace and the application it contains. The base directory that contains the workspace is named shopping and contains a number of configuration files and some subdirectories.

• apps: The individual applications of the workspace are located in the apps directory. By answering questions, Nx has created the shopping-list subdirectory in the apps directory. The shopping-list directory contains the React application.
• libs: This directory contains libraries of the workspace which can be used in the applications.
• tools: The tools directory contains helper scripts that can be used in the workspace for automation and development support.
• workspace.json: This file contains the configuration of individual applications in the workspace. For example, it configures the executors – the scripts that are executed for the application.
• nx.json: This file defines more information about and implies dependencies between workspace projects, such as tags.
• tsconfig.base.json: This file contains the basic configuration for TypeScript for all applications in the workspace. It is usually extended in individual applications and adapted to the respective requirements.

As you can already see from the basic file system hierarchy, an Nx workspace is based on the idea of a monorepository. This type of project setup supports all forms of web projects, from simple and small projects to very large applications. Nx shows its strength in applications when the workspace contains multiple applications and libraries. The idea behind the monorepo approach is that the repo’s individual applications are independent of each other, but are still loosely thematically connected. This allows the applications to complement each other and share libraries. It is also possible for the applications to share infrastructure, such as a build system, configurations, or tools. This creation of a workspace generates synergy effects that grow with the monorepository’s scope.

Nx does not force you to use the monorepo approach. So it is also possible to develop a classic React application with Nx without the repository containing an additional library or further applications. The backend implementation can also be completely independent of the Nx workspace. However, the development team loses some of Nx’s benefits as a result.

Besides the predefined monorepo structure, the Nx CLI is one of the centerpieces in an Nx workspace.

Unlike the Create-React-App-Project, the Nx CLI accompanies developers through the entire lifecycle of an application, from project creation, to generating various structures, to building the application. The Nx CLI developers created the tool with the idea of reusability across different frameworks and libraries. Therefore, the CLI is based on a plug-in architecture that is constantly supplied with new and improved extensions from the Nx project developers and community.

The Nx CLI is available via the command nx. Two different variants are possible. The CLI can be installed globally with the command npm install --g nx. Afterward, the nx command is available system-wide. Alternatively, the Nx CLI can also be executed with NPX. Meanwhile, the trend is moving away from globally installed packages that fix one version of the package for the entire system. The advantage of running with NPX is that the latest version will always be executed and no requirements are placed on the executing system. Of course, as a whole, it works with Yarn as a package manager using the command yarn nx.

Nx Executors – execute commands in the project

Normally, a React app created with Create React App has a set of npm scripts that are used to launch, build, test, and eject the configuration. However, the application generated by Nx lacks a package. json file. Therefore, there are no npm scripts here either. Instead, you can configure executors in the workspace.json file in the root directory of the Nx workspace that serves a similar purpose. For a standard React application, the following targets are predefined:

• Build: This script builds the application and prepares it for production use. By default, the applications are built in the dist directory in the root directory of the workspace.
• Serve: During development, the Serve script ensures that the application is put into development mode and changes to the source code are immediately visible in the browser. The applications use port 4200 in development mode. In the workspace.json file, the port of the serve target can be adjusted under the options property using the port property, so that multiple applications can also be run in parallel.
• Lint: The Lint script checks the source code of the application with ESLint against predefined rules for violations of the coding style and known antipatterns.
• Test: The test script executes the unit tests of the application using the Jest test framework.

The individual targets are executed with the command nx or npx nx run :, where the shortened notation without run is just an alias for the run notation.

In the definition of the targets in the workspace.json file, the executor property specifies the package that is used for that target, followed by a colon and the name of the executor within the package. An example is the executor @nrwl/web:build, which builds an application for production use.

Nx Generators – generate code ...