Creación de un microfrontend con Vite

Vite, una herramienta de compilación para configurar rápidamente proyectos modernos de JavaScript, proporciona un servidor de desarrollo rápido, reemplazo de módulos en caliente, y otras características que pueden ayudar a acelerar el proceso de desarrollo. 

Vite es un excelente punto de partida para crear tus microfrontends en Modyo, ya que permite crear proyectos modernos y robustos basados tanto en Vue como React. En React, además, permite reemplazar el comando desactualizado create-react-app.

Para crear un microfrontend con Vite, sigue estos pasos:

Paso 1: Preparación

Antes de iniciar, confirma que tienes Node.js y npm instalados en tu ordenador, de lo contrario, puedes descargarlos de la página oficial de Node.js [https://nodejs.org/en].

Paso 2: Crear un nuevo proyecto Vite

Para crear un nuevo proyecto desde Vite, abre tu terminal y ejecuta los siguientes comandos:

mkdir mi-proyecto

Este comando crea la carpeta donde se almacenará tu proyecto. Para entrar a esta nueva carpeta ejecuta:

cd mi-proyecto

Una vez dentro de la carpeta de tu proyecto, ejecuta el comando:

npm init vite

Esto inicia el generador de proyectos Vite. Ingresa el nombre del proyecto y elige una plantilla preconfigurada o seleccionar custom para configurar tu proyecto manualmente. 

En este tutorial, usamos la plantilla React, una plantilla básica para un proyecto JavaScript basado en la librería React.

Paso 3: Instalar dependencias e iniciar el servidor de desarrollo

Una vez elegida la plantilla, Vite genera un nuevo proyecto en el directorio mi-proyecto. 

Para instalar las dependencias e iniciar el servidor de desarrollo, ejecuta los siguientes comandos:

cd mi-proyecto

npm install

Esto instala todas las dependencias necesarias e inicia el servidor de desarrollo. Una vez finalizada la instalación, ejecuta un servidor local con el comando:

npm run dev

En este servidor local podrás realizar pruebas y depuración en tu equipo local.

Paso 4: Ajustes y desarrollo

Para garantizar mejores resultados y compatibilidad recomendamos que modifiques el identificador de tu app y te asegures que tiene un nombre único. 

Recomendamos también que verifiques en el archivo index.html que el identificador “root” se encuentra en esa línea. Una vez verificado, modifica el identificador, sustituyéndolo por el nombre de tu app. Este nombre debe ser único. 

<div id="root"></div>

Repite el mismo proceso en main.jsx para que React pueda actualizar el punto de entrada de la aplicación. 

ReactDOM.createRoot(document.getElementById('root')).render(

Recuerda que debes realizar el paso en ambos lugares, de lo contrario tu aplicación no funcionará correctamente.

Paso 5: Publicar el proyecto en Modyo

Una vez que tu proyecto esté listo para publicar, lo puedes compilar para producción. Para construir el proyecto, ejecuta el siguiente comando:

npm run build

Este comando crea un directorio dist que contiene la compilación de producción optimizada de tu proyecto. 

Para publicar tu widget compilado en Modyo, sigue las instrucciones detalladas en nuestra documentación.

Ahora ya sabes cómo crear, compilar y publicar tus microfrontends utilizando Vite.