# 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:
```sh
node --version
npm --version
```
El primer comando debe imprimir `v24.x.x`. Instala la CLI de este recorrido y comprueba su versión:
```sh
npm install --global @wu-framework/cli@1.2.0
wu --version
```
El ú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](/es/docs/cli/installation/) antes de continuar.
## 2. Crear el shell y React
El directorio `mi-plataforma` todavía no debe existir. Ejecuta:
```sh
wu create mi-plataforma --template react --shell astro
cd mi-plataforma
```
El comando genera el shell Astro y una microapp React. Estas son las piezas que usarás:
```text
mi-plataforma/
├── shell/ # Página anfitriona Astro
├── mf-mi-plataforma/ # Microapp React
├── wu.config.json # Configuración del workspace
└── package.json
```
La 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:
```sh
wu install
```
Después, inicia el servidor y deja la terminal abierta:
```sh
wu dev --native --port 3000 --no-open
```
Cuando la terminal anuncie que está escuchando, abre [http://127.0.0.1:3000](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:
1. Al abrir la página, busca **Overview**, **Welcome to WU** y la app `mi-plataforma`.
2. Pulsa **mi-plataforma** en la navegación o en su tarjeta. Deben aparecer **React**, el nombre `mi-plataforma` y un contador bajo **Interactions**.
3. Pulsa **+**: el valor pasa de **0** a **1**. Pulsa **−** para volver a **0**.
4. 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](/es/docs/cli/doctor/). |
| 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](/es/docs/cli/development/). |
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](/es/sources/) 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](/es/docs/cli/dependencies/) 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](/es/docs/cli/development/).
La diferencia entre `wu.config.json`, `wu.json` y `wu.init()` se explica en [Qué configura cada archivo](/es/docs/guides/add-an-app/#qué-configura-cada-archivo).
## Siguiente paso
Continúa con [Añadir una segunda app](/es/docs/guides/add-an-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](/es/docs/guides/production/) para construir y comprobar su salida.