DEV Community

kevelopment
kevelopment

Posted on

Setting up a Monorepo with NX for React & NestJS

#FirstPost

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.

TL;DR

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)