Mentionsy

Chcielibyśmy mieć Shella, czyli aplikację hosta i dwie aplikacje Micro Frontendowe.

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.

Wywołujemy npx nx-serve shell.

I tu ciekawostka, bo wpisując tą jedną komendę, odpalając shella, odpali nam też od razu dodatkowe mikrofrontendy, ponieważ NX sobie to ogarnie.

No i teraz wchodzimy sobie na naszą aplikację i wita nas Shell.

Czyli widzimy tutaj nasze trzy aplikacje Shell, które jest zależne od dashboardów i settingsów.

I tu warto wspomnieć, że dashboard nie wie nic o swoim Shellu.

Czyli moglibyśmy mieć tych Shellów kilka.

Czyli odpalamy znowu nowy terminal i generujemy nx generate lib i tutaj w folderze libs będziemy generowali shell config.

Mamy teraz nową libkę i to jest shell config.

I jak teraz odświeżę sobie nasz graf, a nawet nie odświeżałem, sam się odświeżył, to mamy już nasz shell config.

No dobra, i co my mamy w tym Shell Configu?

A mamy jakiś prosty komponencik, Shell Config.

No to może go zaimportujemy sobie do... A czemu nie do Shell'a?

I w importach mamy już subiektywny Shell Config component.

No jasno, widzimy, że mamy teraz zależność Shell'a do Shell Config'u, co oczywiście jest oczywistością oczywistą.

Shell Config w sumie jest fajnym komponentem, więc dodajmy go jeszcze do dashboardu, bo czemu by nie, skoro to jest Config.

Więc NX Graph jest super fajnym narzędziem, tylko czy naprawdę shell config powinien być zależnością dla dashboarda?

Mamy tutaj taki atrybut depconstraints i to, co będziemy chcieli teraz zrobić, to zablokujemy możliwość importowania shell configa w innych naszych remote'ach, ponieważ NX wygenerował nam trzy piękne aplikacje, ale jedna z nich jest hostem, a dwie pozostałe są remote'ami, czyli są micro frontendami i one nie powinny wiedzieć nic o sobie, ani też nie powinny wiedzieć nic o

Dodajmy tutaj tag, jeżeli jesteśmy w Shellu, dodajmy tag Shell, tak dla ułatwienia.

Skóra nasza lipka jest stworzona pod shella, no to też musi mieć tak shell.

Tutaj musimy dodać Source Tag, który się będzie nazywać Shell.

Dobra, no to dodajemy Shell.

Project tagged with shell can only depend on lips.

Tagged with shell.

Teraz chcemy dać dodatkową konfigurację, która powie, że shell może zależeć od remota, ale nie na odwrót, prawda?

Nasz lint wykrył, że jest jakaś zależność w remoncie do liby, które są przeznaczone tylko dla shell'a.

Nie chcemy mieć circular dependencies, nie chcemy mieć ukrytych dependencji pomiędzy shell'em a micro frontend'em.