J4.x

Setting Up Your Local Environment/de: Difference between revisions

From Joomla! Documentation

FuzzyBot (talk | contribs)
Updating to match new version of source page
FuzzyBot (talk | contribs)
Updating to match new version of source page
Line 11: Line 11:
# PHP - im Wesentlichen dasselbe wie beim Betreiben einer Joomla!-Seite, allerdings brauchst du eine spezielle Version, die PHP CLI (Kommandozeileneingabe) (beachte auch die Seite [[S:MyLanguage/Configuring_a_LAMPP_server_for_PHP_development|Einrichten eines LAMPP-Servers für die PHP-Entwicklung]])
# PHP - im Wesentlichen dasselbe wie beim Betreiben einer Joomla!-Seite, allerdings brauchst du eine spezielle Version, die PHP CLI (Kommandozeileneingabe) (beachte auch die Seite [[S:MyLanguage/Configuring_a_LAMPP_server_for_PHP_development|Einrichten eines LAMPP-Servers für die PHP-Entwicklung]])
# Composer - um die Abhängigkeiten von Joomla!s PHP zu verwalten. Hilfe bei der Installation von Composer bietet die Dokumentation auf https://getcomposer.org/doc/00-intro.md
# Composer - um die Abhängigkeiten von Joomla!s PHP zu verwalten. Hilfe bei der Installation von Composer bietet die Dokumentation auf https://getcomposer.org/doc/00-intro.md
# Node.js - um JavaScript- und SASS-Dateien für Joomla! zu kompilieren - Hilfe bei der Installation von Node.js bieten die Anweisungen, die auf https://nodejs.org/en/ erhältlich sind. Hinweis: Für die Installation von Joomla wird mindestens NodeJS 10 benötigt.
# <span class="mw-translate-fuzzy">Node.js - um JavaScript- und SASS-Dateien für Joomla! zu kompilieren - Hilfe bei der Installation von Node.js bieten die Anweisungen, die auf https://nodejs.org/en/ erhältlich sind. Hinweis: Für die Installation von Joomla wird mindestens NodeJS 10 benötigt.</span>
# Git - für die Versionsverwaltung.
# Git - für die Versionsverwaltung.


===Schritt für Schritt zur Installation der lokalen Entwicklungsumgebung===
===Schritt für Schritt zur Installation der lokalen Entwicklungsumgebung===
# Klone die Paketquelle.
# <span class="mw-translate-fuzzy">Klone die Paketquelle.</span>
# Checkout branch ''4.0-dev''
# Führe <tt>composer install</tt> im Wurzelverzeichnis der git-Paketquelle aus (du kannst --ignore-platform-reqs hinzufügen, falls du PHP-LDAP lokal nicht installiert hast und du es nicht brauchst)
# Führe <tt>composer install</tt> im Wurzelverzeichnis der git-Paketquelle aus (du kannst --ignore-platform-reqs hinzufügen, falls du PHP-LDAP lokal nicht installiert hast und du es nicht brauchst)
# Führe <tt>npm ci</tt> im Wurzelverzeichnis der git-Paketquelle aus. (Dafür wird npm 5.7 oder höher benötigt. <tt>npm install -g npm@lts</tt> zum Aktualisieren der npm-Version auf lts ausführen.)
# <span class="mw-translate-fuzzy">Führe <tt>npm ci</tt> im Wurzelverzeichnis der git-Paketquelle aus. (Dafür wird npm 5.7 oder höher benötigt. <tt>npm install -g npm@lts</tt> zum Aktualisieren der npm-Version auf lts ausführen.)</span>
Linux und OSX Benutzer können den folgenden Bash-Alias nutzen und ihn in der ''~/.bashrc''-Datei setzen:
Linux und OSX Benutzer können den folgenden Bash-Alias nutzen und ihn in der ''~/.bashrc''-Datei setzen:


Line 38: Line 39:
===Node/npm Skripte===
===Node/npm Skripte===


Node.js wird mit einem Paketmanager names NPM (in gewisser Weise das Gleiche wie Composer) ausgeliefert. NPM hat einen <tt>run</tt>-Befehl und wir haben ein paar Skripte vorbereitet, die dir das Leben erleichtern. Man muss die Befehle im Stammverzeichnis der Paketquellen ausführen.
<span class="mw-translate-fuzzy">Node.js wird mit einem Paketmanager names NPM (in gewisser Weise das Gleiche wie Composer) ausgeliefert. NPM hat einen <tt>run</tt>-Befehl und wir haben ein paar Skripte vorbereitet, die dir das Leben erleichtern. Man muss die Befehle im Stammverzeichnis der Paketquellen ausführen.</span>


====npm run build:css====
====npm run build:css====
Line 46: Line 47:
Kompiliert und transkompiliert die JavaScript Dateien in das richtige Format und erzeugt verkleinerte Dateien.
Kompiliert und transkompiliert die JavaScript Dateien in das richtige Format und erzeugt verkleinerte Dateien.


==== npm run watch:css ====
<div class="mw-translate-fuzzy">
Führt auch den Befehl <tt>build:css</tt> aus, bemerkt aber Veränderungen und erstellt automatisch aktualisierte Dateien.
 
====npm run watch:js====
====npm run watch:js====
Dies ist das Gleiche wie der <tt>build:js</tt>-Befehl, sucht aber Veränderungen und erstellt automatisch aktualisierte Dateien.
Dies ist das Gleiche wie der <tt>build:js</tt>-Befehl, sucht aber Veränderungen und erstellt automatisch aktualisierte Dateien.
</div>


==== npm run lint:js ====
==== npm run lint:js ====
Line 57: Line 57:
==== npm run test ====
==== npm run test ====
Dies wird andere JavaScript Testsuiten ausführen.
Dies wird andere JavaScript Testsuiten ausführen.


==Mögliche Probleme==
==Mögliche Probleme==

Revision as of 11:41, 1 April 2021

Tutorial - Wie eine lokale Entwicklungsumgebung für Joomla! 4 eingerichtet wird
Joomla! 
4.x

Mit Joomla! 4 wurde der Entwicklungsprozess verändert. Es ist nicht länger möglich, die Paketquelle zu klonen und damit Joomla! zu installieren. Im Folgenden ist nach aktuellen Erfahrungswerten ein funktionaler Weg zur Installation beschrieben.

Schnellstart-Anweisungen

Abhängig vom Betriebssystem unterscheidet sich die Einrichtung der Entwicklungsumgebung. Es ist leider nicht möglich, den Vorgang für die verschiedenen Betriebssysteme zu dokumentieren. Die bevorzugte Suchmaschine wird hier weiterhelfen.

Benötigte Werkzeuge

  1. PHP - im Wesentlichen dasselbe wie beim Betreiben einer Joomla!-Seite, allerdings brauchst du eine spezielle Version, die PHP CLI (Kommandozeileneingabe) (beachte auch die Seite Einrichten eines LAMPP-Servers für die PHP-Entwicklung)
  2. Composer - um die Abhängigkeiten von Joomla!s PHP zu verwalten. Hilfe bei der Installation von Composer bietet die Dokumentation auf https://getcomposer.org/doc/00-intro.md
  3. Node.js - um JavaScript- und SASS-Dateien für Joomla! zu kompilieren - Hilfe bei der Installation von Node.js bieten die Anweisungen, die auf https://nodejs.org/en/ erhältlich sind. Hinweis: Für die Installation von Joomla wird mindestens NodeJS 10 benötigt.
  4. Git - für die Versionsverwaltung.

Schritt für Schritt zur Installation der lokalen Entwicklungsumgebung

  1. Klone die Paketquelle.
  2. Checkout branch 4.0-dev
  3. Führe composer install im Wurzelverzeichnis der git-Paketquelle aus (du kannst --ignore-platform-reqs hinzufügen, falls du PHP-LDAP lokal nicht installiert hast und du es nicht brauchst)
  4. Führe npm ci im Wurzelverzeichnis der git-Paketquelle aus. (Dafür wird npm 5.7 oder höher benötigt. npm install -g npm@lts zum Aktualisieren der npm-Version auf lts ausführen.)

Linux und OSX Benutzer können den folgenden Bash-Alias nutzen und ihn in der ~/.bashrc-Datei setzen:

alias jclean="rm -rf administrator/templates/atum/css; rm -rf templates/cassiopeia/css; rm -rf administrator/templates/system/css; rm -rf templates/system/css; rm -rf media/; rm -rf node_modules/; rm -rf libraries/vendor/;rm -f administrator/cache/autoload_psr4.php;rm -rf installation/template/css"
alias jinstall="jclean; composer install; npm ci"

Dies wird alle kompilierten Dateien in deinem System löschen und gleichzeitig innerhalb deiner Joomla-Installation eine frische Installation über Kommando jinstall installieren. Du kannst auch den Befehl jclean verwenden, um zurück zu einer Joomla 3.x-Branch zu wechseln.


Die etwas längere Startanleitung

Joomla! unterscheidet sich heutzutage nicht von anderen Internetwerkzeugen. Es weist einen großen PHP-Teil auf und erhält mehr und mehr JavaScript-Code. Während die Programmierung mit PHP nicht sehr viel Vorbereitung benötigt, braucht JavaScript eine umfangreiche Werkzeugumgebung. Der Hauptgrund liegt darin, dass niemand Programmkode auf eine Weise schreibt, die jeder Browser versteht, daher muss der Kode auch von zum Beispiel ES6 in eine kompatible Version von JavaScript transkompiliert werden. Dasselbe gilt für CSS: In Joomla! verwenden wir SASS, dieses wird in natives CSS konvertiert, sodass es jeder Browser verstehen kann. Die Kehrseite bei der Installation einer Entwicklerumgebung ist, dass es ein bisschen komplizierter ist, dafür die Werkzeugausstattung das Programmieren viel bequemer macht. Dank Wächtern und dem automatischen Browserreload werden Änderungen in Echtzeit angezeigt.

PHP

Es sollte reichen, composer install auszuführen. Dies wird die PHP-Abhängigkeiten, die in der Datei composer.lock gespeichert sind, installieren. Man kann dies beliebig oft wiederholen, es werden nur neue Pakete installiert, wenn die composer.lock Datei verändert wird. Bitte composer update nicht ausführen, da dadurch alle Pakete auf neuere Versionen und die composer.lock Datei aktualisiert werden.

Beachte: Eventuell muss composer install mit der Option --ignore-platform-reqs ausgeführt werden um Plattformanforderungen, die in Composer näher spezifiziert sind, zu ignorieren, dass heißt falls du die PHP LDAP Erweiterung nicht installiert hast.

Node/npm Skripte

Node.js wird mit einem Paketmanager names NPM (in gewisser Weise das Gleiche wie Composer) ausgeliefert. NPM hat einen run-Befehl und wir haben ein paar Skripte vorbereitet, die dir das Leben erleichtern. Man muss die Befehle im Stammverzeichnis der Paketquellen ausführen.

npm run build:css

Kompiliert SASS Dateien nach CSS und erzeugt die komprimierten Dateien.

npm run build:js

Kompiliert und transkompiliert die JavaScript Dateien in das richtige Format und erzeugt verkleinerte Dateien.

npm run watch:js

Dies ist das Gleiche wie der build:js-Befehl, sucht aber Veränderungen und erstellt automatisch aktualisierte Dateien.

npm run lint:js

Führt eine Syntaxprüfung in den JavaScript-Dateien aus.

npm run test

Dies wird andere JavaScript Testsuiten ausführen.


Mögliche Probleme

Beim Installieren des Composers kann es zu folgenden Fehlern kommen:

Problem 1
    - Installation request for joomla/ldap 2.0.0-beta -> satisfiable by joomla/ldap[2.0.0-beta].
    - joomla/ldap 2.0.0-beta requires ext-ldap * -> the requested PHP extension ldap is missing from your system.
Problem 2
    - Installation request for symfony/ldap v5.1.5 -> satisfiable by symfony/ldap[v5.1.5].
    - symfony/ldap v5.1.5 requires ext-ldap * -> the requested PHP extension ldap is missing from your system.

Die Lösung ist, die Composer-Installation mit der Option --ignore-platform-reqs auszuführen, um die in Composer angegebenen Plattformanforderungen zu ignorieren. Das heißt, wenn die LDAP-Erweiterung von PHP nicht installiert ist.

composer install --ignore-platform-reqs

Wenn ein Anmeldefehler, wie unten abgebildet, angezeigt wird, sollte die Datei library/autoload_psr4.php, wie im zweiten Bild gezeigt, gelöscht werden. Login After Install Error autoload_psr4.php