Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Crear un Micro Frontend con Vue 3 – Parte 4 (Final)

Demo Github

Han sido horas de investigación y trabajo duro, pero siempre hago los tutoriales pensando en que le puedo cambiar la vida a una persona que programa o realiza una actividad similar, porque si hemos venido a este mundo, es para ayudar a los demás y esa es una de mi motivación principal, ayudar a que los demás aprendan a programar para que mejoren sus vidas. En las tres primeras partes de este tutorial creamos un formulario, un gráfico de datos y una tabla HTML. Llego el turno de unir estos tres proyectos y conformar la estructura o arquitectura Micro Frontend. Continuemos en esta útima parte del tutorial Como Crear un Micro Frontend con Vue 3, vamos con ello.

Partes

Aplicación que tiene una estructura Micro Frontend

Podcast: “Porque Debes Acostumbrarte A Resolver Los Problemas De Código Por Tu Cuenta” y “4 Errores Que Pueden Arruinar Tu Carrera Como Desarrollador” (Anchor Podcast):

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear un Micro Frontend con Vue 3 – Parte 4 (Final).

Como Crear un Micro Frontend con Vue 3

Vamos a ver solo los aspectos técnicos más importantes de este proyecto. Hay muchos aspectos técnicos que ver y me pasaría horas y varias partes más en este tutorial, para explicarlos. Recuerda que arriba he colocado el código del proyecto alojado en un repositorio de GitHub, para que lo descargues y lo estudies e implementes en tus proyectos, en este código podrás ver otras cofiguraciones adicionales que he realizado en el proyecto. Asimismo arriba también hay una Demo para que veas el proyecto en acción.

Integración de las aplicaciones en una sola (Arquitectura Micro Frontend)

Para organizar la estructura Micro Frontend con las 3 aplicaciones he creado una cuarta aplicación con Vite, llamada layout, dentro de ella hay un archivo llamado main.js que se encuentra en microfrontend-vue3 >  layout > src > main.js:


Dentro del archivo main.js he creado rutas dinámicas para llamar a las aplicaciones Formulario, Tabla y Analytica en la vista principal o Layout:

También hay un archivo llamado vite.config.ts que se encuentra en microfrontend-vue3 >  layout > vite.config.ts:


En el archivo vite.config.ts ensamblo las 3 aplicaciones Vue: Formulario, Tabla y Analytica dentro de la opcion que dice federation. La primera ruta se llama home, ponerle este nombre es obligatorio, esta ruta home ensambla a la aplicación Formulario, debajo está la ruta microfrontend-2-analytica que ensambla a la aplicación Analytica y por último está la ruta microfrontend-3-tabla que ensambla a la aplicación Tabla, puedes agregar más aplicaciones si deseas:


Las 3 aplicaciones Vue: Formulario, Tabla y Analytica, tienen un archivo vite.config.ts en donde también le he agregado la configuración federation, por ejemplo si abrimos el archivo vite.config.ts del Formulario que se encuentra en microfrontend-vue3 > microfrontend-1-formulario > vite.config.ts:


Podemos encontrar en el siguiente código la opción federation en donde definimos el nombre y la ruta de la aplicación:


La idea es que cuando compilamos el proyecto, el sistema detecta la configuración en el archivo vite.config.ts de cada aplicación y las ensambla.

También estoy usando el paquete pnpm que me permite ejecutar las 3 aplicaciones al mismo tiempo, sin necesidad de iniciarlas una por una.

Por ejemplo si quieremos iniciar la aplicación Formulario, tendria que ingresar al directorio de la aplicación microfrontend-1-formulario y adentro ejecutar el comando npm run dev para poder iniciarla.

Entonces si ejecuto el siguiente comando, compilo las aplicaciones y lanzo el servidor del proyecto:


Luego de ejecutar el comando anterior, me dice que se ha iniciado todas las aplicaciones, cada uno dentro de una ruta independiente, para la aplicación Formulario usa la ruta http://localhost:5001/, para la aplicación Analytica usa la ruta http://localhost:5002/, para la aplicación Tabla usa la ruta http://localhost:5003/ y para la vista principal que contiene la estructura Micro Frontend utiliza la ruta http://localhost:5000/.

Entonces abrimos la ruta principal http://localhost:5000/ en el navegador y podemos ver nuestro proyecto Vue 3 que contiene 3 aplicaciones independientes, conformando asi una arquitectura micro Frontend:

Teniendo lista la arquitectura Micro Frontend, podrás hacer que cada aplicación haga algo más

Cada aplicación esta aislada, si modificas una de ellas, las demás no se verán afectadas.

Conclusión

En este tutorial que consta de 4 partes, has aprendido a Como Crear un Micro Frontend con Vue 3, aprender a crear uno, te servirá como base para crear aplicaciones bajo la arquitectura Micro Frontend, más complejas. También se pueden usar otros frameworks o librerías y combinarlas, por ejemplo podrias crear una arquitectura Micro Frontend con Angular, React y Vue, pero ese es otro tema.

Nota (s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil