Tester Joomla 4 avec Composer et Node/NPM
Ce tuto porte essentiellement sur un environnement macOS. Je ne peux donner que des pistes pour les autres OS.
Pour tester Joomla 4 avec ses dépendances, on a besoin d'un outil indispensable: un Terminal.
J'utilise iTerm2 pour macOS, une alternative performante au Terminal natif de mac.
iTerm2 - macOS Terminal Replacement
Microsoft vient de sortir un Terminal développé par ses soins:
Lire les attentivement les explications sur Github, il existe quelques restrictions.
PuTTY - a free SSH and telnet client for Windows
Pas de conseil à donner aux Linuxiens. Cet outil est dans l'ADN de Linux.
On aura besoin d'installer Git et Node/NPM via la CLI (Command Line Interface).
Après pas mal de tâtonnements, j'ai finalement choisi de passer par Homebrew pour mettre en place Git et Node/NPM.
Le gestionnaire de paquets pour macOS — Homebrew
- La commande d'installation de Homebrew à copier coller dans le Terminal:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- Commande pour installer Git via Homebrew
brew install git
Rien de plus simple avec Homebrew.
- Commande pour installer Node et NPM via Homebrew
brew install node
Pour contrôler que Node et NPM sont correctement installés, il suffit de vérifier leurs versions :
node -v
npm -v
Il est à noter que la commande -g - pour "globally" - n'apparaît pas dans ces commandes. C'est là tout l'intérêt de Homebrew.
Avant de passer par Homebrew, je trouvais plein de posts où l'on conseillait de faire un sudo pour récupérer les droits root en tant qu'admin système. Pas très recommandé pour macOS.
On peut mettre à jour Homebrew, Node et NPM avec une seule commande :
brew update && brew upgrade node && npm update -g npm
Ce tuto me paraît approprié :
Installing Git on Linux, Mac OS X and Windows
How to Install Node.js® and NPM on Windows
Install Node.js and NPM on Windows
Même tuto que plus haut :
Installing Git on Linux, Mac OS X and Windows
How to Install Node.js and NPM on Linux
1 - Créer un dossier - testj4, par exemple - sur le serveur local.
2 - Dans le Terminal, définir le chemin vers le répertoire d'installation sur le serveur, en principe /htdocs/.
-
pour MAMP
cd /Applications/MAMP/htdocs/testj4 -
pour Bitnami
cd /Applications/mampstack-[versionPHP]/apache2/htdocs/testj4
3 - Télécharger Joomla 4 via la command line
git clone --depth=1 -b 4.0-dev https://github.com/joomla/joomla-cms/
C'est très rapide, et une fois l'opération terminée, on verra apparaître un dossier /joomla-cms/ dans /testj4/.
Pas la peine de déplacer /joomla-cms/, il suffit d'indiquer le bon chemin :
cd joomla-cms
3bis - Tester un pull request
Pour proposer une modif du code, on doit créer un fork du repo original. En d'autres termes, un clone de joomla-cms. Pour tester, on peut aller le chercher via la command line
ou
le récupérer sur issues.joomla.org, comme sur l'image.
4 - Installer Composer
Il n'est pas nécessaire d'installer Composer globally.
Les fichiers composer.json et composer.lock sont là pour faire le job.
Commande pour installer Composer :
composer install
Quand on voit Generating optimized autoload files, c'est bon.
5 - Installer NPM
Commande pour installer NPM :
npm ci
Il y a plusieurs commandes pour installer NPM dans un répertoire, celle-ci est recommandée par les développeurs de Joomla.
Une définition dans la doc NPM :
6 - A cette étape, aller boire un café, discuter avec son voisin, ça peut prendre un moment.
Les fichiers des paquets contenus dans NPM s'installent dans un dossier /node_modules/, puis, à l'aide de ces fichiers, les scripts Joomla installent tous les fichiers sass, css, js dans les bons dossiers.
7 - Quand tout est fini, si tout s'est bien passé, on voit :
Testing binary
Binary is fine
puis, plus bas :
added 1010 packages in 300.388s
... et on est content.
A partir de là, on peut installer Joomla 4 classiquement sur le serveur.
Une fois Joomla 4 correctement installé sur le serveur, on peut utiliser les commandes suivantes si on modifie un fichier .scss ou .js :
npm run watch:css
ou
npm run build:js
Ces commandes vont chercher les modifications et mettre à jour les fichiers concernés.
- Dans le dossier /scss/, chercher et corriger le style à modifier dans les différents fichiers .scss
- appliquer la commande :
npm run build:css
La correction sera automatiquement affectée à :
template.css
et
template.min.css
- créer un fichier mycustom.scss dans le dossier /scss/ du template
- ouvrir le fichier build/build-modules-js/compilecss.es6.js
- vers la ligne 42, on trouve une liste de fichiers à compiler :
files = [
`${RootPath}/templates/cassiopeia/scss/offline.scss`,
`${RootPath}/templates/cassiopeia/scss/template.scss`,
`${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
`${RootPath}/templates/cassiopeia/scss/mycustom.scss`,
`${RootPath}/administrator/templates/atum/scss/bootstrap.scss`,
`${RootPath}/administrator/templates/atum/scss/fontawesome.scss`,
`${RootPath}/administrator/templates/atum/scss/template.scss`,
`${RootPath}/administrator/templates/atum/scss/template-rtl.scss`,
`${RootPath}/installation/template/scss/template.scss`,
`${RootPath}/installation/template/scss/template-rtl.scss`,
];
- rajouter l'appel au fichier mycustom.scss ligne 4, comme il est visible sur cette liste
- après avoir intégré les modifs voulues, appliquer la commande :
npm run build:css
- deux fichiers nouvellement et automatiquement créés seront alors visibles dans le dossier /css/ du template :
mycustom.css et mycustom.min.css
Si vous avez une proposition d'amélioration de script JS, les scripts à modifier sont en es6.js, ou ecmascript v.6, et se trouvent dans les dossiers :
/build/media_source/
- modfier le script
- appliquer la commande :
npm run build:js
Le tuto qui m'a le plus aidée est celui de Valentin Garcia :
How to Contribute to Joomla through Github
Faire attention à choisir la bonne "branch", c'est à dire 4.0-dev avant de "commit".
Postez dans Issues si vous avez des commentaires.
Post in Issues if you have comments.