Saltar a contenido

Vista previa apuntando al storefront

Parte CMS de la vista previa de borradores: el panel y el ojo del admin abren el storefront real renderizando el borrador, en lugar del frontend embebido en este template.

La guía completa —flujo, piezas del storefront, diagnóstico— vive en el repositorio del storefront: storefront/docs/integraciones/payload-live-preview.md. La decisión de arquitectura está en su ADR-0008. Este documento cubre solo lo que pasa de este lado.

Qué hace este proyecto

Tres cosas, y ninguna es renderizar:

  1. Decidir la URL. admin.livePreview.url en Pages está configurado como una función, así que Payload la llama con el documento que se está editando y obtiene una URL distinta por página.
  2. Mostrar el marco. Payload pone esa URL en un iframe (el panel) o la abre en una pestaña (el ojo), con los tres tamaños de pantalla definidos en livePreview.breakpoints de payload.config.ts.
  3. Avisar que guardó. Cuando el autoguardado termina, el admin manda al marco un mensaje sin contenido: solo un aviso. El storefront reacciona volviendo a pedir la página.

generatePreviewPath

src/utilities/generatePreviewPath.ts arma la URL absoluta:

${STOREFRONT_PREVIEW_URL}/api/draft?secret=<compartido>&path=/mi-pagina

Decisiones tomadas ahí, que conviene no deshacer sin motivo:

  • posts no está en el mapa de prefijos. El storefront todavía no tiene esa ruta, así que la función devuelve null y Payload no muestra el botón, en lugar de ofrecer una vista previa que daría 404. El tipo del parámetro es CollectionSlug y no las claves del mapa, para que Posts/index.ts siga compilando: el build de este proyecto sí valida TypeScript.
  • homepage mapea a /. El storefront no tiene una ruta /homepage: esa página es su raíz.
  • El slug no se codifica a mano. URLSearchParams lo codifica al serializar; hacerlo antes dejaba doble escape (%25C3%25B3 en vez de %C3%B3) y un slug con acentos abría una página inexistente. Era un error que venía del template original.
  • El código de país no se incluye. Se lo antepone el propio proxy del storefront.
  • Devuelve null si falta STOREFRONT_PREVIEW_URL, para no romper el admin en un entorno que no tenga vista previa configurada.

Variables de entorno

Variable Cuándo se lee Para qué
STOREFRONT_PREVIEW_URL ejecución URL del storefront a la que apunta el botón
PREVIEW_SECRET ejecución Debe ser idéntica a la del storefront

Ninguna de las dos necesita pasarse como build arg, a diferencia de DATABASE_URI, PAYLOAD_SECRET y NEXT_PUBLIC_SERVER_URL.

STOREFRONT_PREVIEW_URL tiene que ser una URL que el navegador del editor pueda abrir: el marco carga en su navegador, no en el contenedor, así que nunca el nombre interno de Docker.

Autoguardado

Pages y Posts guardan 800 ms después de que el editor deja de escribir. El template traía 100 ms, pensado para la variante de vista previa del lado del cliente, que refresca en el navegador sin consultar al servidor. La que usamos es del lado del servidor: cada guardado dispara un renderizado completo de alrededor de un segundo, y a 100 ms los refrescos se encimaban y el panel parecía no actualizarse.

Qué no cambió

  • La configuración livePreview y preview de las colecciones: ya llamaban a generatePreviewPath.
  • El flujo de publicación y el control de acceso authenticatedOrPublished.
  • No se agregaron dependencias: @payloadcms/live-preview-react ya era dependencia de este proyecto, y el storefront instaló la misma versión, 3.88.0, para que ambos lados hablen el mismo protocolo.
  • Las rutas (frontend) del template siguen existiendo; simplemente dejaron de ser el destino de la vista previa de pages.