Introducción

Rsbuild es una herramienta de construcción de aplicaciones que permite la creación de aplicaciones de manera rápida y sencilla. Permite la creación de aplicaciones monolíticas, microfrontends y módulos de manera sencilla y rápida. Y pretende ser un remplazo sencillo de Vite y Webpack, manteniendo todas las compatibilidades de webpack

architecture-it/rsbuild

Librería para aplicaciones utilizando rsbuild y microfrontends. Prestar total atención a la manera de los imports

Dependencias necesarias

{
    "@architecture-it/core": ">=1.8.2",
    "@architecture-it/react-env": ">=1.2.2",
    "@emotion/react": ">=11.11.4",
    "@rsbuild/core": ">=0.6.11",
    "@rsbuild/plugin-react": ">=0.6.11",
    "react": ">=18.3.1",
    "react-dom": ">=18.3.1",
    "@architecture-it/stylesystem": ">=3.2.2",

    // Si se utilizan Microfrontends
    "@module-federation/runtime": ">=0.1.12",
    "@module-federation/enhanced": ">=0.1.12",
}

Instalación

pnpm install @architecture-it/rsbuild

Implementación

Ejemplos de la utilización de utilidades en esta librería

Configuración de tests

jest.config.js

const { generateJestConfig } = require('@architecture-it/rsbuild/test')

module.exports = generateJestConfig({});

Configuración de Rsbuild Shell o SPA

rsbuild.config.ts

import { defaultConfig } from "@architecture-it/rsbuild";

export default defaultConfig({});

Inicialización de (Configuración de Rsbuild Microfrontends Host)

Permite mandar en dependencias claves y v

bootstrap.tsx

import { initializeMicrofronts } from "@architecture-it/rsbuild/initializeMicrofronts";
import { dependencies } from "./package.json";

initializeMicrofronts("shell", {  // (1)!
    dependencies,
});

1. Este nombre debe ser único en todos los microfrontends

Consumo de microfronts en el shell con React Router

src/routes/RouteWrapperRemote.tsx

import { Skeleton } from "@mui/material";
import { Suspense } from "react";
import { Outlet } from "react-router-dom";

const RouteWrapperRemote = () => {
  return (
    <Suspense fallback={<Skeleton />}>
      <Outlet />
    </Suspense>
  );
};

export default RouteWrapperRemote;

Si tu proyecto utiliza redux o react-router-dom, puedes agregarlo en la configuración de initializeMicrofronts para garantizar su inicialización con una instancia en especifico:

bootstrap.tsx

import { initializeMicrofronts } from "@architecture-it/rsbuild/initializeMicrofronts";
// Importamos las librerías que queremos compartir
import * as ReactRouterDom from "react-router-dom";

import { dependencies } from "./package.json";

initializeMicrofronts("shell", {
    dependencies,
    shared: {
      "react-router-dom": {
        version: dependencies["react-router-dom"],
        scope: "default",
        // por default toma esta instancia de la librería
        lib: () => ReactRouterDom,  // (1)!
        shareConfig: {
          singleton: true,
          requiredVersion: dependencies["react-router-dom"],
        },
      },
    }
});

1. Esto es una nueva feature, permite que se le pase la instancia

Consumo avanzado de microfrontends

En ocasiones necesitamos consumirlo dinamicamente y no por environment para ese caso disponibilizamos la función loadComponent que se encarga también de cargar las variables de entorno de dicho mfe

import { loadComponent } from "@architecture-it/webpack/loadComponent";

const Component = await loadComponent<{ name: string }>({
 alias: "remote",
 entry: "http://localhost:3000/remoteEntry.js",
 path: "remote/App",
});

// Si el componente no existe, retornará null. No rompe por defecto si no consigue las environments
if (Component !== null) {
  return <Component name="App" />;
}

Configuración de Rsbuild Microfrontends Modulos

// rsbuild.config.ts
import { mfeConfig } from "@architecture-it/rsbuild/mfeConfig";

import { dependencies } from "./package.json";

export default mfeConfig({
  dependencies,
  moduleFederationOptions: {
    //TODO: revisar que el export y el exposes sea cómo lo tenías antes
    name: "module",
    exposes: {
      "./App": "./src/App",
    },
  },
  dev: {
    // Definir el puerto en que debe estar el microfront en .env. Ejemplo: PORT=3001
    // Este es un ejemplo si el mfe está en una subruta cómo en el host
    startUrl: `http://localhost:${process.env.PORT}`,
  },
  server: {
    port: Number(process.env.PORT) || 3000,
  },
});

Nota

Asume que ya tienes en el archivo .env declarado el puerto en el que se va a correr el microfront

.env

# ... el resto de las variables
PORT=3005

---

FAQ

Hice todo correctamente y no se me visualiza el contenido

Rsbuild en el modo desarrollo agrega headers que hacen que el navegador cachee, por lo general basta con un Ctrl + F5 para que se refresque el contenido.

En el despliegue no se me visualiza el contenido

Asegurate que estés copiando la carpeta dist luego del build en el Dockerfile