Setting up monrepo using nx

A blog on creating and maintaining multiple react applications using nx

creating and maintaining a monorepo is the most effective way to avoid rewriting your code across multiple application, Nx is a popular tool which helps us to achieve this.It have many features like smart & distributed caching which only rebuilds what changed, Dependency graph visualization, parallel execution, support for many frameworks

Setting up a nx workspace

We will be creating 2 react applications which will consume shared ui, util files

Create a react monorepo

Bash

1
npx create-nx-workspace@latest react-monorepo --preset=react-monorepo

this will create a repo with app folder inside it with a react application named react-monorepo

Add a new project to the monorepo

Bash

1
nx g @nx/react:app apps/my-app --bundler=vite

Create a shared package which houses ui, utils for entire monorepo

command to create a shared ui

Bash

1
nx g @nx/react:library ui --directory=packages/shared

command to create a utility library

Bash

1
nx generate @nx/js:library formatting --directory=packages/utils

Importing packages made inside your package folder

React

1
import { YourComponent } from '@react-monorepo/shared'
2
import { formatting } from '@react-monorepo/utils'

Parallel execution

Bash

1
nx run-many --target=build --all    # Build all projects
2
nx run-many --target=test --all     # Test all projects
3
nx run-many --target=lint --all     # Lint all projects
4
nx run-many --target=serve --all    # Serve all apps (caution with ports)

Individual execution

Bash

1
nx serve project_name

See graph

Bash

1
nx graph

Thankyou!

-Varun Narayanan