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

• 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

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

• Install required dependencies for NestJS.

npm install -D @nrwl/nest

• Add a new NestJS Application called api to the workspace.

npx nx g @nrwl/nest:app api --frontendProject=client

• (Optional) Add a new library for shared types.

nx g @nrwl/node:library types

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"

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 🤙