Angular Microfrontends with NX and Module Federation

Summary

Este video explora el uso de micro front-ends y la estructura de monorepos con NX, enfocándose en la arquitectura de micro front-ends con Angular. Se discuten las ventajas y desventajas de utilizar la arquitectura de micro front-ends y se muestra cómo se puede implementar usando la herramienta NX. Además, se explica cómo trabajar con bibliotecas compartidas y se destaca la facilidad de integración y actualización de componentes en diferentes aplicaciones, mejorando el flujo de trabajo en proyectos de gran envergadura.

Takeaways

• 🌟 Micro front end es una arquitectura que permite diferentes aplicaciones o micro aplicaciones ser servidas al mismo tiempo en diferentes frameworks o librerías.
• 🛠️ Module Federation es una alternativa para lograr micro front ends, permitiendo la despliegue individual de cada aplicación.
• 📈 Las ventajas de utilizar micro front end incluyen la capacidad de equipos con experiencias diferentes trabajar en diferentes tecnologías y la posibilidad de tener equipos autónomos.
• 🔧 La estructura de un monorepo con NX permite tener múltiples proyectos de front end, así como backend, en un solo repositorio, facilitando la colaboración y mantenimiento.
• 🎉 Utilizar NX para la estructura monorepo trae consigo muchos beneficios, como la facilidad de generar nuevas aplicaciones y componentes, y la capacidad de manejar diferentes configuraciones.
• 🔄 La generación de aplicaciones con NX incluye la opción de incluir características como TypeScript, SCSS, y la capacidad de generar aplicaciones backend con Node y Nest.
• 🔗 La integración de aplicaciones remotas y host se logra a través de la configuración de Module Federation, permitiendo la conexión y comunicación entre ellas.
• 🛠️ La generación de componentes compartidos, como un botón en este caso, permite su uso en diferentes aplicaciones y mejora la reutilización de código.
• 📋 La estructura de archivos y directorios en NX sigue un modelo mental que separa lógica de negocio de componentes, facilitando la creación de librerías compartidas.
• 🔄 Las actualizaciones en componentes compartidos son fáciles de implementar y se ven reflejadas en todas las aplicaciones que los utilizan.
• 🚀 NX ofrece una integración sencilla con CI/CD, permitiendo la ejecución de pruebas y actualizaciones en las aplicaciones afectadas por cambios en componentes compartidos.

Q & A

¿Qué es un micro frontend y cómo se relaciona con diferentes frameworks o librerías?

Un micro frontend es un enfoque para desarrollar aplicaciones web monolíticas en la que se utilizan diferentes variantes de frameworks o librerías. Permite a diferentes equipos trabajar en diferentes partes de la aplicación sin interferir entre sí, lo que es útil en entornos de gran escala y colaboración multidisciplinaria.

¿Cuál es la ventaja de utilizar Module Federation en lugar de otros enfoques para micro frontends?

Module Federation permite la descomposición de aplicaciones en micro aplicaciones que se pueden servir de manera independiente y combinar en una sola aplicación. Ofrece flexibilidad y permite a los equipos trabajar con diferentes tecnologías y stack, lo que puede ser beneficioso en entornos donde se requiere una diversidad de habilidades y experiencias técnicas.

¿Qué es la estructura de monorepo y cómo NX se beneficia de ella?

Una estructura de monorepo es un modelo de control de versiones y gestión de código donde todos los proyectos y componentes de una organización se almacenan en un solo repositorio. NX se beneficia de esta estructura al permitir una gestión más eficiente de proyectos relacionados y la capacidad de compartir recursos y componentes entre diferentes aplicaciones, lo que puede mejorar la colaboración y la reutilización de código.

¿Cómo se puede generar una aplicación Angular en un monorepo NX?

Para generar una aplicación Angular en un monorepo NX, se puede utilizar el comando `nx create nx-workspace@latest` y seguir los pasos interactivos para configurar el tipo de aplicación, el lenguaje de programación y otras opciones. Esto creará una nueva aplicación Angular dentro del monorepo con la configuración más reciente.

¿Qué es la ventaja de tener un host application y remote applications en una estructura de micro frontend?

La ventaja de tener un host application y remote applications es que permite la descomposición de la aplicación en subaplicaciones manejadas por equipos independientes. Esto facilita la actualización y el desarrollo de características específicas sin afectar al conjunto mayor de la aplicación, mejorando la eficiencia y la capacidad de respuesta de los equipos de desarrollo.

¿Cómo se puede utilizar un componente compartido en diferentes aplicaciones dentro de un monorepo NX?

Para utilizar un componente compartido en diferentes aplicaciones dentro de un monorepo NX, se puede crear una biblioteca que contenga el componente y luego exportarlo desde un archivo barrel. Luego, en las aplicaciones que requieran el componente, se puede importar directamente desde la biblioteca y utilizarlo como si fuera parte de la aplicación local.

¿Qué es la configuración de Module Federation y por qué es necesaria en un micro frontend?

La configuración de Module Federation es un conjunto de instrucciones que define cómo las diferentes partes de una aplicación micro frontend se cargan y se comunican entre sí. Es necesaria para que las aplicaciones host y remote puedan interactuar y compartir componentes de manera efectiva, asegurando que las rutas y los enrutamientos estén correctamente configurados y que las dependencias entre las aplicaciones sean manejadas adecuadamente.

¿Cómo se pueden implementar cambios en un componente compartido en un monorepo NX sin afectar otras aplicaciones?

Para implementar cambios en un componente compartido sin afectar otras aplicaciones, se puede utilizar CI/CD para ejecutar pruebas y validaciones específicas en las aplicaciones que utilizan el componente modificado. Esto garantiza que los cambios no causen problemas en las aplicaciones que no han sido actualizadas y permite una gestión efectiva de los cambios en un entorno de micro frontends.

¿Cuáles son los desafíos y beneficios de utilizar una arquitectura de micro frontend?

Los beneficios de utilizar una arquitectura de micro frontend incluyen una mejor escalabilidad, la capacidad de trabajar con diferentes tecnologías y una mejor separación de responsabilidades entre equipos. Los desafíos pueden incluir la complejidad en la gestión de dependencias, la necesidad de una configuración inicial más compleja y posibles desafíos en la sincronización y colaboración entre equipos.

¿Qué es la ventaja de utilizar la estructura de monorepo con NX para proyectos de desarrollo de backend?

La ventaja de utilizar la estructura de monorepo con NX para proyectos de desarrollo de backend es que permite la creación y gestión de aplicaciones backend, como Node.js o NestJS, en el mismo repositorio que las aplicaciones frontend. Esto facilita la integración y la colaboración entre los equipos de frontend y backend, mejorando la eficiencia y la calidad del producto final.

¿Cómo se pueden generar diferentes proyectos y subaplicaciones en un monorepo NX utilizando la CLI de Angular?

Para generar diferentes proyectos y subaplicaciones en un monorepo NX, se puede utilizar la CLI de Angular junto con los comandos específicos de NX. Por ejemplo, se puede utilizar `nx g @nrwl/angular:module account-routing` para generar un módulo de enrutamiento y `nx g @nrwl/angular:app account-remote` para generar una subaplicación. La CLI de Angular se integra con NX para proporcionar una experiencia de desarrollo fluida y coherente.

Outlines

00:00

🚀 Introducción a micro front ends y monorepos con NX

En este primer párrafo, se presenta la temática principal del video: la exploración de micro front ends y la arquitectura de monorepos con NX. Se discute la definición de micro front end y cómo se relaciona con diferentes frameworks y librerías. Además, se menciona la ventaja de utilizar un modelo de repositorio mono (NX model repo) para organizaciones, y se anuncia que el video abordará tanto los pros y los cons de utilizar micro front end architecture.

05:01

🛠️ Configuración de un monorepo con NX y creación de aplicaciones Angular

Este párrafo detalla el proceso de configuración inicial de un monorepo con NX, incluyendo la creación de un aplicación host llamada 'Dev by Seb' y la elección de ciertos parámetros como el uso de SCSS y la habilitación de la función de enrutamiento. También se menciona la opción de habilitar la caché distribuida para acelerar el CI, y se describe el proceso de instalación de paquetes y la visualización del código en pantalla. Finalmente, se habla sobre la generación de módulos y enrutamientos dentro de la aplicación Angular.

10:02

🔄 Generación y configuración de aplicaciones host y remote en NX

En este párrafo, se aborda el tema de generar y configurar aplicaciones host y remote dentro del monorepo de NX. Se describe el problema de no haber configurado previamente un host application y se presenta la solución de generar un host con la configuración de Module Federation. Luego, se procede a crear una aplicación remote llamada 'account remote' y se explica cómo se relaciona con el host application existente. Además, se mencionan los ajustes necesarios en la configuración de webpack y se destaca la importancia de la conexión entre el host y el remote application.

15:03

🔄 Carga y uso de aplicaciones remote desde el host application

Este párrafo se centra en la carga y utilización de aplicaciones remote desde el host application. Se explica cómo el host application sirve para iniciar todos los remote applications, y se describe el proceso de configuración para que el servidor se establezca correctamente. Se muestra cómo se configura una ruta predeterminada y se destaca la facilidad de uso y la reducción de código boilerplate. Además, se aborda la posibilidad de que diferentes teams trabajen en diferentes features sin interferir entre sí, y se menciona la flexibilidad de trabajar con diferentes frameworks en remote applications.

20:06

📚 Creación y uso de componentes compartidos en NX monorepos

En este párrafo, se aborda el tema de la creación y utilización de componentes compartidos dentro de un monorepo de NX. Se describe el proceso de generar una biblioteca de componentes llamado 'button' y se explica cómo se configura para ser utilizada en diferentes aplicaciones. Se menciona la importancia de exportar el componente desde el archivo barrel para evitar problemas en las aplicaciones. Además, se muestra cómo se importa y utiliza el componente 'button' en la aplicación, y se destaca la ventaja de poder actualizar y probar componentes de forma live y aislada sin afectar otras aplicaciones.

25:08

🎉 Conclusión y recursos adicionales sobre NX monorepos y micro front ends

En el último párrafo, se concluye la presentación de cómo se establecen y trabajan con NX monorepos y micro front ends. Se menciona la facilidad de configuración con NX y Module Federation, y se hace referencia a un blog post que profundiza en los beneficios y desafíos de utilizar esta arquitectura. Se invita a los espectadores a dar su opinión y se agradece por la visualización del video.

Keywords

💡micro front end

El término 'micro front end' se refiere a una arquitectura en la que se desarrollan aplicaciones web como una serie de mini-aplicaciones o componentes que se integran en una sola interfaz de usuario. En el video, se discute cómo utilizar esta arquitectura con Angular y se menciona que puede ser útil para equipos con experiencias diferentes en tecnologías de desarrollo web.

💡Angular

Angular es un framework de desarrollo de aplicaciones web open-source creado por la empresa IBM y más tarde donado a la comunidad. Es conocido por su enfoque basado en componentes y su uso de TypeScript. En el video, se utiliza Angular para desarrollar aplicaciones dentro de una estructura de micro front end.

💡monorepo

Un monorepo es una única base de código que contiene múltiples proyectos relacionados, en lugar de tener un repositorio por proyecto. Este enfoque facilita la colaboración y el mantenimiento a largo plazo de código. En el video, se discute cómo utilizar un monorepo con NX, un framework de desarrollo de aplicaciones.

💡NX

NX es un framework de desarrollo de aplicaciones de código abierto creado por Palantir, que se utiliza para construir aplicaciones de tamaño empresarial. Proporciona una serie de herramientas y bibliotecas para ayudar a los desarrolladores a trabajar en proyectos de gran envergadura. En el video, se utiliza NX para construir y gestionar aplicaciones con arquitecturas de micro front end.

💡Module Federation

Module Federation es una característica de webpack que permite que diferentes aplicaciones web compartan código y módulos de terceros de forma más eficiente. Esta técnica es útil para la implementación de arquitecturas de micro front end, donde varias aplicaciones pueden ser servidas y actualizadas independientemente. En el video, se explora cómo utilizar Module Federation con Angular y NX.

💡arquitectura de micro front end

La arquitectura de micro front end es un enfoque para el desarrollo de aplicaciones web en el que la aplicación se construye como una colección de mini-aplicaciones o componentes más pequeños y autónomos. Cada una de estas mini-aplicaciones puede ser desarrollada,部署 y actualizada de forma independiente. Esta arquitectura es especialmente útil para proyectos de gran envergadura con múltiples equipos de trabajo.

💡React

React es un biblioteca y un enfoque de programación declarativa para construir interfaces de usuario, creado por Facebook. Es conocido por su enfoque en la creación de componentes reutilizables y su eficiencia en la renderización de aplicaciones web. En el video, se sugiere que React podría ser una buena opción para aplicaciones medianas o pequeñas.

💡webpack

Webpack es un sistema de módulos de JavaScript y un bundler que permite a los desarrolladores empaquetar y minimizar el código de sus aplicaciones para su distribución en la web. Es una herramienta común en el desarrollo web moderno, especialmente útil para la gestión de dependencias y la optimización de recursos estáticos. En el video, webpack es mencionado como parte de la configuración de Module Federation.

💡Node.js

Node.js es un entorno de ejecución de JavaScript que permite a los desarrolladores escribir código del lado del servidor en JavaScript, en lugar de lenguajes como PHP o Ruby. Con Node.js, es posible aprovechar la eficiencia y la capacidad de JavaScript para crear aplicaciones web completas. En el video, se sugiere que NX puede ser utilizado para desarrollar aplicaciones back-end con Node.js y integrarlas en un monorepo.

💡CI/CD

CI/CD son las siglas en inglés de 'Integración Continua' (Continuous Integration) y 'Despliegue Continuo' (Continuous Deployment). Estas prácticas forman parte de la cultura de desarrollo de software moderno y permiten a los equipos de desarrollo integrar y lanzar código de manera rápida y confiable. En el video, se hace referencia a cómo la arquitectura de micro front end y las herramientas de NX pueden facilitar la implementación de CI/CD.

💡library

Una 'library' en el contexto de desarrollo web se refiere a una colección de componentes o funciones reutilizables que pueden ser importados en diferentes aplicaciones. Estas bibliotecas permiten a los desarrolladores evitar la duplicación de código y mantener una consistencia en la implementación de características a través de múltiples proyectos. En el video, se discute cómo crear y utilizar bibliotecas en un monorepo de NX.

Highlights

Introduction to monorepo structure with NX and its benefits for organizations.

Exploration of micro frontend architecture and its use cases.

Comparison of different programming frameworks and libraries for various application sizes and team experiences.

Demonstration of using Module Federation with Angular applications.

Explanation of the advantages of having a single front-end project within a monorepo in NX.

Step-by-step guide on generating a new workspace with NX and choosing configurations.

How to create an integrated monorepo application with routing and distributed caching options.

Process of generating a remote application within the monorepo and setting up the necessary configurations.

Utilizing the NX console for generating modules and managing the application structure.

Explanation of how micro frontends can be served and loaded within the host application.

Demonstration of creating a shared component library and its usage across different applications.

Importing and using the shared button component in both host and remote applications.

The benefits of using micro frontend architecture for large enterprise applications with multiple teams working on different features.

How NX enforces a mental model for creating libraries and avoiding logic within applications.

The ease of setting up micro frontends with NX and Module Federation.

Conclusion on the practical applications and impact of using NX monorepos and micro frontend architecture.

Transcripts

hello and welcome to this video guys

today we're going to look into mono

repos with NX we're also going to look

into microphone tents different ways of

approaching the micro fronted

architecture with angular we're also

going to look into pros and cons of

using microfront and architecture and

also why using a NX model repo is a good

structure for your organization and so

on so let's get started

all right so let's get started with two

different concepts that we're going to

look into so the first thing would be

the micro front end what is a micro

front end and how should we think about

it so to continue working with this

let's investigate what a micro front end

really is so looking at this image here

you can see we have different

applications or micro applications that

is being served at the same time in

different Frameworks or libraries

in the same view right so this is

something that could be achievable with

module Federation for instance there's a

couple of other Alternatives as well but

in this video we're going to look into

model Federation and we're also only

going to focus on angular applications

in this video

so in short you can deploy each and one

of these application individually so for

instance they might grab one here at the

top Minecraft one so this would probably

be the host application so the react

part and then within that host

applications you would have remote

applications

so the remote applications in this case

could be for instance you have some

content calendar logic being visualized

in angular you could have a couple of

other features in in view or swelt the

reason to why you want to have it in

this way where you can have different

variants of program programming

Frameworks and libraries is usually due

to teams having different experiences so

I I would say that having four different

Frameworks or libraries would be Madness

in my in my case or my opinion I would

say having maybe two would be good

enough I mean react to Wrangler I would

have them for complete standalone

and differences I think they they might

be used in different aspects of

development so for Enterprise

applications I would say angular the

want to go react would be maybe small to

medium sized applications where you

don't have too much logic where you want

to enforce a certain structure right so

there's where when I would use react but

in terms of this video we're only going

to look into uh the angular applications

so the next concept we have is a mono

Ripple structure with NX so what is a

monos Repro structure so mono stands for

one

um in and working with different

applications in organizations might be

that in front end you would have

multiple repositories for different

applications which is quite common but

with NX model repo you would have every

single front-end project or essentially

backing with node with nest and so on

within the same repository there is a

lot of benefits having them in the same

repository there it's also

pros and cons with everything but I

would say that the pros outruns the cons

in this case so as you can visualize

here we would have all of these

applications within the same

GitHub repository I'm working with the

NX monorip so let's get started so in

order to get started with this NX mono

Ripple Fuller structure we're going to

utilize the command that that is given

by the NX and also keep in mind that

this works for react View and angular so

you can choose pick and choose what you

want you can also place your component a

library here which would be generated

with for instance web components in

stencil.js or lib.js to generate

components that could be utilized in

different Frameworks but today the focus

is going to be angry

so just pasting the mpxcrate NX

workspace at latest so it will generate

a complete new workspace for us with the

latest configurations let's proceed

um would you like to create your own

create your workspace just press enter

and here you can choose do you want to

have typescript Js or what you want

we're going to choose angular keep in

mind you can also place your backend

applications here so it's not only for

front-end this is the benefit of using

NX for instance if you're working with a

node backend as you can see as you might

see here in in the bottom of the screen

uh node you can generate node

applications or Nest applications it

could be applications where you run your

backend and you can combine them in an

easy way because they live in the same

Repository

all right so let's continue we're

generating an angular application

um

we're going to create an integrated

monorepo

application name so let's call it Dev by

Seb

host

we're going to use scss

we would like to use Standalone

components but let's not do that right

now we want to use routing yes either

here you can choose if you want to have

enabled distributed caching to make your

CI faster this will be connected to the

NX Cloud for this com case that we have

today I'm going to choose no

so now it's going to install a couple of

different packages we have

let's see here

let's also make the screen a bit bigger

so we can explore the

code together

all right so this might take a couple of

seconds we will be right back once this

is up and running

so in order for us to get started we can

either click on this link here or just

navigate to localhost 4200 in order for

us to get started to the application you

can also go to the app uh component file

just clean this up a bit we're going to

remove the um the NX welcome component

that we receive not interested so let's

just go ahead and remove that real quick

and we're also removing it from the

from aerosol all right so once we have

essentially removed that now it should

be up and running we have the routes

here so if you want to generate a route

we can do it so if you have installed

the NX console you can just right click

and you can go with NX generate here you

can see I want to generate a module so

schematic slash angular module it will

utilize that to generate it so we can

just say account

so let's see here

we could

let's see here route

create the routing module let's say we

want to have sub routes and so on so

let's go ahead and just generate real

key real quick and you'll see what

happens

um and as you can see here we have the

account module with a routing module

quite similar to the way you would do it

in the with the angular CLI this

essentially just utilizes the angular

CLI map

all right so now we have a module you

can just add a route in which way you

want it to be added so let's say we want

to generate a new applications

you can just go to NX you can go to

generate and then you would say I want

to generate a shell application so

from from before you have the host

application with it which is essential

the application we created here the

localhost running on locals 4 200 and

then we have the shell application that

we now are going to generate and this is

going to be a sub application that we

place within our application it could be

for instance the the account module in

this case

all right so let's let's click on that

we can see what we want the project to

be named at

um

let's see here can make the screen a bit

bigger uh we want it so we need to point

which is the related Client app which is

essentially the host application that we

have

um the ID let's see here which is the

main server file and so on

um all right so let's generate this and

see what happens

so let's open the console

so we need to have a router applet in

our root component so let's go ahead and

just add that and we can just regenerate

um so it's it's super tactile it will

usually give you the exact

thing you need to do in order to proceed

so now that we have the router module it

will automatically set up a different

kind of structure for us all right so if

I now open up let's see what happened

um

so here we need to generate the go to NX

generate and here we're going to select

a remote application so we want to

generate a remote application here we

want to name it let's call it account

and then we're going to specify which is

the host which is going to be the one we

generated before so continuing there's a

couple of things we can we can add

tailwind and so on we're not going to do

that we want Cyprus to be the test thing

we're going to use the eslint

and here you can decide like if you want

to have server side rendering and so on

which I do not want we're going to use

scss

um

all right so now that we have everything

set up we can just generate this

application now

and it's going to generate a sub

application and here it will give some

complaints to us

um the selected it does not contain a

modifier Federation to ensure it has

been set up as a host application and

the issue is that we did not really set

up a host application as a starters we

just generated a default angular

application so what we need to do now is

essentially we need to generate the host

so we're going to

generate the host and this is going to

include the

um the module Federation so we'll call

it host

just call it host for now it doesn't

really matter we can

at the same time we're generating it in

this way we could probably let's see

here

let's just generate it let's make sure

we have all of the configurations we

wanted to have a CSS and so on so

generated all right so it will generate

a new application obviously we need to

remove the old one because we're yeah

because it requires the model Federation

config this is the file I was missing

before so this is the file in in which

it asks for so and it also has the

webpack prod config and webcam pack

config so let's just go ahead and remove

these two applications that we yeah

obviously we need to stop this

we can

we're going to delete them we're just

going to ignore them uh we generate now

a remote application so generate search

for remote

and here we can specify our host and

this is going to be let's call it

account

remote

the name standards obviously should

follow whatever you have in your

organization maybe it would just be

account module and so on this is

something you would have to decide with

Architects and so on

um all right so now that we have

generated the remote application we

should have one remote application and

one host application right so

and you will see here that the remote

DTS is just typing for the remotes

module

um you'll not be able to remove this if

you remove this it won't work as you

want it looking into the modern

Federation config file you'll see that

account Remote application is part of

the remote application you'd also see

that

um

sorry if you go to the webpack config

file we have pointing towards the model

Federation config file so this is why

it's required

um and also if you want to have some

other webpack configurations you could

add them here to the product config.js

file

we're not going to look into that so now

that we have we have a host and a remote

application so what we want to do

essentially see how can we load in one

application from the other application

right

so it will just serve it uh we're going

to serve the host application

um the reason to why you want to serve

the host applications is because that

this one should spin up all of the uh

the remote applications as well

and as you can see here it it spins up

the account built for development and it

also will serve the the host application

that you have as well so allowing it a

couple of seconds you will be able to

just navigate to let's see here I think

4200 see what will happen

let's see

so it will set up a server for you and

you can see home and account remote so

it already has set up a route for you

which is quite awesome because then

there's a lot of boilerplate code you

don't need to Rob uh read so if you go

to approach keep in mind we want to go

to the hosts Source app not the account

remote and here you can see how it

actually loads the children in a similar

way you would load a lazy load feature

module right

so this is quite awesome because now you

already have a connection between the

host and the remote application so for

instance when we jump here it goes from

the host to the remote and let's jump

into the NX

component here and just

remove all of this scrap and just add

router Outlet

and then

sorry this nothing should be added there

I just reckoned hello world just print

hello world there instead so we'd go

home and you would have your application

here so

it would be in a similar way so if you

would want to have any logic on the app

route

um

for the host application you just place

it in a similar routing way as you would

do in a regular angle application we do

not want that we want it straight to

jump onto the remote module because we

do not have anything or we don't have

really anything placed within the the

the app component in front of so if I go

to that component to imagine it would

have a menu here right so this is the

menu as you can see and

what happens is that it actually loads

the remote applications from the router

Outlet so this would be in a similar way

as you would be used to working with the

regular angle application so if I now

would go to the other applications that

I have uh you would see that I can go to

the sorry if I go to the to here's the

remote entry so keep in mind it all it

always points towards a certain module

right so the entry module remote entry

module in this case and you can change

the name of it you can do whatever you

want with it you can point towards

another feature and so on but we're not

going to look into that too much

so let's just clean up all of this code

that comes from NX we're not really

interested in it

my remote application

so if I save this now jumping between

home and the remote application it

should give us a couple of different

things and as you can see here it does

not really reload this sub applications

because we decided to run it from the

app component TS file so

let's see here compile successful it

doesn't really recompile the sub

features that you have so you would have

to set up a different way of working

with it

usually the way you would work with the

sub application is that you would just

go serve account and then you would just

serve your account Remote application to

do the changes there this means that

Standalone teams can work on different

features at the same time without having

to think of destroying other

applications obviously we can destroy

the host applications by adding strange

logic but now we can go to 4201 and we

can continue to actually implement the

logic we want to have on the remote

application

so this my friends is one way of

actually working with micro front ends

so you might think how is this

beneficial why would I really have the

micro front end architecture and I would

say if you do not think you need it then

you obviously don't need it right do not

make things over complicated for no

reason you would only need to have Micro

front ends if you have a super large

Enterprise applications where you have

multiple teams working on sub features

without having to just like ruin

anything in between the applications so

for instance if I work on the account

module and someone works on a complete

separate feature we do not want we want

to be able to deliver our feature

without having to wait for things in

other applications

um so with this said you can have

complete Standalone teams working on

features together but also keep in mind

that working with micro for instance and

model Federation also allows you to work

with different Frameworks for instance

my remote application in this

application could for instance be set up

with react it does not really need to be

an angular application

so there's actually different ways you

can utilize the micro front ends to have

different teams working in different

stacks and so on we're not going to

explore this as for now I just want to

show one last thing on on how you could

work with libraries so NX enforces

something they call a mental model that

is that usually create libraries and you

do not put so much logic within the

actual applications which makes total

sense when you work with it for for some

time in the beginning it might be a bit

confused but let's look into a library

so

let's say we want to create a shared

button component that would be used in

the different applications so both in

the remote application and and the host

application

so generate it so let's call it button

we're not going to think about any

directory we're not going to think about

anything else like that we're just going

to make it quite simple and you guys

decide on how your organization would

need it to be done so let's let's go

ahead and create it with cscss so now

when I generate it it will generate a

library which will consist of the

um

it will not consist of anything for us

for now but we need to

create some data so if we just close the

apps folder there's also ellipse folder

and as you can see here it has generated

one library for us and now we can

generate within the lib here we can

generate a component we could have it

Standalone but we do not want it to be

just for this purpose to just simulate

how it would work now we can generate a

component within the library

so we're going to generate the button

component which is going to be utilized

in both both the host and remote

application

so one thing to keep in mind is that you

need to export it from the barrel

function sorry the barrel file otherwise

you might have some problems in your

applications so

what what do we want to do we are going

to look into a couple of different

things

all right so if you now go to the TS

config base file you should see that the

button or the library that we just

generated should have some sort of a

path setup so if you want to import the

button module we would import it in this

way or if we wanted to to import the

button component we would import it from

it so for now we have a similar way of

working with angular so you have Imports

declaration exports just as a module

right

and in the button let's just go ahead

and and do it real simple and ugly right

we're going to transfloat whatever we

have we're going to have a button we can

just add a style to it let's make the

button black

and keep in mind this is just exactly

the same on how you would use a

component in in angular otherwise

um

so let's see here we generate a button

black white color and zero border let's

add some padding so go ahead and say

padding top button for PX 20px to the

sides now that we have the button

component we can make sure that we

import it right so in we go back to our

application and currently we are

essentially serving the micro front end

let's see here we will shrink the screen

a bit

so we have the my remote application

we're serving it for now

so what can we do we can save it go to

the HTML

we can close all the files let's make

sure that you can see the name of the

files as well might

make total total sense so now we need to

navigate to the add account remote

module let's go to the app module there

we are going to import the button module

and as you can see it is being imported

from org slash button this comes from

the TFS config base file you can change

it to whatever you want it to be usually

it would be your organization and then

the name of the library

all right so now that we have imported

it we could essentially go to the

um NX welcome component and we can say

let's see order button

oops or a button

let's see here what did we name it it's

going to be org button did we make sure

that it was imported in the correct

module sorry it needs to be imported in

the entry module obviously because

that's where it is

or essential thenx component lives so

now that I've imported it the button

should be here we can see my button

so saving this we should have the up the

button to the right and as you can see

now we have one button being served on

the remote application and now if I go

to the button you should be able to see

live updates so just imagine if you have

hundreds of projects maybe you would not

have that many but if you would have a

complete set of applications that you

have and you want to make some changes

to a common component that would be a

complete mess right but utilizing the

microphone and architecture you can

Implement some smart CI CD essentially

testing

all of the different places where the

applications are being being used so

this is something that NX already has

built in so you would have the affected

and here you can say I want to run all

of the affected projects that has been

impacted by this change and I want to

run the lint or I want to run the

entrance test for it and so on just

imagine what would happen now we only

have this button within the remote

application

which would trigger the remote

application to be tested and so on in

the CI CD pipeline but let's take a step

back we have utilized it in one

application now we want to utilize it in

the host application as well so what we

need to do there is quite similar we

import the button module here as well

and after importing the button module

let's see here

and let's see app component

and here we can just say I want to add

the org button right so

my host button so as I'm not really

running the host application we can run

the host application at the same time in

test mode and you can do that by

actually going to serve host and it will

execute it in this way and let's just go

ahead and close the other applications

that we have running

um let's see here it's essentially going

to run both of them and we should have

two different buttons being previewed

and then we know for a fact that we have

something reusable

right so give it a couple of seconds

maybe we need to navigate to Four sorry

four thousand two hundred in order for

us to actually hit the host application

and then we have my host button and then

we have my button which actually comes

from the account remote module

all right guys

all right guys now that we have

demonstrated on how it works with NX

monorepos and other Federation we can we

can conclude a couple of things it's

quite easy to set this up with NX and

model Federation

um but there's also a couple of other

pros and cons of actually utilizing NX

model repos and that's something I've

written a bit about in my blog post so

understanding microfrontal architecture

benefits and challenges I'm going to

drop that link in that in in the

comments or in the description of this

video please have a look uh give me your

take on it I would appreciate any

positive or negative feedback and thank

you guys for watching all of the best

bye