ViteRex 🚀 Supercharged REDAXO Frontend development with Vite JS

• Beschreibung
• Vorraussetzungen
• Features
• Verwendung/Vorgehen für ein neues Projekt
• automatisches Deployment auf einen Webserver
• Tipps

Beschreibung

Super simple Installation einer Redaxo-Instanz, samt Addons und Plugins, sowie einer leistungsstarken lokalen Entwicklungsumgebung mit Tailwind CSS, PostCSS und Autoprefixer und Vite JS als Bundler. Mit Support für Live-Reloading und HMR für Redaxo, PHP, CSS und JS Dateien.

Deployment via ydeploy von yakamara (basierend auf deployer)

Basierend auf yak von Thomas Blum (tbaddade)

Features

• automatische Redaxo Installation per Terminal, inkl. gewünschter Addons und Plugins
• modular – konfigurierbar über eine Konfigurationsdatei unter /setup/setup.cfg
• lokale Entwicklungsumgebung mit Node und Vite JS
• native JS module imports (und CSS imports per JS, oder Assets imports wie CSS, SVG, Bilder, JSON, etc., inklusive Transformationen und so)
• alles was NPM bzw. Yarn zu bieten haben
• Tailwind CSS
• Vite JS bzw. rollup.js als Bundler/Minifier (inkl. PostCSS mit CSS Nesting und Autoprefixer)
• Live-Reload bzw. HMR für Templates, Struktur, URL (beliebig erweiterbar)
  • /src/templates/*/.
  • /src/modules/*/.
  • /var/cache/addons/(structure|url)*/.
  • /assets/*/.
  • einfach erweiterbar, zum Beispiel für Fragmente
• Deployment via ydeploy bzw. deployment via deployer, Konfiguration unter setup/deploy.php

Vorraussetzungen

• grundlegendes Terminal-Know-how von Vorteil!
• eine bash wird vorrausgesetzt
• yarn muss installiert sein
• composer muss für deployer bzw. deployment via ydeploy installiert sein
• eine lokale PHP-Entwicklungsumgebung für Redaxo, wie Laravel Herd; oder MAMP
• ein lokaler Datenbank-Server für Redaxo, wie DBngin; oder MAMP
• optional: Phpmyadmin o.Ä. für DBngin

Verwendung/Vorgehen für ein neues Projekt

1. lokaler Webserver mit PHP- und MySQL-Unterstützung installieren (Empfehlung für Mac OS: Laravel Herd und DBngin oder MAMP
2. dieses Repo klonen – ggf. geklontes Directory umbenennen, das ist nun der Projekt-Ordner
3. Projekt-Ordner als vhost mounten (über installierten Webserver)
4. im Terminal in den Projekt-Ordner wechseln
5. setup/setup.cfg in einem Editor anpassen. Wichtig: unbedingt REDAXO_ERROR_EMAIL ausfüllen! _die Einträge beginnend mit VITE_ am besten unverändert lassen, ausser man weiss, was man tut_ 😌
6. Skript setup/setup im Projekt-Verzeichnis im Terminal ausführen. Achtung: falls eine DB mit dem angegebenen Namen bereits besteht, wird im setup Ordner ein Backup angelegt und die bestehende DB neu angelegt! nun wird Redaxo heruntergeladen und installiert. Danach folgen die gewählten Addons und Plugins. Am Ende werden die PHP-Dependencies per Composer und per Yarn die Node-Dependencies installiert.
7. der Vite JS Dev-Server sollte nun automatisch gestartet und im Default-Browser das Front- und Backend geöffnet werden
8. im Backend mit den Zugangsdaten aus setup.cfg anmelden
9. (Zur Info) es wird ein lokales Git Repository initialisiert. Dies kann nun mit einem Remote Repository verbunden werden. Beispielsweise:

    git push --set-upstream "[email protected]:BENUTZERNAME/REPOSITORY_NAME.git" main
    git remote add origin "https://github.com/BENUTZERNAME/REPOSITORY_NAME.git"
   

10. Frontend einaml mit F5 reloaden und los gehts! Happy coding! 🙌🏼

Ab sofort sollten jegliche Änderungen an Dateien (Templates, Module und Fragmente unter /src/ und CSS, JS Dateien unter /assets/) und sogar Anpassungen im Redaxo Backend sofort im Frontend automatisch gespiegelt werden (dank Live-Reload und HMR) – ohne nerviges, manuelles refreshen mit F5 🍔

• mit CTRL + C kann der Vite JS Dev-Server im Terminal gestoppt werden
• mit yarn dev Vite JS Dev-Server starten

automatisches Deployment auf einen Webserver

1. die Deployment-Host-Konfiguration in /deploy.php anpassen
2. im Terminal im Projekt-Ordner vendor/bin/dep deploy ausführen um das Deployment zu starten fingers crossed

• wer sich mit deployer auskennt, kann die Deployer-Konfig in /deploy.php beliebig erweitern

... wer deployer nicht nutzen möchte: einfach im Projekt-Ordner yarn build ausführen und folgende Dateien und Ordner auf einem Webserver bereitstellen:

• bin
• public
• src
• var
• .env.local
• inc.vite.php
• LICENSE.md

Wichtig für Deployment ohne Deployer: Webhosting so konfigurieren, dass der Dokumentstamm (bzw. www-Root) auf den Ordner /public zeigt

Tipps

• bei Verwendung unter Laravel Herd (bzw. mit Nginx) müssen folgende Regeln in die herd.conf bei Laravel Herd oder in die nginx.conf, für Nginx:

    # YREWRITE START
    rewrite ^/sitemap\.xml$                           /index.php?rex_yrewrite_func=sitemap last;
    rewrite ^/robots\.txt$                            /index.php?rex_yrewrite_func=robots last;
    rewrite ^/media[0-9]*/imagetypes/([^/]*)/([^/]*)  /index.php?rex_media_type=$1&rex_media_file=$2&$args;
    rewrite ^/media/([^/]*)/([^/]*)                   /index.php?rex_media_type=$1&rex_media_file=$2&$args;
    rewrite ^/media/(.*)                              /index.php?rex_media_type=yrewrite_default&rex_media_file=$1&$query_string;
    rewrite ^/images/([^/]*)/([^/]*)                  /index.php?rex_media_type=$1&rex_media_file=$2&$args;
    rewrite ^/imagetypes/([^/]*)/([^/]*)              /index.php?rex_media_type=$1&rex_media_file=$2;
    rewrite ^/image/([^/]*)/([^/]*)/([^/]*)           /index.php?rex_media_type=$1&rex_media_file=$3__w$2;
  
    # !!! WICHTIG !!! Falls Let's Encrypt fehlschlägt, diese Zeile auskommentieren (sollte jedoch funktionieren)
    location ~ /\. { deny  all; }
  
    # Zugriff auf diese Verzeichnisse verbieten
    location ^~ /src { deny  all; }
    location ^~ /var { deny  all; }
    location ^~ /bin { deny  all; }
    # YREWRITE END
  

  Pfad zur herd.conf für Laravel Herd: ~/Library/Application Support/Herd/config/nginx
• falls eine andere Redaxo Version installiert werden soll, einfach Eintrag anpassen und SHA-Vergleichssumme im Terminal anzeigen lassen, in setup/setup.cfg eintragen und setup/setup starten:
  $ curl -Ls https://github.com/redaxo/redaxo/releases/download/5.15.1/redaxo_5.15.1.zip | shasum
• Eine Variante, um die "Ordner ist unsicher"-Fehlermeldungen in Redaxo loszuwerden, ist in /public/assets/core/standard.js bei “redaxo-security-self-test” die Zeile wie folgt anpassen:
  if (i % 2 == 0 && data != '' && data.substring(0, 6) != '<br />') {
• falls auf eurem System mysql im Shell nicht verfügbar sein sollte (wie mit Laravel Herd und DBngin der Fall), dann wie folgt vorgehen:
  • Für Mac OS und MySQL 8.0.33: ins Terminal gehen und folgendes eingeben und mit Enter bestätigen
    sudo nano /etc/zshrc System-Passwort eingeben und dann folgende Zeile ganz am Ende auf einer neuen Zeile eintragen
    export PATH=/Users/Shared/DBngin/mysql/8.0.33/bin:$PATH nun mit CTRL + O die Datei speichern und mit CTRL + X den Nano Editor verlassen
• bei deployment via ydeploy, sollte folgendes sichergestellt werden:
  • es sollte ein Unterverzeichnis als deploymentPath angegeben; direkt ins Webserver root zu deployen kann gefährlich sein, da ev. wichtige Dateien überschrieben werden
  • falls auf dem Webserver in der secure shell (SSH) PHP in einer älteren Version als 8.1 ausgeführt wird, funktioniert ydeploy nicht. Vor deployment sicherstellen, dass PHP >=8.1 in der Shell läuft.