Building React Apps with the Nx Standalone Setup

Hello, fellow developers! Today, let's explore how to set up and optimize a standalone React application using Nx. This tutorial is perfect for those who want the benefits of Nx without the complexity of a monorepo setup.

What You Will Learn

• Creating a new React application with Nx
• Running tasks (serving, building, testing) individually or in parallel
• Using code generators to scaffold components
• Modularizing your codebase for better maintainability

Getting Started

To begin, we need to create a new Nx workspace with a standalone React application. Follow these steps:

Step 1: Create a New React App

Run the following command to create a new Nx workspace and a standalone React application:

npx create-nx-workspace@latest myreactapp --preset=react-standalone

During the setup, choose your preferences:

• Bundler: Vite
• Test runner: Cypress
• Stylesheet format: CSS
• CI setup: GitHub

This command generates a workspace with the following structure:

myreactapp
├── e2e
├── public
├── src
│   ├── app
│   │   ├── app.module.css
│   │   ├── app.spec.tsx
│   │   ├── app.tsx
│   │   └── nx-welcome.tsx
│   ├── assets
│   ├── main.tsx
│   └── styles.css
├── index.html
├── nx.json
├── package.json
├── project.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── vite.config.ts

Serving the App

To serve your new React application, you can use the Nx CLI or npm scripts:

npm start
# or
nx serve

Your application will be available at http://localhost:4200.

Running Tasks

Nx identifies tasks from configuration files, package.json scripts, and project.json. To view these tasks, run:

nx show project myreactapp --web

You can run tasks using the following commands:

• Build the app: nx build
• Run tests: nx test
• Lint the code: nx lint
• Run end-to-end tests: nx e2e

To run multiple tasks in parallel, use:

nx run-many -t test lint e2e

Caching

Nx caches task results to improve performance. If you run tasks again, Nx will use the cached results if no changes were made.

Creating New Components

Nx plugins come with code generators. To generate a new component, use:

npx nx g @nx/react:component hello-world --directory=src/app/hello-world --dry-run

Remove the --dry-run flag to apply the changes. The generator will create:

src/app/hello-world/hello-world.module.css
src/app/hello-world/hello-world.spec.tsx
src/app/hello-world/hello-world.tsx

Modularizing Your Codebase

For better maintainability, split your app into local libraries. Generate libraries using:

nx g @nx/react:library products --unitTestRunner=vitest --bundler=none --directory=modules/products
nx g @nx/react:library orders --unitTestRunner=vitest --bundler=none --directory=modules/orders
nx g @nx/react:library ui --unitTestRunner=vitest --bundler=none --directory=modules/shared/ui

This will create a structured directory with independent libraries.

Importing Libraries

Use the libraries in your app by updating the tsconfig.base.json with library paths:

{
  "compilerOptions": {
    ...
    "paths": {
      "@myreactapp/orders": ["modules/orders/src/index.ts"],
      "@myreactapp/products": ["modules/products/src/index.ts"],
      "@myreactapp/ui": ["modules/shared/ui/src/index.ts"]
    },
    ...
  }
}

Import and use the libraries in your application components.

Setting Up CI

Generate a CI workflow for GitHub:

npx nx generate ci-workflow --ci=github

This command creates a .github/workflows/ci.yml file to run lint, test, build, and e2e tasks.

Connecting to Nx Cloud

To connect your workspace to Nx Cloud for remote caching and task distribution, run:

npx nx connect

Follow the instructions to connect your repository to Nx Cloud.

Conclusion

Nx provides powerful tools to enhance your React development workflow, even in a standalone setup. By leveraging its capabilities, you can build, test, and maintain your applications more efficiently.

By continuously optimizing our development practices, we can evolve into better developers and build more efficient applications.

Ref: nx.dev