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:
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].
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.
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.
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.
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.
Carlos Solís
Descubre cómo Domain Driven Design te permite construir aplicaciones que se alinean perfectamente con tu negocio. Aplica DDD en arquitecturas de microservicios y micro frontends para crear soluciones más escalables y adaptables, aprovechando el potencial de Modyo.
Carlos Solís
La depuración es una parte esencial del desarrollo de software. Nos permite identificar y corregir errores, optimizando el rendimiento y la estabilidad de nuestras aplicaciones
Carlos Solís
Optimizar imágenes es esencial para cualquier sitio web, sobre todo si buscas que cargue rápido y ofrezca una buena experiencia de usuario