React Nx Tutorial - Step 1: Create Application

In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies.

Nx has first-class Next.js support

Nx has first-class Next.js support, if you are looking to use it for your project. Read more about it here

Integrated Repo

This tutorial sets up an integrated repo. If you prefer a package-based repo, check out the Core Tutorial.

Contents

Create a new workspace

Start by creating a new workspace.

npx create-nx-workspace@latest

You then receive the following prompts in your command line:

Workspace name (e.g., org name)     myorg
What to create in the new workspace react
Application name                    todos
Default stylesheet format           CSS

Enter the indicated answers.

You can also choose to add Nx Cloud, but its not required for the tutorial.

myorg/
├── apps/
│   ├── todos/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.tsx
│   │   │   ├── polyfills.ts
│   │   │   └── styles.css
│   │   ├── .babelrc
│   │   ├── .browserslistrc
│   │   ├── .eslintrc.json
│   │   ├── jest.config.ts
│   │   ├── project.json
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
│   └── todos-e2e/
│       ├── src/
│       │   ├── fixtures/
│       │   │   └── example.json
│       │   ├── e2e/
│       │   │   └── app.cy.ts
│       │   └── support/
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── e2e.ts
│       ├── .eslintrc.json
│       ├── cypress.config.ts
│       ├── project.json
│       └── tsconfig.json
├── libs/
├── tools/
├── .eslintrc.json
├── .prettierrc
├── babel.config.json
├── jest.config.ts
├── jest.preset.js
├── nx.json
├── package.json
├── README.md
└── tsconfig.base.json

Two projects were added to the workspace:

  • A React application
  • E2E tests for the React application

Serve the newly created application

Now that the application is set up, run it locally via:

npx nx serve todos

Note on the Nx CLI

If you prefer to run using a global installation of Nx, you can run:

nx serve todos

Depending on how your dev env is set up, the command above might result in Command 'nx' not found.

To fix it, you can either install the nx cli globally by running:

yarn global add nx

Alternatively, you can run the local installation of Nx by prepending every command with npx:

yarn nx serve todos

What's Next