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:
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:
âââ 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:
# 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:
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:
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:
Remove the –dry-run flag to apply the changes. The generator will create:
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 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:
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:
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