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

Siema, siema, Frontendowe Świry. Witamy Was na Frontendowej Siłowni. Ja nazywam się Aleksander Lubych. Ja nazywam się Jakub Pawlak. Zapraszamy. Po takim wstępie, Jakub, myślę, że wszystko jest jasne, prawda? Raczej nie. Nie. Dawaj. Rozumiem, o co chodzi. Pewnie, że nie. Słuchajcie, mieliśmy taki pomysł, żeby Wam zaserwować troszeczkę więcej... Masy. Masy, tak. Czyli więcej takiego contentu, który będzie bardziej treściwy, nie tylko przegadany. Białko. Samy białeczko, dokładnie, same białeczko. Nie ma upierdalania się. Ciebie iść na silownię. Tak jak już wspomnieliśmy w poprzednim odcinku, rozpoczynamy taką serię. Nie wiemy jeszcze, jak długo będzie trwać, ale prawdopodobnie siedem odcinków.

To zanim przejdziemy do kodu, chcielibyśmy Wam pokazać tylko, do czego dążymy. Chcielibyśmy mieć Shella, czyli aplikację hosta i dwie aplikacje Micro Frontendowe. To przejdźmy do kodu. I tutaj zrobimy małe oszustwo, bo nie będziemy tego wywoływać, bo to chwilę trwa, a to jest wszystko dobrze udokumentowane, czyli jak postawić NXowe monorepo. Wystarczy w terminalu wpisać tą piękną komendę Create NX Workspace. Następnie zostaniemy zapytani o parę rzeczy i w zasadzie tutaj wybierajcie co chcecie. My oczywiście wybraliśmy sobie angularową aplikację plus Jesta, pominęliśmy testy end-to-end i wylądowaliśmy z takim oto projektem.

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.

Czyli mamy Settings i mamy Dashboard. Poszło bezproblemowo. No problemo. Dokładnie tak. Tutaj zapewne jakbyśmy weszli sobie teraz w nasz dashboard i Project JSON i sobie poszukamy porta. O, proszę bardzo, jest i port 4201. Czyli NX ogarnął sobie tym jednym servem od razu też nasze dependencje. Czyli jak widać, NX-owy CLI rządzi w jednych dwóch komendach w zasadzie. Po pierwsze postawiliśmy repozytorium, a potem mieliśmy już działający setup dla Micro Frontendowej architektury. A teraz chcielibyśmy zerknąć na to, czym jest NX Graph. No dobra, to odpalamy sobie nasz nowy, nową zakładkę w terminalu i odpalmy Grapha.

Nie wspomnieliśmy o Pretierze, chociaż coś tam wspomniałem chyba, co nam wygenerował. No ale to w zasadzie po prostu mamy od NX-a dostajemy parę rzeczy, których NX-owy team uznał, że są istotne dla projektu. Znaczy to, co chcieliśmy właśnie wspomnieć, to jest to, że on jest dany od razu i można go sobie dokonfigurować bez żadnych ekstra konfiguracji, tak? Czyli po prostu on jest i nie trzeba w żaden sposób go zapinać. Tak. I nie ma sensu się kłócić, czy używamy pojedynczych cudzysłowów czy podwójnych. Więc warto Reitera używać. To tyle jeżeli chodzi o naszą rozgrzyweczkę na naszej Frontendowej Siłowni. Oczywiście będziemy robić to co miesiąc przez prawdopodobnie 7 miesięcy.

Siema mordeczki, dzisiaj wbijamy na Frontendową Siłkę. To samo. Słyszysz? A, to jest Subiektywny Frontend. To by było.