danspringer / theme_gh_synchronizer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Theme-GitHub-Synchronizer für REDAXO

Dieses AddOn ermöglicht es, REDAXO mit einem GitHub-Repository zu verbinden, um dann automatisch via GitHub-Webhook den theme-Ordner im Root zu aktualisieren. Somit aktualisiert sich REDAXO bzw. das Theme-Addon bei Commits oder gemergten Pull-Requests in das definierte Respository von GitHub automatisch.

Theme-GitHub-Synchronizer

REDAXO läuft dann quasi für die Frontend-Entwicklung (Templates, Module, Actions, etc., sowie ggf. Assets wie CSS, JS-Files) auf Basis des GitHub-Repository.

Die Systematik ist inspiriert von Shopify-Themes - hier kann man das Theme für den Shopify-Shop als GitHub-Repository hinterlegen und das Theme wird quasi von "extern" aus GitHub geladen.

How-To

Bevor man starten kann, muss man einige Vorbereitungen treffen:

  1. Developer-AddOn muss installiert sein
  2. Theme-AddOn muss installiert sein
  3. Repository bei GitHub anlegen (empfohlen wird ein privates Repository) - hier bitte die empfohlene .gitignore-Datei von REDAXO beachten, damit keine sensiblen Daten im GitHub-Repo landen.
  4. Webhook bei GitHub anlegen
  5. GitHub-Access-Token anlegen
  6. AddOn konfigurieren
  7. Funktionalität testen

Repository bei GitHub anlegen

Je nachdem, wie das Projekt-Setup aussieht und welche Dateien und Ordner in GitHub verwaltet werden, kann es hier individuelle Abweichungen geben. Diese Anleitung geht von folgender Ordnerstruktur für das Repository aus:

.
└── Root/
    ├── assets
    ├── redaxo
    └── theme

Bildschirmfoto 2023-02-17 um 19 18 17

Repository auf private stellen und .gitignore beachten, damit keine sensiblen Daten wie z.B. Zugangsdaten zur Datenbank im Repo landen oder die eigene REDAXO-Logik oder die des Kunden öffentlich auf GitHub landet.

Webhook bei GitHub anlegen

Innerhalb des Repository muss ein Webhook angelegt werden. Dies kann man hier tun: https://github.com/{DEIN_USERNAME}/{REPO_NAME}/settings/hooks/

Der Webhook soll wie folgt konfiguriert sein:

Payload-URL: https://{DEINEDOMAIN.de}/?rex-api-call=github_webhook

Content type application/json

Secret eigenes Secret anlegen (Github-Hinweise beachten)

SSL verfication enabled

Which events would you like to trigger this webhook? Let me select individual events.

  • Pull requests

  • Pushes

    Bildschirmfoto 2023-02-17 um 19 30 27

GitHub-Access-Token anlegen

Damit wir auf das private Repository zugreifen können und auch unser API-Anfragen-Limit erhöht ist, benötigen wir einen Access-Token für unseren Account bei GitHub.

Hierzu rufen wir mit unserem eingeloggten GitHub-Account die Developer-Settings auf uns legen einen Personal access token (classic) an.

Diesem Token geben wir in Note eine bezeichnende Beschreibung, damit wir wissen, um was es sich handelt.

Die Expiration stellen wir auf no expiration und bei scope wählen wir alles unter repo aus. Bildschirmfoto 2023-02-17 um 19 36 48

Nachdem wir den Token generiert haben, holen wir ihn uns in die Zwischenablage und speichern ihn direkt in den Einstellungen des AddOns unter Access token.

AddOn konfigurieren

Nachdem wir im Schritt zuvor bereits den Access token im AddOn hinterlegt haben, tragen wir in den AddOn-Einstellungen nun noch die URL des Repositorys ein, sowie das Webhook Secret und die Webhook ID.

Das Secret ist das selbst angelegte Secret des Webhooks. Die ID des Webhooks kann man sich von GitHub anzeigen lassen, indem man unter https://github.com/{DEIN_USERNAME}/{REPO_NAME}/settings/hooks den Webhook anklickt und die ID oben aus der URL holt oder dort unter Recent Deliveries eine Test-Webhook auslöst und im Header von GitHub unter X-GitHub-Hook-ID nachsieht.

Funktionalität testen

Wenn man alles konfiguriert hat, sollte man entweder

  • Einen Test-Webhook auslösen
  • Etwas in das Repository pushen oder einen PR mergen damit im Log des Addons dann ein Eintrag zu finden ist.

Credits

Daniel Springer, Medienfeuer

Support

https://github.com/danspringer/theme_gh_synchronizer

About

License:MIT License


Languages

Language:PHP 100.0%