Añadir una segunda app

De una app a dos

Continúa en el proyecto mi-plataforma de Tu primera microapp. Ya tienes React funcionando dentro del shell Astro. Ahora añadirás una app Vue llamada inspector y comprobarás que las dos funcionan desde la misma página.

Conservaremos los contadores de las plantillas para que puedas reconocer el resultado antes de modificar componentes.

1. Añadir Vue al workspace

Detén el servidor de desarrollo con Ctrl+C. Desde la raíz mi-plataforma/, donde está wu.config.json, ejecuta:

wu add vue inspector --no-install
wu install

El orden de add es framework, nombre. El primer comando crea mf-inspector/ y registra la nueva app en la configuración del workspace. --no-install deja la instalación para el segundo comando, que también instala las dependencias de Vue.

Espera a que wu install termine correctamente antes de continuar.

2. Arrancar y comprobar ambas apps

Inicia otra vez el servidor:

wu dev --native --port 3000 --no-open

Abre o recarga http://127.0.0.1:3000 cuando la terminal anuncie que está escuchando.

1. En Overview, comprueba que aparecen mi-plataforma e inspector.
2. Abre mi-plataforma. Debes ver React y su contador bajo Interactions. Comprueba + y −: 0 → 1 → 0.
3. Abre inspector. Debes ver Vue, el nombre inspector y su contador. Comprueba también + y −.
4. Vuelve a Overview.

El mismo shell ya puede mostrar apps de dos frameworks. No has tenido que convertir un componente React a Vue ni cambiar la navegación a mano.

Si inspector no aparece, comprueba que ejecutaste add desde la raíz correcta y que wu.config.json incluye la nueva app. Si aparece en la navegación pero queda vacía, revisa el primer error de consola o de carga JavaScript del navegador. Desarrollo y recarga explica cómo seguir el diagnóstico.

3. Localizar el código de cada app

Edita los componentes en la carpeta de su app y conserva el servidor de desarrollo abierto para comprobar los cambios. Las dependencias propias se declaran en el package.json de esa app; después ejecuta wu install desde la raíz para actualizar la instalación del workspace.

Qué comparten y qué conserva cada app

Las dos apps utilizan el mismo shell y el runtime WU que las carga y monta. Cada una conserva sus componentes, su framework y el estado de su contador. Añadir Vue no conecta automáticamente los dos contadores.

Cuando necesites que las apps colaboren, elige la comunicación según la tarea:

• Eventos: una app anuncia algo que ha ocurrido, como «se añadió un producto».
• Store: varias apps consultan y actualizan un dato compartido, como la cantidad de productos del carrito.
• Contratos y RPC: una app ofrece una operación y otra solicita su resultado.

Para conectar estos mismos contadores, sigue Un contador entre React y Vue. Incluye los componentes completos, los permisos de ambas apps y una página Astro que permite verlas juntas. Después, Una suma entre aplicaciones añade un cliente y un proveedor al mismo workspace.

Qué configura cada archivo

No necesitas editar estos archivos para completar el recorrido. Esta distinción te servirá cuando personalices el proyecto:

Consulta Configuración y descubrimiento para modificar el workspace y Configuración y manifests para configurar apps en el runtime.

Siguiente paso

Continúa con Preparar producción para construir las apps, servir la salida y comprobar lo que publicarás. Si quieres conectarlas primero, puedes completar el contador compartido y luego construir el proyecto con los mismos comandos.