Building React Apps with the Nx Standalone Setup
Published: 2024-06-12 18:51:40


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:

```bash
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:

```bash
npm start
# or
nx serve
```

Your application will be available at [http://localhost:4200](http://localhost:4200).

### Running Tasks

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

```bash
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:

```bash
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:

```bash
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:

```bash
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:

```json
{
  "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:

```bash
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:

```bash
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](https://nx.dev/getting-started/tutorials/react-standalone-tutorial)