NX Monorepo (NestJS/Angular)

Question

I'd like to create a monorepo to manage a fullstack application with a NestJS backend and an Angular frontend that share a package called "shared".

I'd like to do this using NX.

Actually I have checked the NX documentation but I'm a bit confused about the options to chose, there are many (package based monorepos, Angular monorepo, NestJS monorepo), I'm not sure what steps I should follow to use NX properly.

Thanks in advance.

Answer 1

To make long story short - here is a short step by step guide:

1. Install nx globally npm i -g nx
2. Initiate a new workspace: https://nx.dev/getting-started/installation. Let's name it something like my-project. Use this options:
   • Which stack do you want to use? · none
   • Package-based monorepo, integrated monorepo, or standalone project? · integrated
   • Enable distributed caching to make your CI faster · No
3. Navigate inside cd my-project
4. Install dependencies: npm i -D @nx/angular @nx/nest @nx/js
5. Generate Angular app with nx g @nx/angular:app angular-app (https://nx.dev/nx-api/angular)
6. Generate NestJS app with nx g @nx/nest:app nest-app (https://nx.dev/nx-api/nest)
7. Generate shared library with nx g @nx/js:lib shared-lib (https://nx.dev/nx-api/js/generators/library)

From this point you have a basic setup. You can import your code form shared library like this:

import { sharedLib } from "@my-project/shared-lib"

Now you can just manually move your code form your external angular and nestjs apps into newly created monorepo projects and move shared code into shared-lib.

You probably want to use different naming and folder structure so I'd suggest to play a bit with generators and come up with the the solution you'd like.