# Preparar producción

Construye tu workspace WU, sirve la salida dist y comprueba las microapps antes de publicarlas.

<span class="section-anchor" id="section-1"></span>

## 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](/es/docs/guides/quickstart/). Si completaste [Añadir una segunda app](/es/docs/guides/add-an-app/), también construirás Vue. Los mismos comandos sirven con una o dos apps.

<span class="section-anchor" id="section-2"></span>

## 1. Construir el workspace

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

```sh
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:

```text
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.

<span class="section-anchor" id="section-3"></span>

## 2. Servir la salida construida

Desde la misma raíz, ejecuta:

```sh
wu serve 4100
```

Deja la terminal abierta y visita [http://127.0.0.1:4100](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.**

<span class="section-anchor" id="section-4"></span>

## 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](/es/docs/cli/build/) explica cómo inspeccionar esa salida.

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

<span class="section-anchor" id="section-5"></span>

## Publicar y seguir aprendiendo

El contenido reunido de `dist/` es el artefacto para publicar en tu hosting. Antes de hacerlo, sigue [Servir y desplegar](/es/docs/cli/serve/) 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](/es/docs/guides/shared-counter/). Después puedes añadir [Una suma entre aplicaciones](/es/docs/guides/rpc-between-apps/), con cliente, proveedor y permisos. Ambas recetas incluyen todos los archivos y sus comprobaciones de desarrollo y producción. [Cómo ejecutar los ejemplos](/es/docs/guides/running-examples/) reúne también los laboratorios y los ejemplos Node.