Autor: Karl Sander

Moderne statische Webseiten, auch JAMStack Webseiten genannt, bieten eine Reihe von Vorteilen in den Bereichen Sicherheit, Geschwindigkeit und Zuverlässigkeit. Wo sie aber einem voll integriertem CMS wie WordPress noch nachstehen, ist die Möglichkeit für Autoren, eine Vorschau von Inhalten zu sehen bevor sie diese veröffentlichen. Da die Webseite nach jeder Änderung neu gebaut werden muss, wird der wertvolle schnelle Feedback Zyklus gebrochen.

Wir haben in verschieden Projekten gute Erfahrungen mit Gatsby als Framework für statische Webseiten gemacht. Bei der Arbeit mit Gatsby ist es für Entwickler möglich, mit schnellen Feedback Zyklen zu arbeiten, da Gatsby einen Development Server bereitstellt, der Hot Module Reloading (-> laufender Code wird aktualisiert ohne das die Seite neu geladen wird) unterstützt. In einem aktuellen Projekt haben wir es geschafft, den gleichen Workflow auch für Autoren zu ermöglichen.

Basis dafür ist das Headless CMS sanity.io, dass Contentupdates in Echtzeit über Websockets zur Verfügung stellt. Das Team von sanity.io hat ein Gatsby Source Plugin entwickelt, das den Gatsby Development Server um einen Listener erweitert der auf neue Contentupdates lauscht und diese ohne neu zu laden direkt in die Seite integriert. Damit Autoren keinen lokalen Development Server auszuführen müssen, kann dieser in der Cloud laufen. Dadurch wird nur ein Browser benötigt, um CMS und Preview zu nutzen.

Diese Preview geht durchaus weiter als es z.B. mit WordPress möglich ist:

• Alle Eingaben im Sanity Studio werden in Echtzeit angezeigt, ohne das ein Speichern nötig ist. Das gilt auch für andere Datentypen, wie z.B. die Auswahl von Farben mit einem Color Picker.
• Die Vorschau ist für die gesamte Webseite. So können nicht nur einzelne Draft Posts angezeigt werden, sondern auch Menüs oder Übersichtsseiten, die die bearbeiteten Inhalte enthalten. Außerdem können globale Änderungen wie z.B. Akzentfarben ausprobiert werden

Und so gehts:

Du brauchst:

• eine Gatsby Seite (-> Quick Start)
• ein Sanity Projekt (-> Quick Start)

1. Gatsby + Sanity

Damit Gatsby auf Content in deinem Sanity Projekt zugreifen kann, musst du das gatsby-source-sanity Paket in deinem Projekt installieren und einrichten. Füge dafür folgende Sektion in das Plugin Array in deiner gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
          // zu finden auf manage.sanity.io/projects
        projectId: sanityProjectID,
        // wahrscheinlich 'production' oder 'development'
        dataset: datasetID,
        // zu finden auf der Projektseite auf manage.sanity.io unter Settings > API
        token: YOUR_SANITY_TOKEN,
        watchMode: true,
        overlayDrafts: true,
      },
    },
  ],
}

Die interessanten Optionen sind hier watchMode, welche den Listener im Development Server aktiviert, und overlayDrafts, welche Content der noch nicht veröffentlicht ist anzeigt.

2. gatsby develop in der Cloud

Damit auch Nutzer ohne Programmiererfahrung die Preview nutzen können, wollen wir den gatsby develop Prozess, der üblicherweise lokal ausgeführt wird, auf einen Webserver laufen lassen. Dafür muss er mit speziellen Optionen gestartet werden, die den Zugriff von außen ermöglichen. Füge dafür folgendes Script zu deiner package.json hinzu:

"serve-preview": "NODE_ENV=development gatsby develop --host 0.0.0.0 --p $PORT"

Ersetze dabei $PORT mit einem Port deiner Wahl, z.B. 80, wenn du nicht eine Plattform wie Heroku oder Render benutzen willst, die den Port als Variable zur Verfügung stellt.

Um die Preview auszuführen, kannst du einen beliebigen Server mit Node.js benutzen. Kopiere dafür dein Projekt auf den Server, installiere es mit yarn und starte es mit yarn serve-preview.

Eine einfache Alternative ohne Server Setup ist eine PaaS Plattform wie Heroku oder Render. Dafür musst du nur ein Projekt mit deinem Git Repo anlegen und über die UI “Build” (yarn) und “Start” (yarn serve-preview) Kommandos angeben.

3. Preview Links in Sanity

Damit Autoren schnell die Preview für eine bestimmte Seite öffnen können, bietet Sanity die Möglichkeit eine Funktion bereitzustellen die eine Preview URL zu einem Dokument zuordnet. Das kann zum Beispiel so aussehen:

// resolvePreviewURLs.js
const baseURL = 'https://your-preview.herokuapp.com'

export default function resolvePreviewURLs(document) {
  switch (document._type) {
    case 'page': return `${baseURL}/${document.slug.current}`;
    case 'post': return `${baseURL}/post/${document.id}`;
    case 'author': return `${baseURL}/info/people/${document.slug.current}`;
    default: return baseURL;
  }
}

Diese Funktion muss dann mit dem Parts System in sanity.json integriert werden:

{
  "parts": [
    {
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./resolvePreviewURLs.js"
    }
  ]
}

Außerdem musst du noch das @sanity/production-preview Plugin mit folgendem Kommando installieren:

sanity install @sanity/production-preview

Danach steht im Sanity Studio das Kommando Open Preview (Ctrl + Alt + O) zur Verfügung.