Produits Entr'ouvert » Combo

Avec iwatch -r -t '.scss' -e modify -c "make css" ., on a la possibilité de recompiler automatiquement les thèmes lorsqu'un changement est effectué.

Néanmons, on est toujours obligé de marteler ctrl-R dans le navigateur, ce qui est pénible pour plusieurs raisons :

- c'est lent (plusieurs secondes le temps de changer de fenètre, que le serveur regénère la page, etc.)
- ça demande une opération manuelle
- ça réinitialise potentiellement des élements d'UI qu'on est en train de styler (par exemple une tooltip, une modale, une page précise d'un formulaire…)

On peut faire mieux que ça en intégrant un client et un serveur livereload en développement. Pour les personnes qui ne connaissent pas, ça fonctionne comme ça :

1. Le client livereload est un petit bout de javascript chargé dans la page qui ouvre une connexion websocket avec
2. Le server livereload, généralement lancé en ligne de commande, qui surveille un dossier et notifie le client des changements
3. Lorsqu'un changement est notifié, le client recharge automatiquement les ressources affectées dans le navigateur. Pour du CSS, la mise à jour est immédiate, et ne nécessite pas de recharger la page. Pour d'autres ressources (images, HTMl, javascript…), le client procède généralement à un rechargement complet de la page

Pour essayer en local, vous pouvez faire un sudo apt install python3-livereload iwatch et appliquer les modifications suivantes:

dans /etc/nginx/sites-enabled/combo, rajouter:

# pour mettre en place le proxy vers le javascript et le websocket de livereload
    location /livereload {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://127.0.0.1:35729;
    }
    location /livereload/ {
        proxy_pass         http://127.0.0.1:35729/;
    }

Dans combo, appliquer le patch joint.

Dans publik-base-theme, appliquer le patch joint.

Ensuite, depuis publik-base-theme, lancer ./compile-and-reload.sh, charger une page de combo dans le navigateur (une connexion websocket doit être visible dans les logs réseaux du navigateurs). À partir de là, les modifications effectuées sur les fichiers scss sont normalement répercutés immédiatement dans le navigateur.