Nx Setup

Install Nx

Install Nx with npm:

npm install -g nx

Set up a New Nx Workspace

Creating an Nx workspace is done with a single command. Run the following command to set up an Nx workspace with a React app in it.

npx create-nx-workspace --preset=react

Add Nx to an Existing Project

If you have an existing Create React App project, you can gain the benefits of Nx's computation cache and distributed task execution without modifying the file structure by running this command:

npx cra-to-nx

If you have an existing Lerna or Yarn monorepo, you can gain the benefits of Nx's computation cache and distributed task execution without modifying the file structure by running this command:

npx add-nx-to-monorepo

For more information on adding Nx to an existing repository see the migration guide

Configuration

Nrwl maintains plugins for Jest, Cypress, ESLint, Storybook and more, so these tools can be easily added to your repo without the initial cost of setting up configuration files. As new versions of these tools are released, nx migrate latest automatically updates your configuration files, and even source code, to work with the next version. There is a growing list of community plugins that support other tools.

Need to customize your configuration somehow? Configuration files can be modified for the whole repository or at an individual project level. For instance, libA has a tsconfig.json file that extends the global tsconfig.base.json file:

myorg/
├── apps/
├── libs/
│   └── libA/
│       ├── src/
│       └── tsconfig.json
├── package.json
└── tsconfig.base.json

Folder Structure

Nx does not require your workspace to have a particular file structure, but many teams end up having something similar to this:

myorg/
├── apps/
├── libs/
├── tools/
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.base.json

/apps/ contains the application projects. This is the main entry point for a runnable application. We recommend keeping applications as light-weight as possible, with all the heavy lifting being done by libraries that are imported by each application.

/libs/ contains the library projects. There are many kinds of libraries, and each library defines its own external API so that boundaries between libraries remain clear.

/tools/ contains scripts that act on your code base. This could be database scripts, custom executors, or workspace generators.

/workspace.json lists every project in your workspace.

/nx.json configures the Nx CLI itself. It tells Nx what needs to be cached, how to run tasks etc.

/tsconfig.base.json sets up the global TypeScript settings and creates aliases for each library to aid when creating TS/JS imports.