Github
Crear un Micro Frontend con React es fácil.
Solo debes seguir ciertos pasos que te compartiré a continuación.
En este tutorial te enseñaré a Cómo Crear Un Micro Frontend con React y Vite, vamos con ello.
Creación del Proyecto de Micro Frontends
Nuestra arquitectura Micro Frontend estará compuesta de 3 proyectos:
- Imagen: Este proyecto mostrará una imagen.
- Main: Este es el proyecto principal, el cual cargará los proyectos Imagen y Web.
- Web: Este proyecto mostrará una url.
Vamos a crear estos proyectos paso a paso a continuación.
Usaremos la librería React y la popular herramienta Vite JS.
Antes que todo debemos crear un directorio principal para los Micro Frontend.
Yo lo crearé manualmente y le daré el nombre react-microfrontend
La idea es que todo el proyecto quede así:
/react-microfrontend
├── imagen // Micro frontend 1
├── main // Micro frontend principal (contenedor)
├── web // Micro frontend 2
Ahora pasemos a crear el primer Micro Frontend.
Creación del Micro Frontend Imagen
Ejecutamos el siguiente comando para crear el proyecto:
# Comando para crear el proyecto
npm create vite@latest imagen
> npx
> create-vite imagen
# Elegimos React
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
√ Select a framework: » React
# Elegimos la variante
? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
JavaScript
> JavaScript + SWC
Remix ↗
√ Select a variant: » JavaScript + SWC
# El proyecto ha sido creado
Scaffolding project in D:\contenidos\nc\tutoriales\blog\react-microfrontend\imagen...
Done. Now run:
cd imagen
npm install
npm run dev
Luego que el proyecto ha sido creado.
Ingresamos al directorio del proyecto e instalamos las dependencias necesarias:
# Ingresamos al directorio del proyecto cd imagen # Instalamos las dependencias npm install # Verificar que el proyecto se creo correctamente (Iniciar servidor de Vite) npm run dev
Al final puedes ver que ejecutamos el comando npm run dev.
Este comando nos ayuda a verificar que el proyecto se haya creado correctamente.
Puedes ejecutarlo de manera opcional.
Ya que no necesitaremos ejecutar este comando para el proyecto.
Creamos un archivo o componente con el nombre Imagen.jsx y agregamos una sencilla imagen:
// Importar aquí tus elementos deseados
import logoNC from './assets/logo.jpg'
function App() {
return (
<>
<div>
<img src={logoNC} alt="Logo de Nube Colectiva" width={200} height={200} />
</div>
</>
)
}
export default App
El componente Imagen se debería de ver así en la vista front:
Sirviendo el Micro Frontend Imagen
Para que este proyecto este disponible para el contenedor principal.
Debemos realizar algunas configuraciones.
Instalamos el paquete NPM llamado originjs/vite-plugin-federation ejecutando el siguiente comando:
npm install @originjs/vite-plugin-federation --save-dev added 4 packages, and audited 215 packages in 2s 97 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
Paso seguido abrimos el archivo vite.config.js
Dentro de él importamos el paquete vite-plugin-federation que instalamos anteriormente.
Luego servimos el componente Imagen.
Por último hacemos una configuración para la compilación del proyecto a producción:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// Importamos el paquete vite-plugin-federation
import federation from "@originjs/vite-plugin-federation";
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
federation({ // Servimos el componente 'Imagen'
name: "imagen",
filename: "remoteEntry.js",
exposes: {
"./Imagen": "./src/Imagen.jsx",
},
shared: ["react"],
}),
],
build: { // Configuramos la compilación de producción
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});
Ahora pasemos a compilar el proyecto e iniciar el servidor del proyecto en producción.
Compilación del proyecto
Ejecutamos el siguiente comando para compilar el proyecto a producción:
npm run build > imagen@0.0.0 build > vite build vite v5.4.10 building for production... transforming... ✓ 39 modules transformed. rendering chunks... computing gzip size... dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB dist/assets/logo-g7GzXmKl.jpg 78.58 kB dist/assets/style-BEX1ocfc.css 1.77 kB │ gzip: 0.80 kB dist/assets/__federation_expose_Imagen-BubtbvIM.js 0.43 kB │ gzip: 0.27 kB dist/assets/jsx-runtime-Clt0tiYj.js 1.21 kB │ gzip: 0.65 kB dist/assets/remoteEntry.js 2.29 kB │ gzip: 0.94 kB dist/assets/__federation_shared_react-BBw5xz0u.js 7.81 kB │ gzip: 2.90 kB dist/assets/__federation_fn_import-CHwkZAXD.js 13.85 kB │ gzip: 3.08 kB dist/assets/index-D1f4uo4v.js 139.22 kB │ gzip: 44.70 kB ✓ built in 703ms
Ahora dejemos el servidor de desarrollo del proyecto ejecutándose.
Iniciar el servidor de producción
Por último debemos de dejar el servidor de producción del proyecto activo.
De esta manera podremos acceder a él, desde el contenedor principal Main.
Ejecutamos el siguiente comando para iniciarlo:
npm run preview > imagen@0.0.0 preview > vite preview ➜ Local: http://localhost:4173/ ➜ Network: use --host to expose
No muevas nada, déjalo así encendido.
Ahora pasemos a crear el Micro Frontend o proyecto Web.
Creación del Micro Frontend Web
Ejecutamos el siguiente comando para crear el proyecto:
# Comando para crear el proyecto
npm create vite@latest web
> npx
> create-vite web
# Elegimos React
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
√ Select a framework: » React
# Elegimos la variante
? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
JavaScript
> JavaScript + SWC
Remix ↗
√ Select a variant: » JavaScript + SWC
# El proyecto ha sido creado
Scaffolding project in D:\contenidos\nc\tutoriales\blog\react-microfrontend\web...
Done. Now run:
cd web
npm install
npm run dev
Luego que el proyecto ha sido creado.
Ingresamos al directorio del proyecto e instalamos las dependencias necesarias:
# Ingresamos al directorio del proyecto cd web # Instalamos las dependencias npm install # Verificar que el proyecto se creo correctamente (Iniciar servidor de Vite) npm run dev
Al final puedes ver que ejecutamos el comando npm run dev.
Este comando nos ayuda a verificar que el proyecto se haya creado correctamente.
Puedes ejecutarlo de manera opcional.
Ya que no necesitaremos ejecutar este comando para el proyecto.
Creamos un archivo o componente con el nombre Web.jsx y agregamos una sencilla url:
// Importar aquí tus elementos deseados
// import logoNC from './assets/logo.jpg'
function Web() {
return (
<>
<div>
<strong>Web:</strong> nubecolectiva.com
</div>
</>
)
}
export default Web;
El componente Web se debería de ver así en la vista front:
Sirviendo el Micro Frontend Web
Para que este proyecto este disponible para el contenedor principal.
También debemos realizar algunas configuraciones.
Instalamos el paquete NPM llamado originjs/vite-plugin-federation ejecutando el siguiente comando:
npm install @originjs/vite-plugin-federation --save-dev added 4 packages, and audited 215 packages in 2s 97 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
Paso seguido abrimos el archivo vite.config.js
Dentro de él importamos el paquete vite-plugin-federation que instalamos anteriormente.
Luego servimos el componente Web.
Por último hacemos una configuración para la compilación del proyecto a producción:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// Importamos el paquete vite-plugin-federation
import federation from "@originjs/vite-plugin-federation";
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
federation({ // Servimos el componente 'Web'
name: "web",
filename: "remoteEntry.js",
exposes: {
"./Web": "./src/Web.jsx",
},
shared: ["react"],
}),
],
build: { // Configuramos la compilación de producción
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});
Ahora pasemos a compilar el proyecto e iniciar el servidor del proyecto en producción.
Compilación del proyecto
Ejecutamos el siguiente comando para compilar el proyecto a producción:
npm run build > web@0.0.0 build > vite build vite v5.4.10 building for production... transforming... ✓ 38 modules transformed. rendering chunks... computing gzip size... dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB dist/assets/style-BEX1ocfc.css 1.77 kB │ gzip: 0.80 kB dist/assets/__federation_expose_Web-kEjvn-_y.js 0.37 kB │ gzip: 0.23 kB dist/assets/jsx-runtime-Clt0tiYj.js 1.21 kB │ gzip: 0.65 kB dist/assets/remoteEntry.js 2.28 kB │ gzip: 0.94 kB dist/assets/__federation_shared_react-BBw5xz0u.js 7.81 kB │ gzip: 2.90 kB dist/assets/__federation_fn_import-CHwkZAXD.js 13.85 kB │ gzip: 3.08 kB dist/assets/index-D1f4uo4v.js 139.22 kB │ gzip: 44.70 kB ✓ built in 652ms
Ahora dejemos el servidor de desarrollo del proyecto ejecutándose.
Iniciar el servidor de producción
Por último debemos de dejar el servidor de producción del proyecto activo.
De esta manera podremos acceder a él, desde el contenedor principal Main.
Ejecutamos el siguiente comando para iniciarlo:
npm run preview > imagen@0.0.0 preview > vite preview ➜ Local: http://localhost:4174/ ➜ Network: use --host to expose
No muevas nada, déjalo así encendido.
Si te fijas bien el servidor de producción de Imagen es http://localhost:4173/
Y el de Web es http://localhost:4174/
Estas URLs locales las asigna el mismo Vite JS.
Hasta aquí hemos creado los 2 Micro Frontends o proyectos que serán cargados en la vista principal Main.
Creación del Micro Frontend Main (Contenedor)
Ahora vamos a crear el proyecto principal en donde llamaremos a todos nuestros Micro Frontends.
Es decir a Imagen y Web, pero puedes llamar a otros más si deseas.
Ejecutamos el siguiente comando para crear el proyecto:
# Comando para crear el proyecto
npm create vite@latest main
> npx
> create-vite web
# Elegimos React
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
√ Select a framework: » React
# Elegimos la variante
? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
JavaScript
> JavaScript + SWC
Remix ↗
√ Select a variant: » JavaScript + SWC
# El proyecto ha sido creado
Scaffolding project in D:\contenidos\nc\tutoriales\blog\react-microfrontend\main...
Done. Now run:
cdmain
npm install
npm run dev
Luego que el proyecto ha sido creado.
Ingresamos al directorio del proyecto e instalamos las dependencias necesarias:
# Ingresamos al directorio del proyecto cd main # Instalamos las dependencias npm install # Verificar que el proyecto se creo correctamente (Iniciar servidor de Vite) npm run dev
Al final puedes ver que ejecutamos el comando npm run dev.
Este comando nos ayuda a verificar que el proyecto se haya creado correctamente.
Puedes ejecutarlo de manera opcional.
Ya que no necesitaremos ejecutar este comando para el proyecto.
Importando todos los Micro Frontends
Para poder acceder a los demás proyectos o Micro Frontends, es decir a Imagen y Web.
Vamos a realizar algunas configuraciones.
Instalamos el paquete NPM llamado originjs/vite-plugin-federation ejecutando el siguiente comando:
npm install @originjs/vite-plugin-federation --save-dev added 4 packages, and audited 215 packages in 2s 97 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
Paso seguido abrimos el archivo vite.config.js
Dentro de él importamos el paquete vite-plugin-federation que instalamos anteriormente.
Luego llamamos a los componentes o Micro Frontends Imagen y Web.
Por último hacemos una configuración para la compilación del proyecto a producción:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// Importamos el paquete vite-plugin-federation
import federation from "@originjs/vite-plugin-federation";
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
federation({ // Importamos los Micro Frontends 'Imagen' y 'Web'
name: "main",
remotes: {
imagen: "http://localhost:4173/assets/remoteEntry.js",
web: "http://localhost:4174/assets/remoteEntry.js",
},
shared: ["react"],
}),
],
build: { // Configuramos la compilación de producción
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});
Ahora vamos a ensamblar todos los Micro Frontends en la vista front.
Integración de los Micro Frontends en el Front-end
Abrimos el archivo App.jsx e importamos los componentes Imagen y Web.
Y los usamos en la vista front:
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
// Importamos los componentes Imagen y Web
import Imagen from 'imagen/Imagen'
import Web from 'web/Web'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
// Componentes Imagen y Web
<Imagen />
<Web />
</>
)
}
export default App
Por último iniciamos el servidor de desarrollo de Vite para el proyecto o contenedor principal Main.
Para iniciar el servidor ejecutamos el siguiente comando:
npm run dev > main@0.0.0 dev > vite VITE v5.4.10 ready in 224 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose
Si abrimos la ruta local http://localhost:5173/ en el navegador, podemos ver que el proyecto carga con los demás Micro Frontends.
Pero la imagen del Micro Frontend Imagen no carga correctamente.
Solución al Problema al Cargar la imagen del Micro Frontend imagen
Estuve investigando varias horas, una manera de corregir este problema siguiendo las buenas prácticas pero no la encontré.
Seguí investigando y encontré una forma alternativa o truco para corregir esto.
Cuando compilamos el proyecto Imagen usando el comando npm run build
Se nos genera un directorio llamado dist con varios archivos compilados.
Dentro del directorio dist encontré un archivo llamado __federation_expose_Imagen-0obkyj40.js
Lo abrí y tenia este contenido:
import { j as jsxRuntimeExports } from './jsx-runtime-Clt0tiYj.js';
const logoNC = "/assets/logo-g7GzXmKl.jpg";
function Imagen() {
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logoNC, alt: "Logo de Nube Colectiva", width: 200, height: 200 }) }) });
}
export { Imagen as default };
Lo que hice fue colocar la ruta completa del servidor de producción del proyecto Imagen:
Es decir ahora quedaría así:
import { j as jsxRuntimeExports } from './jsx-runtime-Clt0tiYj.js';
const logoNC = "http://localhost:4173/assets/logo-g7GzXmKl.jpg";
function Imagen() {
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logoNC, alt: "Logo de Nube Colectiva", width: 200, height: 200 }) }) });
}
export { Imagen as default };
Si tienes varias imágenes, solo colócales la ruta completa de tu servidor de producción.
Resultado Final
Entonces actualizamos el navegador que esta cargando la ruta local http://localhost:5173/ de nuestro servidor.
Y podemos ver nuestro proyecto funcionando correctamente.
Nos muestra el Micro Frontend Imagen y Web dentro del proyecto o contenedor principal Main.
Este proyecto tiene una arquitectura Micro Frontend creada con React y Vite:
Si deseas agregar más Micro Frontends, solo sigue los mismos pasos indicados
Así de fácil puedes crear un Micro Frontend con React y Vite.
Conclusión
En este tutorial has aprendido a Cómo Crear Un Micro Frontend con React y Vite.
Te servirá de guía para que puedas crear tu propio Micro Frontend.
Recuerda practicar mucho, solo así serás un mejor desarrollador de Micro Frontends.
Nota (s)
- En la siguiente parte y última ensamblaremos toda nuestra arquitectura Micro Frontend.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.