Skip to main content

Nx and React

Nx is a smart and extensible build framework to help you develop, test, build, and scale with React and React frameworks like Gatsby, Next.js, Docusaurus, ... and React Native.

Create a React Workspace with Nx#

By running the following command in your Terminal or Command prompt:

Create nx workspace
npx create-nx-workspace --preset=react

Create a React application#

Create react app: this command creates a new React app named todos
nx generate application todos

Running the generate command above will add two projects to your workspace:

  • A React application
  • E2E tests for the React application
    React App and its test suite Cypress project

Serve application#

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

npx nx serve todos

Add React capabilities to an existing Nx workspace#

If you have already an existing Nx workspace that was not preset with React or it is an empty workspace, then you can add React capability (the React core plugin) to the workspace by running the command below :

yarn add @nrwl/react

Generate a React application#

Command to create a React app called frontend
nx g @nrwl/react:app frontend

The frontend project is a full React app scaffolded with main.tsx, an entrypoint file:

apps>frontend>src>main.tsx
import { StrictMode } from 'react';import * as ReactDOM from 'react-dom';import { BrowserRouter } from 'react-router-dom';
import App from './app/app';
ReactDOM.render(  <StrictMode>    <BrowserRouter>      <App />    </BrowserRouter>  </StrictMode>,  document.getElementById('root'));

By the way, if you look in the frontend-e2e folder, you’ll see the Cypress project with the traditional structure of any Cypress test suite:

Cypress test suite structure