J4.x

Setting Up Your Local Environment/nl: Difference between revisions

From Joomla! Documentation

Created page with "J4.x:Je lokale omgeving opzetten"
 
No edit summary
 
(62 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<noinclude><languages /></noinclude>
<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|icon=magic|icon-color=#5091cd|size=3x|text-color=#333|title=Tutorial<br />
{{Top portal heading|color=white-bkgd|icon=magic|icon-color=#5091cd|size=3x|text-color=#333|title=Handleiding<br />
How to Setup a Local Environment for Joomla 4}}
Hoe zet je een lokale omgeving voor Joomla 4 op}}
<noinclude>{{Joomla version|version=4.x}}</noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
{{-}}
With Joomla 4 we have changed the development process. It is no longer possible to clone the repository and have a usable Joomla installation. We follow best practices and implement a build process for the CMS.
Met de komst van Joomla! 4 hebben we het ontwikkelproces gewijzigd. Het is niet meer mogelijk om de repository te klonen om een bruikbare Joomla installatie te verkijgen. We volgen beproefde werkwijzen en voeren een bouwproces uit voor het CMS.


== Quick Start Guide ==
== Snelle starthandleiding ==
The steps to setup your development environment depend on your operating system. We can not write documentation for any OS so you should use your favorite search engine to find a HowTo.  
De stappen om je ontwikkelomgeving op te zetten zijn afhankelijk van je besturingssysteem.  
We kunnen geen documentatie schrijven voor ieder OS, gebruik alstublieft je zoekmachine om een "Hoe te" te vinden.


=== Tools You Need ===
=== Wat je nodig hebt ===
# PHP - basically the same as you need for running a Joomla site, but you need the PHP CLI (command line interface) version. (See the [[S:MyLanguage/Configuring_a_LAMPP_server_for_PHP_development|Configuring a LAMPP server for PHP development]] page.)
# PHP - vrijwel hetzelfde als je nodig hebt om een Joomla site te laten draaien, maar je hebt de PHP CLI (command line interface) versie nodig. (Lees ook deze pagina [[S:MyLanguage/Configuring_a_LAMPP_server_for_PHP_development|Configuring a LAMPP server for PHP development]].)
# Composer - for managing Joomla's PHP dependencies. For help installing Composer, read the documentation at https://getcomposer.org/doc/00-intro.md.
# Composer - voor het beheren van de PHP-afhankelijkheden van Joomla. Lees voor hulp bij het installeren van Composer de documentatie: https://getcomposer.org/doc/00-intro.md.
# Node.js - for compiling Joomla's JavaScript and SASS files. For help installing Node.js, please follow the instructions available on https://nodejs.org/en/.
# Node.js - voor het compileren van Joomla's JavaScript- en SASS-bestanden. Raadpleeg voor hulp bij het installeren van Node.js de instructies op https://nodejs.org/en/. Let op: je hebt NodeJS 12 of hoger nodig om Joomla te installeren.
# Git - for version management.
# Git - voor versiebeheer.


=== Steps to Setup the Local Environment ===
=== Stappen voor het opzetten van de lokale omgeving ===
# Clone the repository.
# Kloon de repository
# Run <tt>composer install</tt> from the root of the git repo. (You can add ''--ignore-platform-reqs'' if you don't have the PHP-LDAP locally installed and you don't need it.)
# <span class="mw-translate-fuzzy">Checkout branch ''4.0-dev''</span>
# Run <tt>npm ci</tt> from the root of the git repo. (Note you need npm 5.7 or higher for this. Run <tt>npm install -g npm@lts</tt> to upgrade your version of npm to the lts version.)
# Voer <tt>composer install</tt> uit vanaf de root van de git repo. (Je kunt ''--ignore-platform-reqs'' toevoegen als PHP-LDAP niet lokaal geïnstalleerd is en je het niet nodig hebt.)
Linux and OSX users can set up the following bash alias by placing the following inside the ''~/.bashrc file'':
# <span class="mw-translate-fuzzy">Voer <tt>npm ci</tt> uit vanaf de root van de git repo. (Je hebt hiervoor npm 6.13.4 of hoger nodig. Voer <tt>npm install -g npm@lts</tt> uit om je npm-versie bij te werken naar de LTS-versie.)</span>
Linux- en OSX- gebruikers kunnen de volgende bash-alias opzetten door het volgende te plaatsen in het ''~/.bashrc bestand'':


<code>alias jinstall="rm -rf administrator/templates/atum/css; rm -rf templates/cassiopeia/css; rm -rf media/; rm -rf node_modules/; rm -rf libraries/vendor/; composer install; npm ci; git checkout -- libraries/vendor/.htaccess"</code>
<syntaxhighlight lang="bash">
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"
</syntaxhighlight>


This will delete all the compiled files in your system and run a fresh install as one command by calling <tt>jinstall</tt> inside your Joomla install.
Dit zal alle gecompileerde bestanden van je systeem verwijderen en een nieuwe installatie uitvoeren als één commando door het aanroepen <tt>jinstall</tt> van in je Joomla installatie. Je kunt ook het <tt>jclean</tt> commando gebruiken om naar een Joomla 3.x branch terug te gaan.


== A Bit Longer Start Guide ==
 
Joomla is similar to many other web tools these days. It has a large PHP part and it has more and more JavaScript code. While PHP coding doesn't need so much preparation, JavaScript needs a lot tooling around. The main reason is that nobody writes code in a way that every browser understands, so the code needs transpiling from e.g. ES6 to a compatible version of JavaScript. The same is true for CSS. For Joomla we are using SASS and this will be converted to native CSS so that any browser understands it. On the downside, setting up a development environment is a bit more complicated but the tooling makes coding more convenient. Thanks to watchers and browser auto reload, you can see your changes in real time.  
== Een iets langere start handleiding ==
<span class="mw-translate-fuzzy">Joomla is vergelijkbaar met een groot aantal andere web tools. Het heeft een groot PHP-gedeelte en steeds meer JavaScript code. Voor PHP-codering is niet zo veel voorbereiding nodig, maar JavaScript vraagt om veel sleutelwerk. De voornaamste reden is dat niemand code schrijft die elke browser begrijpt, dus de code moet worden omgezet van bijvoorbeeld ES6 naar een compatible versie van JavaScript. Hetzelfde geldt voor CSS. Voor Joomla gebruiken we SASS, dat wordt geconverteerd naar native CSS, zodat elke browser het begrijpt. Een ontwikkelomgeving opzetten is iets gecompliceerder, maar het sleutelen maakt het coderen gemakkelijker. Dankzij watchers en het automatisch opnieuw laten van je browser kun je je wijzigingen in real time zien.</span>


=== PHP ===
=== PHP ===
It should be enough to run <tt>composer install</tt> as this will install PHP dependencies saved in the ''composer.lock'' file. You can do this as many times as you like. It will only install new packages when the ''composer.lock'' file is changed. Don't run <tt>composer update</tt> as this will update all packages to newer versions and update the ''composer.lock'' file.
Het zou voldoende moeten zijn om <tt>composer install</tt> uit te voeren, aangezien dit de PHP-afhankelijkheden zal installeren die zijn opgeslagen in het ''composer.lock'' bestand. Je kunt dit zo vaak doen als je wilt. Het installeert alleen nieuwe pakketten als het ''composer.lock'' bestand is gewijzigd. Voer <tt>composer update</tt> niet uit, want dit zal al je pakketten bijwerken naar nieuwere versies en het ''composer.lock'' bestand updaten.


Note: You may need to run <tt>composer install</tt> with the <tt>--ignore-platform-reqs</tt> option to ignore platform requirements specified in Composer. That is, if you do not have PHP's LDAP extension installed.
'''Let op''' het kan nodig zijn om de <tt>composer install</tt> uit te voeren met de <tt>--ignore-platform-reqs</tt> optie om de platform vereisten te negeren die zijn gespecificeerd in Composer. Dit is van toepassing als je geen PHP's LDAP extensie hebt geïnstalleerd.


=== Node/npm Scripts ===
=== Node/npm scripts ===


Node.js comes with a package manager called NPM (in some ways the same as Composer). NPM has a <tt>run</tt> command and we have prepared some scripts to make your life easier. You have to run the commands for the root of the repository
<span class="mw-translate-fuzzy">Node.js heeft een pakketmanager, NPM (in sommige opzichten hetzelfde als Composer). NPM heeft een <tt>run</tt> commando en we hebben een aantal scripts voorbereid om het gemakkelijker te maken. Je voert de commando's uit vanaf de root van de repository als je JS of SASS bestanden hebt aangepast. Voorafgaand moet je eenmaal <tt>npm ci</tt> draaien, om afhankelijkheden te installeren.</span>


==== npm run build:css ====
==== npm run build:css ====
It will compile SASS files to CSS and also create the minified files.
Dit compileert SASS-bestanden naar CSS en maakt ook de minified bestanden aan.


==== npm run build:js ====
==== npm run build:js ====
It will compile and transpile the JavaScript files to the correct format and create minified files.
Dit compileert de JavaScript-bestanden en zet ze om naar het juiste bestandsformaat, en het maakt de minified bestanden aan.
 
==== npm run watch:css ====
This is the same as the <tt>build:css</tt> command but will watch for changes and automatically build updated files.


==== npm run watch:js ====
==== npm run watch ====
This is the same as the <tt>build:js</tt> command but will watch for changes and automatically build updated files.
Dit is hetzelfde als het <tt>build:js</tt> commando maar het kijkt naar wijzigingen en creëert automatisch bijgewerkte bestanden in de media map. SASS bestanden worden nog niet opgenomen.


<div class="mw-translate-fuzzy">
==== npm run lint:js ====
==== npm run lint:js ====
This will perform a syntax check on JavaScript files.
Dit voert een syntax controle uit op alle ES6 JavaScript bestanden ten opzichte van de javascript code standaard (lees, voor meer informatie over de Joomla 4 codestijl standaard alstublieft de coding standaard handleiding op [https://developer.joomla.org/coding-standards/introduction.html|, het coding standards manual].
</div>


==== npm run test ====
==== npm run test ====
This will run a JavaScript testing suite.
Dit voert een serie JavaScript tests uit.
 
==Mogelijke problemen==
Bij het installeren van composer kun je tegen deze fouten oplopen
 
<syntaxhighlight lang="bash">
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.
</syntaxhighlight>
 
De oplossing kan zijn om de <tt>composer install</tt> uit te voeren met de <tt>--ignore-platform-reqs</tt> optie om de platform requirements te negeren die zijn gespecificeerd in Composer. Dit is van toepassing als je geen PHP's LDAP extensie hebt geïnstalleerd.
 
<syntaxhighlight lang="bash">composer install --ignore-platform-reqs</syntaxhighlight>
 
<span class="mw-translate-fuzzy">Als u een login error krijgt als hieronder getoond, verwijder dan het <tt>library/autoload_psr4.php</tt> bestand, zoals in de tweede afbeelding getoond..</span>


==Possible Issues==
[[File:Install-error.png|border|center|400px|Login After Install Error]]
If you receive a login error such as shown below, delete the <tt>\library\autoload_psr4.php</tt> file as shown in the second image.
[[File:Install-error.png|400px|Login After Install Error]]
[[File:Psr4.png|400px|autoload_psr4.php]]


<noinclude>
<noinclude>

Latest revision as of 10:42, 26 August 2023

Handleiding
Hoe zet je een lokale omgeving voor Joomla 4 op
Joomla! 
4.x

Met de komst van Joomla! 4 hebben we het ontwikkelproces gewijzigd. Het is niet meer mogelijk om de repository te klonen om een bruikbare Joomla installatie te verkijgen. We volgen beproefde werkwijzen en voeren een bouwproces uit voor het CMS.

Snelle starthandleiding

De stappen om je ontwikkelomgeving op te zetten zijn afhankelijk van je besturingssysteem. We kunnen geen documentatie schrijven voor ieder OS, gebruik alstublieft je zoekmachine om een "Hoe te" te vinden.

Wat je nodig hebt

  1. PHP - vrijwel hetzelfde als je nodig hebt om een Joomla site te laten draaien, maar je hebt de PHP CLI (command line interface) versie nodig. (Lees ook deze pagina Configuring a LAMPP server for PHP development.)
  2. Composer - voor het beheren van de PHP-afhankelijkheden van Joomla. Lees voor hulp bij het installeren van Composer de documentatie: https://getcomposer.org/doc/00-intro.md.
  3. Node.js - voor het compileren van Joomla's JavaScript- en SASS-bestanden. Raadpleeg voor hulp bij het installeren van Node.js de instructies op https://nodejs.org/en/. Let op: je hebt NodeJS 12 of hoger nodig om Joomla te installeren.
  4. Git - voor versiebeheer.

Stappen voor het opzetten van de lokale omgeving

  1. Kloon de repository
  2. Checkout branch 4.0-dev
  3. Voer composer install uit vanaf de root van de git repo. (Je kunt --ignore-platform-reqs toevoegen als PHP-LDAP niet lokaal geïnstalleerd is en je het niet nodig hebt.)
  4. Voer npm ci uit vanaf de root van de git repo. (Je hebt hiervoor npm 6.13.4 of hoger nodig. Voer npm install -g npm@lts uit om je npm-versie bij te werken naar de LTS-versie.)

Linux- en OSX- gebruikers kunnen de volgende bash-alias opzetten door het volgende te plaatsen in het ~/.bashrc bestand:

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"

Dit zal alle gecompileerde bestanden van je systeem verwijderen en een nieuwe installatie uitvoeren als één commando door het aanroepen jinstall van in je Joomla installatie. Je kunt ook het jclean commando gebruiken om naar een Joomla 3.x branch terug te gaan.


Een iets langere start handleiding

Joomla is vergelijkbaar met een groot aantal andere web tools. Het heeft een groot PHP-gedeelte en steeds meer JavaScript code. Voor PHP-codering is niet zo veel voorbereiding nodig, maar JavaScript vraagt om veel sleutelwerk. De voornaamste reden is dat niemand code schrijft die elke browser begrijpt, dus de code moet worden omgezet van bijvoorbeeld ES6 naar een compatible versie van JavaScript. Hetzelfde geldt voor CSS. Voor Joomla gebruiken we SASS, dat wordt geconverteerd naar native CSS, zodat elke browser het begrijpt. Een ontwikkelomgeving opzetten is iets gecompliceerder, maar het sleutelen maakt het coderen gemakkelijker. Dankzij watchers en het automatisch opnieuw laten van je browser kun je je wijzigingen in real time zien.

PHP

Het zou voldoende moeten zijn om composer install uit te voeren, aangezien dit de PHP-afhankelijkheden zal installeren die zijn opgeslagen in het composer.lock bestand. Je kunt dit zo vaak doen als je wilt. Het installeert alleen nieuwe pakketten als het composer.lock bestand is gewijzigd. Voer composer update niet uit, want dit zal al je pakketten bijwerken naar nieuwere versies en het composer.lock bestand updaten.

Let op het kan nodig zijn om de composer install uit te voeren met de --ignore-platform-reqs optie om de platform vereisten te negeren die zijn gespecificeerd in Composer. Dit is van toepassing als je geen PHP's LDAP extensie hebt geïnstalleerd.

Node/npm scripts

Node.js heeft een pakketmanager, NPM (in sommige opzichten hetzelfde als Composer). NPM heeft een run commando en we hebben een aantal scripts voorbereid om het gemakkelijker te maken. Je voert de commando's uit vanaf de root van de repository als je JS of SASS bestanden hebt aangepast. Voorafgaand moet je eenmaal npm ci draaien, om afhankelijkheden te installeren.

npm run build:css

Dit compileert SASS-bestanden naar CSS en maakt ook de minified bestanden aan.

npm run build:js

Dit compileert de JavaScript-bestanden en zet ze om naar het juiste bestandsformaat, en het maakt de minified bestanden aan.

npm run watch

Dit is hetzelfde als het build:js commando maar het kijkt naar wijzigingen en creëert automatisch bijgewerkte bestanden in de media map. SASS bestanden worden nog niet opgenomen.

npm run lint:js

Dit voert een syntax controle uit op alle ES6 JavaScript bestanden ten opzichte van de javascript code standaard (lees, voor meer informatie over de Joomla 4 codestijl standaard alstublieft de coding standaard handleiding op het coding standards manual.

npm run test

Dit voert een serie JavaScript tests uit.

Mogelijke problemen

Bij het installeren van composer kun je tegen deze fouten oplopen

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.

De oplossing kan zijn om de composer install uit te voeren met de --ignore-platform-reqs optie om de platform requirements te negeren die zijn gespecificeerd in Composer. Dit is van toepassing als je geen PHP's LDAP extensie hebt geïnstalleerd.

composer install --ignore-platform-reqs

Als u een login error krijgt als hieronder getoond, verwijder dan het library/autoload_psr4.php bestand, zoals in de tweede afbeelding getoond..

Login After Install Error
Login After Install Error