nx-monorepo
Goals
- Non-ugly monorepo setup using modern TypeScript
- Must support backend services, frontends and tools - all written in TypeScript with maximal code reuse
- Must properly integrate with code editors/IDE - ideally, with both VS Code and WebStorm. This includes proper syntax highlighting, imports resolution, ... Being able to launch everything using buttons in IDE (as opposed to command line) is non-goal.
- Use of best practices: linting/autoformatting, unit testing, CI using Github Actions, ...
Typical problems
- While TypeScript supports multiple-projects-in-the-same-repository setup (see project references), out-of-the-box support from the side of the various frameworks (especially frontend ones) is mostly non-existent (e.g. see Angular issue, React issue, for VueJS there is no filed issue AFAIK).
Potential approaches
- It is possible to configure all tooling (e.g. webpack) manually. But it can get ugly very quickly (with need to at least partially "eject" from standard framework tooling).
- Nx promises convenient tooling for working with TypeScript monorepos (including more advanced things like inter-project dependency understanding and commands like "run only affected tests"). The feedback I've managed to find (e.g. this one) is also quite positive. So I'll try to use Nx as a current solution.
Current progress
Frontend
Example React app is set up. I've almost no idea how React works, so it's ugly.
Backend
Example NestJS app is set up. There is a Swagger and basic request body validation.
TODOs:
- Is there a non-ugly/non-boilerplate way to create client libraries for the provided HTTP methods? So there is type-safety, etc.
Common libraries
There is an example library, data objects from it are used both in backend and frontend.
Tools
TODO: Figure out how to conveniently create CLI tools in Nx. There is a dedicated folder for them, so probably there is a way :)
Infrastructure
TODOs:
- Set up docker builds as part of the CI.