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

lokaler Webserver mit PHP- und MySQL-Unterstützung installieren (Empfehlung für Mac OS: Laravel Herd und DBngin oder MAMP
dieses Repo klonen – ggf. geklontes Directory umbenennen, das ist nun der Projekt-Ordner
Projekt-Ordner als vhost mounten (über installierten Webserver)
im Terminal in den Projekt-Ordner wechseln
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_ 😌
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.
der Vite JS Dev-Server sollte nun automatisch gestartet und im Default-Browser das Front- und Backend geöffnet werden
im Backend mit den Zugangsdaten aus setup.cfg anmelden

(Zur Info) es wird ein lokales Git Repository initialisiert. Dies kann nun mit einem Remote Repository verbunden werden. Beispielsweise:

 git push --set-upstream "git@github.com:BENUTZERNAME/REPOSITORY_NAME.git" main
 git remote add origin "https://github.com/BENUTZERNAME/REPOSITORY_NAME.git"

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

die Deployment-Host-Konfiguration in /deploy.php anpassen
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.