Nx Setup with a New Project
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
Nx Setup with an Existing Project
If you have an existing Create React App project, you can gain the benefits of Nx's computation cache without modifying the file structure by running this command:
If you have an existing Lerna or Yarn workspaces repo, you can gain the benefits of Nx's computation cache without modifying the file structure by running this command:
For more information on adding Nx to an existing repository see the migration guides
Nrwl maintains plugins for Jest, Cypress, ESLint and Storybook, 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 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
myorg/ ├── apps/ ├── libs/ │ └── libA/ │ ├── src/ │ └── tsconfig.json ├── package.json └── tsconfig.base.json
Every Nx workspace has a file structure similar to this:
myorg/ ├── apps/ ├── libs/ ├── tools/ ├── workspace.json ├── nx.json ├── package.json └── tsconfig.base.json
Nx helps split up your code into separate projects. Projects come in two varieties - applications and libraries.
/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 different kinds of libraries, and each library defines its own external API so that boundaries between libraries remain clear.
/workspace.json defines each project in your workspace and the executors that can be run on those projects.
/nx.json adds extra information about projects, including manually defined dependencies and tags that can be used to restrict the ways projects are allowed to depend on each other.
/tsconfig.base.json sets up the global TypeScript settings and creates aliases for each library to aid when creating TypeScript imports.