En el presente documento se describirán los diferentes lineamientos y activos de arquitectura para el desarrollo de MicroFrontEnd

1. CONTROL DE VERSIONES DEL DOCUMENTO

VERSIÓN	FECHA	DESCRIPCIÓN	RESPONSABLE
1.0	22/05/2019	Versión inicial	Jimy Huacho Dolores

2. Resumen Ejecutivo

En el presente documento se describirán los diferentes lineamientos y activos de arquitectura para el desarrollo de MicroFrontEnd

3. Propósito

El propósito es poder crear Aplicaciones web haciendo uso de los MicroFrontEnd a traves del framework Single-SPA, puede descargar el demo en: DEMO SINGLE SPA

4. Uso

Cabe destacar que documentación de Single SPA es muy detallada y su comunidad es muy activa por lo que solo nos enfocaremos en como usarlo.

Descargue el repositorio de ejemplo: DEMO SINGLE SPA

Recuerde que todo lo que se mencionará aca esta en la propia documentación de SINGLE SPA

roo-config

Single SPA recomienda usar un proyecto simple donde registraremos nuestras aplicaciones (MicroFrontEnd), para ello es mejor usar la CLI de SingleSPA

Para crear un proyecto root debemos ejecutar el comando:

 create-single-spa --moduleType root-config

este comando creará un proyecto con las configuraciónes necesarias para iniciar nuestra root-container. Una vez creado el proyecto procedemos a registrar nuestras aplicaciones (revise el archivo telefonica-root-config.ts del proyecto ):

import { registerApplication, start } from "single-spa";
import * as isActive from "./activity-functions";

registerApplication({
  name: "@telefonica/login",
  app: () => System.import("@telefonica/login"),
  activeWhen: (location) => isActive.login(location),
});

registerApplication({
  name: "@telefonica/home",
  app: () => System.import("@telefonica/home"),
  activeWhen: (location) => isActive.home(location),
});

start({ urlRerouteOnly: true });

Una vez registrada las aplicaciones, debe crear unos archivos JSON donde indicaremos en que site estan nuestros microfrontend, revise la carpeta import-map.dev.json :

{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@16.13.0/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.0/umd/react-dom.production.min.js",
    "@telefonica/root-config": "//localhost:9000/index.js",
    "@telefonica/login": "//localhost:4200/main.js",
    "@telefonica/home": "//localhost:8500/telefonica-home.js"
  }
}

En este ejemplo registramos los identificadores de cada uno de nuestros microfrontEnd e indicamos donde se encuentran, ademas puede que necesite compartir ciertas librería, por ejemplo "react y reac-dom".

luego de ello debe cargar el archivo root-config(en este caso se llama asi) dentro de su index.ejs a traves de su identificador:

 <body>
    <script>
      System.import("@telefonica/root-config");
    </script>
  </body>

configuración webpack

Para poder registrar nuestro proyecto como root-config debemos configurar el archivo webpack.config.js, ademas de ello configuramos la carga de nuestra carpeta "import-maps" y cargaremos el archivo json según el entorno que necesitemos.

const webpackMerge = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-ts");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = (webpackConfigEnv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "telefonica",
    projectName: "root-config",
    webpackConfigEnv,
  });

  return webpackMerge.smart(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    devServer: {
      historyApiFallback: true,
    },
    entry: {
      index: path.resolve(__dirname, "src") + "/telefonica-root-config.ts",
    },
    output: {
      path: path.resolve(__dirname, "./dist"),
      filename: "[name].js",
    },
    plugins: [
      new HtmlWebpackPlugin({
        inject: false,
        template: "src/index.ejs",
        templateParameters: {
          isLocal: webpackConfigEnv && webpackConfigEnv.isLocal === "true",
        },
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from:
              "src/import-maps/import-map." +
              webpackConfigEnv.importMap +
              ".json",
            to: "import-map.json",
          },
          {
            from:
              "src/web.config",
            to: "web.config",
          },
          {
            from: "src/assets",
            to: "assets",
          },
        ],
      }),
    ],
  });
};

Para correr nuestro proyecto root-container ejecutamos el comando:

npm run start

Si queremos correr todo los microfrontend y el root-container use el comando npm run init, revise todos los proyecto para que entienda mejor como funciona Single-SPA.

npm run init

Creación de MicroFront

Para crear un proyecto MicroFront desde cero debe ejecutar el comando:

npm init single-spa --framework <AQUI EL Framework o libreria de javascript>

Single-SPA maneja todos los framework y librerías de JavaScript si quiere conocer vaya a Ecosistema SingleSPA

Si ustede desea convertir un proyecto existente a MicroFront solo tiene que usar la CLI de Single-SPA y ejecutar los comandos según el proyecto que desee convertir, ese comando agregara todas las configuraciones por usted, por ejemplo:

Angular

ng add single-spa-angular

React

npm install --save single-spa-react

De todas maneras no olvide revisar la documentación de Single-SPA para mayor información.