Microfrontend Root-Config

Este proyecto es un microfrontend desarrollado en webpack versión 5.75.0 y con single-spa en su version 5.9.3. Su principal función es ser el orquestador de los micro-frontends de la aplicación. El aplicativo se encuentra en el siguiente enlace.

Importmap JSON

Dado que se usa single-spa los micro-frontends necesitan desplegarse en un dominio y colocar su dominio en un archivo JSON cuyo contenido debe ser el siguiente

{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
    "single-spa-vue": "https://cdn.jsdelivr.net/npm/single-spa-vue@2.1.0/dist/umd/single-spa-vue.min.js",
    "@portafolio/root-config": "//localhost:9000/portafolio-root-config.js",
    "@portafolio/mf-menu": "//localhost:4201/main.js",
    "@portafolio/mf-header": "//localhost:4203/main.js",
    "@portafolio/mf-advertising": "//localhost:4204/main.js",
    "@portafolio/mf-styles": "//localhost:4202/styles.js",
    "@portafolio/mf-whatsapp": "//localhost:8084/app.js"
  }
}

Las rutas deben ser cambiados segun el dominio de nuestra aplicación, es decir, reeemplazar localhost:${port} por el respectivo dominio

Servidor de desarrollo

Primero debemos clonar el código del repositorio y con una terminal instalar las dependencias

npm i

Luego debemos ejecutar

npm start

Esto levantará un servidor de desarrollo localhost en el puerto 9000

Construcción

Los archivos generados a través del proceso de contrucción se almacenan en la carpeta dist, para construir el proyecto debemos ejecutar el siguiente comando en una terminal

npm run build