TL;DR: El uso de un solo spa para crear micro interfaces hace que sea más fácil dividir una aplicación grande en partes pequeñas e independientes para que diferentes equipos puedan trabajar en partes sin afectar a los demás. Este blog muestra cómo crear microfrontends Angular y React, conectarlos a una configuración raíz e implementarlos.

Los microfrontends se han convertido en un estilo arquitectónico popular para escalar aplicaciones frontend, particularmente cuando varios equipos trabajan en diferentes partes de una interfaz de usuario. Al dividir las interfaces monolíticas en módulos independientes más pequeños, los equipos pueden implementar, actualizar y escalar partes de una aplicación por separado. Este artículo analizará cómo crear y conectar microfrontends de diferentes marcos utilizando single-spa.

Introducción al spa individual

Single-spa es un marco basado en JavaScript diseñado para arquitectura micro frontend. Le permite crear micro interfaces utilizando marcos como Angular, React y Vue y servirlos como una sola aplicación. Mantiene un registro de aplicaciones conectadas y utiliza rutas para redirigir a los usuarios a diferentes aplicaciones.

El uso de un marco de SPA único tiene muchos beneficios, como la elección de diferentes idiomas para diferentes partes de la aplicación, el desarrollo independiente y la implementación de microfrontends y escalabilidad. Entonces, comencemos con la creación de un spa individual.

Creando un spa individual

Requisitos previos

Para implementar un spa único, es importante tener Node.js y npm instalados. Para instalarlos, vaya al sitio web de Node.js y descargue la última versión para su sistema operativo. Ejecute el instalador para completar la instalación.

Luego, verifique la instalación de node.js y npm ejecutando los siguientes comandos en el símbolo del sistema.

npm - version
node - version

Paso 1: configurar el proyecto

En este ejemplo, se crearán dos microfrontends simples usando Angular y React. Una configuración raíz servirá a las dos micro interfaces.

Crear una aplicación

Podemos crear una aplicación de micro frontend angular simple ejecutando el siguiente comando.

ng new angular-spa-frontend

Una vez creado el proyecto, ejecute el siguiente comando para instalar la biblioteca de spa único.

ng add single-spa-angular

Una vez que la biblioteca se haya instalado correctamente, se creará un archivo llamado main.single-spa.ts en el proyecto Angular, que contiene todas las configuraciones relacionadas con single-spa.

Consulte el código de configuración.

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Se requiere proporcionar un valor APP_BASE_HREF para funcionar como un spa único.

Además, al agregar la biblioteca de un solo spa, package.json contendrá dos scripts adicionales.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

El archivo angular.json se modificará utilizando las siguientes configuraciones.

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

“main”: “src/main.ts” se reemplazará con “main”: “src/main.single-spa.ts”. Se agregará una nueva configuración de compilación como módulo de JavaScript.

Una vez completadas y verificadas las configuraciones, podemos servir la aplicación Angular usando el siguiente comando.

npm run serve:single-spa:angular-spa-frontend

Ahora que hemos creado con éxito la aplicación micro frontend, veamos cómo implementar la root-config.

Configuración raíz

Ejecute el siguiente comando para crear la configuración raíz.

npx create-single-spa

Al ingresar este comando, se presentarán una serie de configuraciones para crear el archivo root-config.

Después de seleccionar las configuraciones anteriores, se creará la configuración raíz para servir a múltiples interfaces.

Para conectar la micro interfaz creada a la configuración raíz, necesitamos modificar los archivos root-config.ts y index.ejs.

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

Como se mencionó en el bloque de código anterior, la micro interfaz creada debe importarse en el archivo root-config.ts.

name: "@org/angular-spa-frontend",

Los siguientes scripts deben agregarse al archivo index.ejs.

Micro frontend creado ( @org/angular-spa-frontend ), junto con la URL ( http://localhost:4200/main.js ) en el que se encuentra el micro La interfaz ha sido alojada, debe agregarse en el mapa de importación.

Luego, ejecuta el siguiente comando para ejecutar la aplicación.

npm run start

Suponiendo que estos pasos se realicen correctamente, deberíamos poder ver el spa individual final en la vista, similar a la siguiente imagen.

Paso 2: Implementación en producción

Al implementar estas microfrontends en producción, se recomienda que cada aplicación de microfrontend se implemente como una aplicación independiente. La configuración raíz presumiblemente cargará cada aplicación dinámicamente, dependiendo de las rutas de la aplicación establecidas en registerApplication.

Paso 3: Agregar más micro interfaces

Para agregar más microfrontends, repita los pasos mencionados anteriormente. Veamos cómo integrar una micro interfaz de React en la misma configuración raíz.

Cree una nueva micro interfaz de React usando el siguiente comando.

npx create-single-spa --module-type react

Luego, navega dentro del proyecto creado e instala single-spa-react.

npm install single-spa-react

Modifique el archivo de entrada para exportar métodos del ciclo de vida para que la aplicación sea compatible con un solo spa.

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

Una vez completadas las configuraciones, podemos servir la micro interfaz de React usando el siguiente comando.

npm start

Para integrar la micro interfaz creada con la root-config existente, implemente las siguientes modificaciones en los archivos en root-config.

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

También necesitas actualizar el archivo index.ejs con la ruta del paquete principal de la aplicación React.

Referencia de GitHub

Consulte el ejemplo de código completo de esta aplicación de spa único en esta demostración de GitHub.

Conclusión

El uso de un solo spa para crear micro interfaces hace que sea más fácil dividir una aplicación grande en partes pequeñas e independientes. De esta manera, diferentes equipos pueden trabajar por su parte sin afectar a los demás y utilizar los frameworks que prefieran, como Angular o React. Siguiendo los pasos de esta guía, puede configurar un proyecto de spa único, conectar múltiples microfrontends y brindar a los usuarios una experiencia fluida. Single-spa simplifica el crecimiento de tu aplicación con el tiempo y agrega nuevas funciones según sea necesario.

Blogs relacionados

• Domina JavaScript asíncrono con RxJS
• ¿Axios y Fetch API? Elegir el cliente HTTP adecuado
• Tipos de utilidades TypeScript: una guía completa
• Almacenamiento seguro JWT: mejores prácticas