Preparar producción

Revisar lo que vas a publicar

En desarrollo has probado tus fuentes. Ahora vas a generar los archivos que entregará tu hosting y comprobar esas versiones construidas en el navegador.

Continúa desde la raíz mi-plataforma/ de Tu primera microapp. Si completaste Añadir una segunda app, también construirás Vue. Los mismos comandos sirven con una o dos apps.

1. Construir el workspace

Detén el servidor de desarrollo con Ctrl+C y ejecuta:

wu build

Espera a que termine correctamente. WU reúne el shell Astro y los builds de las microapps en la carpeta dist/ de la raíz del workspace. Esa carpeta reúne la salida completa; shell/dist/ contiene únicamente el shell.

Con React y Vue, comprueba que existe dist/index.html y una carpeta para cada microapp:

dist/
├── index.html
├── apps.json
├── wu-manifest.json
├── assets/...
├── mf-mi-plataforma/
│   ├── wu.json
│   └── assets/...
└── mf-inspector/
    ├── wu.json
    └── assets/...

Si solo creaste React, no habrá una carpeta mf-inspector/. El build puede añadir otros archivos, incluidos los de política HTTP. Cada wu.json apunta a las entradas construidas de su app.

Si el comando falla, resuelve el primer error antes de continuar. Una carpeta dist/ de un build anterior puede seguir existiendo; verla en disco no confirma que el último build haya terminado bien.

2. Servir la salida construida

Desde la misma raíz, ejecuta:

wu serve 4100

Deja la terminal abierta y visita http://127.0.0.1:4100. El número 4100 es el puerto de esta revisión. Si está ocupado, utiliza otro número y abre la URL correspondiente.

wu serve entrega los archivos de dist/. Si cambias fuentes, ejecuta de nuevo wu build para incorporar esos cambios a la revisión.

3. Comprobar las apps en producción

1. Comprueba Overview, Welcome to WU y los nombres de las apps que creaste.
2. Abre mi-plataforma y verifica React, el nombre de la app y su contador: + cambia 0 → 1 y − vuelve a 0.
3. Si añadiste Vue, abre inspector y repite la comprobación de su contador.
4. Vuelve a Overview, recarga la página y abre otra vez las apps.
5. Revisa que no haya errores de carga JavaScript o respuestas 404 en las herramientas de desarrollo del navegador.

Esto comprueba que el shell encuentra las apps construidas y que sus componentes funcionan. Si desarrollo funcionaba pero aquí una app queda vacía, revisa las rutas de sus assets y su manifiesto; Construcción para producción explica cómo inspeccionar esa salida.

Al terminar, detén el servidor con Ctrl+C.

Publicar y seguir aprendiendo

El contenido reunido de dist/ es el artefacto para publicar en tu hosting. Antes de hacerlo, sigue Servir y desplegar para revisar rutas, estilos y cabeceras del entorno donde se alojará. Haberlo comprobado en el puerto 4100 valida esta salida local; revisa también la URL publicada después del despliegue.

wu doctor aporta diagnóstico adicional. Sus comprobaciones complementan las interacciones que acabas de probar.

Para dar comportamiento compartido a estas mismas apps, continúa con Un contador entre React y Vue. Después puedes añadir Una suma entre aplicaciones, con cliente, proveedor y permisos. Ambas recetas incluyen todos los archivos y sus comprobaciones de desarrollo y producción. Cómo ejecutar los ejemplos reúne también los laboratorios y los ejemplos Node.