Wagtail Headless Preview

Como usuarios de un CMS, al realizar cambios queremos visualizarlos antes de que sean publicados. Wagtail ya ofrece esta funcionalidad de forma nativa, aunque por defecto no funciona en el caso de tener una arquitectura API + SPA. En este caso se tendrá que usar la librería (wagtail-headless-preview ). En este artículo veremos cómo configurar Wagtail para su utilización.

Configuración de la librería

Después de configurar la librería como cualquier otra en un proyecto Django (installed apps, urls, etc) se tendrá que configurar los siguientes parámetros en el archivo settings.py. Se puede configurar para uno o varios clientes, en nuestro caso hemos puesto la configuración para desarrollo.

WAGTAIL_HEADLESS_PREVIEW = {
  "CLIENT_URLS": {
    "default": "http://localhost:8000",
    "cms.sample": "http://localhost:8000",
  },
  "SERVE_BASE_URL": "none",
  "REDIRECT_ON_PREVIEW": False,
  "ENFORCE_TRAILING_SLASH": True,
}

Uso de la librería

Para tener disponible la funcionalidad de headless preview, añadiremos a nuestra página, que hereda de Page (modelo de Wagtail) una de las siguientes clases, HeadlessMixin o HeadlessPreviewMixin.

from wagtail_headless_preview.models import HeadlessMixin


class MyWonderfulPage(HeadlessMixin, Page):
  pass

Deberemos crear un endpoint para que el front pueda obtener el objeto de la preview y pueda pintarlo en el CMS. Como se explica en el Readme, se requiere de la creación de un viewset y su disposición a través de la API mediante un router Django.

En la SPA se preparará la página que se nutrirá de este endpoint. Un ejemplo de esta página se puede ver en el Readme.

Finalmente, como usuario, al darle al botón de preview se abrirá otra pestaña donde podremos ver la previsualización de la página del CMS. Esta previsualización principalmente es un iframe con la página de la SPA que preparamos anteriormente, el cual mediante un token se obtiene el contenido a visualizar.

Puntos a tener en cuenta

• En la página de preview de la SPA es recomendable poner un recordatorio de que no se está en una página ya publicada sino en una preview. Como ejemplo, en lo alto de la página ajustar un div con un fondo de color y con un texto que diga "Usted está en una previsualización de la página que está editado".

• En el caso de que la url de la preview no esté en un primer nivel sino dentro de un namespace, se debe crear un custom router, de lo contrario la url no podrá resolverse. Por ejemplo, en el caso de habilitar la url dentro del namespace api/v1/, se ha de crear este nuevo router.

• Hay que tener en cuenta las políticas de seguridad acordadas con el equipo a la hora de desplegar el proyecto en un entorno. Por ejemplo, en el caso de desplegar en el entorno de producción y de requerir el protocolo https, se ha añadir en la url del iframe y establecer las Content-Security-Policy necesarias (Mozilla Developer).