#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
onpreinstall
" 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 withnpm
you can useyarn
tho).
npm i nx
- Initialize a new
nx
workspace with a default React-App calledclient
. 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>
isclient
orapi
.
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" projectclient
š¤
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 š¤
Top comments (0)