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.

Scalawag

The question is off-topic. Please make it focused – Aleece

I finally found a clear description of the process! – Attractive

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.

Patrimony

Answer 2

So to reiterate what's the goal, in your NX monorepo, you want to have the following:

• my-angular app
• my-nestjs app
• shared lib
• some other libs.

---

IMO, to get to that point, you have two options, each with some upsides and downsides.

I'd try solution 1 only in case your existing projects are very simple. Otherwise, solution 2 has a better chance to work out well without significant complications.

---

Solution 1:

Try to do the straightforward thing, which might be quicker, but might also cause you to unknowingly generate a mess that will not actually work because of unexpected or poorly understood problems/interactions between your first and second app. Which you will then have to spend time to resolve.

1. Set up a new, fresh NX monorepo: https://nx.dev/recipes/adopting-nx/manual#exploring-your-workspace

2. Manually copypaste your Angular app to the apps directory and hook it up to NX: https://nx.dev/recipes/angular/migration/angular-manual

3. Manually copypaste your Nest app and hook it up to NX (in whatever way it needs to be, rougly described here: https://nx.dev/recipes/adopting-nx/manual#configuration-files). Because that's your second app in the monorepo, it'll require more attention - you'll need to ensure it's supported by NX without breaking the first app, and uses correct versions of packages it needs.

4. Create a new shared NX library and reuse it between your apps.

Solution 1a:

If your Angular app is up to date and uses Angular CLI, you can replace steps 1 and 2 with:

1. Migrate your Angular app to an NX monorepo using the official conversion tools: https://nx.dev/recipes/angular/migration/angular

This might make the process a bit simpler, though it also gives you less control and a worse learning experience.

---

Solution 2:

Take the time to do things slowly and carefully, which will also give you more space to understand what NX is and how it actually works.

1. Migrate your Angular app to an NX monorepo. Split its code to libs and organize them correctly.

2. Migrate your Nest app to a separate NX monorepo. Split its code to libs and organize them correctly.

3. Merge those two NX monorepos and resolve any remaining conflicts between CI/CD flows, package versions, etc.

4. Create a new shared NX library and reuse it between your apps.

This will be probably longer, but will also give you a better understanding of how each of your apps functions within NX, and how it should be integrated with NX, before you stick them together in a single NX repo that has to support them both.

---

(As a sidenote, I just want you to know, I was in a similar situation with little to none NX knowledge and only one app to handle, and it wasn't easy. NX is not very beginner-friendly and you will usually not find tutorials and docs that will perfectly cover your use cases. There's plenty of problems to solve, and at many points you will have to make do with the existing docs and the existing scarce examples. If you are deterred at this point at the beginning already, I advise you and/or your company to consider carefully what you want to achieve using NX, and if you're willing to go through a demanding integration process to get it. NX is very worth the effort in some cases, but in some it's not and it's wiser to recognize that before you're too invested.)

Confucius