Tu primera microapp
Crea un shell Astro con una microapp React y comprueba tu primer montaje con el CLI 1.2.0.
Qué vas a conseguir
Vas a abrir una página con una aplicación React y probar su contador. WU se encargará de mostrar esa aplicación dentro de la página. A eso lo llamamos montar una microapp o microfrontend.
La página que la recibe es el shell. En este recorrido usaremos Astro para el shell y React para la microapp; puedes elegir otros frameworks en tus proyectos.
La carpeta que reúne ambos se llama workspace. La crearás con la CLI, el comando wu de la terminal. La CLI prepara los archivos y ejecuta las herramientas de desarrollo; el paquete wu-framework es el runtime que monta las apps en el navegador.
1. Preparar el entorno
Usa Node 24 con npm. Abre una terminal en la carpeta donde quieras crear el proyecto y comprueba tu versión de Node:
node --version
npm --versionEl primer comando debe imprimir v24.x.x. Instala la CLI de este recorrido y comprueba su versión:
npm install --global @wu-framework/cli@1.2.0
wu --versionEl último comando debe imprimir wu 1.2.0. Si wu no se encuentra o utilizas otra versión de Node, consulta Instalación y versiones antes de continuar.
2. Crear el shell y React
El directorio mi-plataforma todavía no debe existir. Ejecuta:
wu create mi-plataforma --template react --shell astro
cd mi-plataformaEl comando genera el shell Astro y una microapp React. Estas son las piezas que usarás:
mi-plataforma/
├── shell/ # Página anfitriona Astro
├── mf-mi-plataforma/ # Microapp React
├── wu.config.json # Configuración del workspace
└── package.jsonLa app se llama mi-plataforma; su carpeta lleva el prefijo mf-. Ejecuta los comandos siguientes desde esta raíz, donde está wu.config.json. La configuración necesaria ya está generada.
3. Instalar y arrancar
Instala las dependencias y espera a que el comando termine correctamente:
wu installDespués, inicia el servidor y deja la terminal abierta:
wu dev --native --port 3000 --no-openCuando la terminal anuncie que está escuchando, abre http://127.0.0.1:3000. En este modo, WU sirve el shell y la microapp desde el puerto 3000. El primer arranque también construye el shell Astro, así que puede tardar más.
4. Comprobar tu primera app
La plantilla de CLI 1.2.0 incluye una pantalla inicial y un contador:
- Al abrir la página, busca Overview, Welcome to WU y la app
mi-plataforma. - Pulsa mi-plataforma en la navegación o en su tarjeta. Deben aparecer React, el nombre
mi-plataformay un contador bajo Interactions. - Pulsa +: el valor pasa de 0 a 1. Pulsa − para volver a 0.
- Pulsa Overview para volver a la pantalla inicial.
Ya has montado una microapp con WU. Ver su nombre en la navegación confirma que está registrada; ver el componente y usar el contador confirma que se ha cargado y responde.
El componente React que acabas de utilizar está en mf-mi-plataforma/src/App.tsx. La página anfitriona está en shell/src/pages/index.astro.
Si algo no aparece
| Lo que ocurre | Qué revisar |
|---|---|
| El puerto 3000 está ocupado | Detén el otro servidor o elige otro puerto con --port; abre la URL con ese número. |
wu install termina con error |
Resuelve el primer error de la terminal antes de iniciar el servidor. Consulta Diagnóstico. |
| La página responde 404 | Revisa si falló el build inicial de Astro. Que WU esté escuchando no garantiza que el shell se haya construido. |
| El shell abre, pero React queda vacío | Revisa el primer error de consola o de carga JavaScript del navegador. Continúa en Desarrollo y recarga. |
Más sobre versiones, dependencias y modo de desarrollo
Esta receta usa WU CLI 1.2.0 y Node 24. Las dependencias del proyecto se resuelven al instalarlas; no quedan fijadas por la versión de la CLI. Consulta Versiones y distribución para conocer las versiones que cubre esta documentación.
wu install reúne las dependencias del shell y las apps, conserva los scripts y metadatos personalizados de la raíz y ejecuta el gestor configurado. Declara cada dependencia en el paquete que la usa. Consulta dependencias y catálogos para rangos compartidos, conflictos y catálogos.
Con --native, Astro construye el shell en shell/dist/; WU sirve esa salida y lo reconstruye cuando cambian sus fuentes. Esta receta no inicia otro servidor de desarrollo Astro. Los puertos por app de wu.config.json corresponden al modo alternativo --vite; la compilación de las microapps sigue utilizando herramientas de Node. Consulta ambos modos.
La diferencia entre wu.config.json, wu.json y wu.init() se explica en Qué configura cada archivo.
Siguiente paso
Continúa con Añadir una segunda app: conservarás este proyecto y montarás una app Vue junto a React.
Si por ahora te basta una app, puedes pasar directamente a Preparar producción para construir y comprobar su salida.