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
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
Caching: No more "run
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
nxglobally (I'll continue with
npmyou can use
npm i nx
- Initialize a new
nxworkspace 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. ;)
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
apito 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
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
Or you could do some format checks or linting:
nx lint... but wait it's only linting the "default" project
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
"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 🤙