Getting Started

TLDR

npx create-nx-workspace myapp --preset=react
cd myapp
ng serve myapp

Creating an Nx Workspace

Using npx

npx create-nx-workspace@latest myworkspace

Using npm init

npm init nx-workspace myworkspace

Using yarn create

yarn create nx-workspace myworkspace

Adding Capabilities

If you haven't specified any presets, you will get an empty Nx workspace. There are no applications to build, serve, and test. You can run the following to add capabilities to the workspace:

Using npm

npm install --save-dev @nrwl/react # Adds React capabilities
npm install --save-dev @nrwl/web # Adds Web capabilities
npm install --save-dev @nrwl/angular # Adds Angular capabilities
npm install --save-dev @nrwl/node # Adds Node capabilities
npm install --save-dev @nrwl/express # Adds Express capabilities
npm install --save-dev @nrwl/nest # Adds Nest capabilities

Using yarn

yarn add --dev @nrwl/react # Adds React capabilities
yarn add --dev @nrwl/web # Adds Web capabilities
yarn add --dev @nrwl/angular # Adds Angular capabilities
yarn add --dev @nrwl/node # Adds Node capabilities
yarn add --dev @nrwl/express # Adds Express capabilities
yarn add --dev @nrwl/nest # Adds Nest capabilities

Creating Your First Application

After the capability is added, you can now create your first application via:

ng g @nrwl/react:application myapp

The result will look like this:

<workspace name>/
├── apps/
│   ├── myapp/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.tsx
│   │   │   ├── polyfills.ts
│   │   │   └── styles.css
│   │   ├── browserslist
│   │   ├── jest.config.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   └── myapp-e2e/
│       ├── src/
│       │   ├── fixtures/
│       │   │   └── example.json
│       │   ├── integration/
│       │   │   └── app.spec.ts
│       │   ├── plugins/
│       │   │   └── index.ts
│       │   └── support/
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── index.ts
│       ├── cypress.json
│       ├── tsconfig.e2e.json
│       ├── tsconfig.json
│       └── tslint.json
├── libs/
├── tools/
├── README.md
├── workspace.json
├── nx.json
├── package.json
├── tsconfig.json
└── tslint.json

Serving Application

Run ng serve myapp to serve the newly generated application!

3.1 KiB Raw Blame History