Is NX the Easiest Way to Set Up a New Repository for React and Beyond?

For developers who started their journey with Create React App (CRA) and haven’t found an easy, modern alternative, this is for you.

Everyone loved CRA because it made getting started effortless: scaffold a workspace quickly and start coding. NX takes that same simplicity and adds more power, flexibility, and scalability for modern development.

React’s Recommendations

React’s official documentation offers great starter templates for building new apps, but they focus on a single-app structure, which is one folder that encapsulates everything.

If you’re ready to go further, whether that means modularizing your project into shared libraries or managing multiple apps in one repo, NX has you covered.

Why Developers Are Switching to NX

NX is a powerful open-source build system and monorepo manager that handles everything from a single app to multiple apps and libraries under one workspace.

And it’s not limited to React, you can spin up:

• • React with Vite or Webpack
  • A NestJS backend
  • Angular, Vue, or even Node apps
  • Or mix and match frameworks in the same workspace

NX focuses on workspace management, modularization, and consistency across apps. New integrations are constantly being added. Check out all the supported frameworks on the NX Technologies page.

Let’s Build

Ready to see how simple this is?

First, make sure Node.js and npm are properly installed:

node –version
npm –version

If both commands return valid versions, you’re ready.

If not, install Node.js first, then continue.

NX will create and manage your workspace directory structure.

Navigate to your desired directory and run:

npx create-nx-workspace@latest

You’ll be prompted for setup details:

1. 1. Workspace name: Choose a folder name (e.g., myTestNXSpace).
   2. Workspace stack: Select React, Vue, Angular, Node, or None. (We’ll use React.)
   3. Framework: Choose from None, Next.js, Expo, or React Native. (We’ll choose None for now.)
   4. Application name: The name of your first app (e.g., myNxApp).

NX will continue with questions about configuration (ESLint, Prettier, testing setup, etc.) to help scaffold a well-structured environment right from the start.

Let’s Check it out

Once setup completes, you’ll have a new directory (e.g., myTestNXSpace) structured like this:

├── .github # GitHub specific files
│   └── workflows # GitHub Actions workflows
│       └── ci.yml # CI workflow for the workspace
├── .vscode # VSCode specific files
│   └── extensions.json # Recommended VSCode extensions for the workspace
├── .nx # nx management files and cache(don’t really mess this these)
├── apps
│   └── myNxApp
│       ├── src # Source code for the application
│       ├── public # Public assets for the application
│       ├── index.html # Entry point for the application
│       ├── eslint.config.mjs # eslint flat config setup
│       ├── package.json # Application specific dependencies and scripts
│       ├── tsconfig.app.json # TypeScript configuration for the application
│       ├── tsconfig.json # Base Project Reference for TS Project References
│       ├── tsconfig.spec.json # TypeScript configuration for the tests
│       └── vite.config.ts # Vite configuration for the application
│   └── myNxApp-e2e
│       ├── src # Source code for the e2e tests
│       ├── eslint.config.mjs # eslint flat config setup
│       ├── playwright.config.ts # Playwright configuration for the e2e tests
│       ├── package.json # E2E specific dependencies and scripts
│       └── tsconfig.json # TypeScript configuration for the e2e tests
├── .prettierignore # Prettier ignore file
├── .prettierrc # Prettier configuration file
├── eslint.config.mjs # ESLint flat config setup base workspace file
├── nx.json # Nx workspace configuration file
├── package.json # Workspace level dependencies and scripts
├── README.md
├── tsconfig.base.json # Base TypeScript configuration file to extends all configs from
├── tsconfig.json # Project Reference Config for the workspace
└── vitest.workspace.ts # Vitest configuration for the workspace

At this point you should be able to verify that everything is working by running the following commands:

nx run-many -t build
nx run-many -t lint
nx run-many -t test
nx run myNxApp:serve

This should launch the generated NX welcome screen with useful NX links and information.

Conclusion

Every framework offers a “getting started” guide, but NX goes further by removing the hassle entirely.

With built-in generators, framework integrations, and the NX Console UI, you can:

• • Add new apps and libraries instantly
  • Visualize your workspace architecture
  • Maintain cleaner, modular codebases

Whether you’re building one app or a suite of connected services, NX provides the efficiency, scalability, and developer experience modern teams need.

If you’re ready to modernize your project setup and simplify your dev workflow, RBA can help you integrate NX and optimize your workspace structure for long-term success.

Learn more about RBA’s software engineering expertise.