Ten setup zniszczy Twój monolit – NX + Micro Frontendy w 2025 🤯

Warto zauważyć, mamy w kilku kliknięciach bardzo potężny setup, który tak naprawdę nie wymagał zbyt wiele od nas. To patrz teraz. Teraz wpiszemy magiczną komendę. Ciach. I generujemy cały setup Micro Frontendów. Tak. I zwróćcie uwagę, jak ta komenda wygląda. Wskazujemy tutaj, jakiej technologii ma być host. Automatycznie będzie taka sama technologia wybrana dla Micro Frontendów. Oczywiście wskazujemy, jak się ma nazywać host, czyli w naszym wypadku to jest Shell, a remote, czyli Micro Frontend, będą się nazywać Dashboard i Settings.

No i teraz wchodzimy sobie na naszą aplikację i wita nas Shell. I mamy tutaj Dashboard i mamy nasz Settings, czyli wszystkie Micro Frontendy działają. Tutaj widzicie po prawo Network, czyli Inspektor Chroma i przefiltrowujemy po czymś takim, co się nazywa Remote. To jest taki pliczek dla Module Federation, który zawiera w zasadzie definicję tego, co tam w tym naszym Micro Frontendzie siedzi. I możecie zauważyć, że jestem aktualnie na localhostie 4200, tak jak defaultowy localhost dla angularowej aplikacji, ale Remote Entry został załadowany z hosta. 4201, a kolejne Remote Entry 4202. I to są nasze Micro Frontendy.

Naszym hościem, czyli naszym szalu. No dobra, no to jak to w takim razie zrobić? Przejdziemy razem przez ten proces. Czy teraz musimy oznaczyć nasze projekty tak, żeby miały jakieś tagi? Dodajmy tutaj tag, jeżeli jesteśmy w Shellu, dodajmy tag Shell, tak dla ułatwienia. A jeżeli jesteśmy w Remote'ach, no to w takim razie dodajmy po prostu tag Remote. Dobra, i jeszcze settings też oznaczymy sobie naszym pięknym nowym tagiem Remote. Ops. I teraz jeszcze przydałoby się nam oznaczyć naszą lipkę. Tak jest. Skóra nasza lipka jest stworzona pod shella, no to też musi mieć tak shell. Dobra.

Dobra, no to kopiujemy i wklejemy. Dobra, no to kopiujemy i wklejemy. Dobra, no to kopiujemy i wklejemy. Dobra, no to kopiujemy i wklejemy. Dobra, no to kopiujemy i wklejemy. Dobra, no to kopiujemy i wklejemy. Dobra, no to kopiujemy i wklejemy. Error, error, warning, error. Project tagged with shell can only depend on lips. Tagged with shell. No i popsuliśmy. I właśnie to chcieliśmy, prawda? No dobra, no to jak teraz to naprawimy? Teraz chcemy dać dodatkową konfigurację, która powie, że shell może zależeć od remota, ale nie na odwrót, prawda? Dobra, no to...

Możemy dodać tutaj remote. Tak jest. To zróbmy jeszcze raz linter. No i dalej coś. Coś nam krzyczy. Coś nam krzyczy. Zobaczmy, co nam krzyczy. Dashboard, project, tag with remote, on remote. Zobaczmy. Nasz lint wykrył, że jest jakaś zależność w remoncie do liby, które są przeznaczone tylko dla shell'a. I to jest dokładnie to, dlaczego te module bundles robimy. Teraz spójrzmy na nasz graf. Tak jak Jakub wcześniej wspomniał, to nie jest to, do czego dążymy. Nie chcemy mieć circular dependencies, nie chcemy mieć ukrytych dependencji pomiędzy shell'em a micro frontend'em.

Stąd Taka dependencja powinna być usunięta. No dobra, no to usuwamy. Poszło. I robimy jeszcze raz lint. Ciach. Udało się. Naprawiliśmy nasze repo. Oczywiście ten komponent musi być stworzony w inny sposób, albo musi być zduplowany, albo musi być... I pamiętajcie, Zdublowanie kodu nie jest zawsze tragiczne, prawda? Szczególnie jak mamy takie przypadki, gdzie chcemy mieć niezależność i separację, odpowiedzialność. No dobra, no to w takim razie mamy NX Workspace, mamy Micro Frontendy, mamy Hosty, mamy Remoty, NX Graph, S-Lint.