Angular + Nx production grade architectural structure with microfrontend.

[lkovari]

Hi All,

I am interested in the Nx. I began to use that.
I created a basic Example using dynamic module federation for a micro-frontend-based app. The workspace has a host, main-host, and three remotes mf_remote_home, mf_remote_a, mf_remote_b.

After that came to my mind how I can represent in the workspace the apps when has more than 50+ features, and what is the best way to structure it in modern Angular + Nx. at an enterprise-grade big app.

My question is, what is the best recommended architectural structure when there are more menu levels and a lot of apps?
Where can I read about it? Can I buy any book about it?

For Example, how to represent the belop what is the recommended way?

main-host (HOST)
│
└── mf_remote_home (DOMAIN REMOTE – loaded dynamically)
│
├── /home/feature-a (libs/home/feature-a)
│
├── /home/feature-b (libs/home/feature-b)
│
└── /home/feature-c (libs/home/feature-c)
│
├── /subfeature-a (libs/home/feature-c/subfeature-a)
│
└── /subfeature-b (libs/home/feature-c/subfeature-b)

This is my current basic app: https://lkovari.github.io/nx-mf-dynamic-federation

Thank you.