DEV Community


Posted on

Setting up a Monorepo with NX for React & NestJS


Have you ever been asking yourself "How do I actually set up a mono-repository from Scratch that contains pretty much everything I need to get started with a Full-Stack Web-App ๐Ÿค”"?

Well this might be the answer if you don't mind giving nx a try. It's basically a tool that can be used as an abstraction layer on top of npm or yarn respectively to help managing "huge" repositories containing multiple apps, modules and libraries.

So... "Why do I need yet another tool instead of just using yarn or npm"?

  • Caching: No more "run tsc on preinstall" when changing a branch or installing dependencies ๐Ÿ™Œ
  • Task execution management: you can e.g. lint all affected files rather than the whole workspace ๐ŸŽ‰
  • Boilerplate Scripts: No (or at least just a minimum) manual configuration of Script-Setup required to run, build, test or lint each application.

Enough theory let's dig into the steps required for an initial setup.


First of all make sure you have nodejs and npm installed.

  • Install nx globally (I'll continue with npm you can use yarn tho).
npm i nx
Enter fullscreen mode Exit fullscreen mode
  • Initialize a new nx workspace with a default React-App called client. I just found it easier to add the NestJS Application afterwards, the other way round should work as well. ;)
npx create-nx-workspace@latest
Enter fullscreen mode Exit fullscreen mode

I chose react as preset, client as name and scss as stylesheet when prompted.

  • Install required dependencies for NestJS.
npm install -D @nrwl/nest
Enter fullscreen mode Exit fullscreen mode
  • Add a new NestJS Application called api to the workspace.
npx nx g @nrwl/nest:app api --frontendProject=client
Enter fullscreen mode Exit fullscreen mode
  • (Optional) Add a new library for shared types.
nx g @nrwl/node:library types
Enter fullscreen mode Exit fullscreen mode

Done ๐Ÿฅณ

Your app is now ready to go and you can start to try out some basic nx commands, e.g.

  • nx build <app>
  • nx serve <app>
  • nx lint <app>
  • nx test <app> where <app> is client or api.

Or you could do some format checks or linting:

  • nx format:check
  • nx lint:affected
  • nx lint ... but wait it's only linting the "default" project client ๐Ÿค”

Not quite - some optimisations

Usually you'd want to perform tasks like

  • "run all tests" or even "run all tests in parallel"
  • "lint all projects"

That's where we'll have to add some scripts to our root package.json manually. So let's add the following scripts that makes use of some of the CLI-Parameters that nx provides:

"test": "npx nx run-many --all --target=test --parallel"
"lint": "nx workspace-lint && npx nx run-many --all --target=lint --parallel"
Enter fullscreen mode Exit fullscreen mode

Aaaaand that's it - now you should have everything ready to go with your new Full-Stack React + NestJS project :)

The sample project can be found as a template-repository on Github.

Thanks a bunch and keep coding clean ๐Ÿค™

Discussion (0)