Krys4lide/crates/app
2024-08-08 23:42:12 +02:00
..
assets refacto: add alpinejs, flowbite and htmx to app assets with explicit versions 2024-08-06 21:30:14 +02:00
css feat: Setup Tailwind CSS 2024-08-06 21:11:04 +02:00
src feat: Add livereload 2024-08-08 22:19:24 +02:00
templates refacto: add alpinejs, flowbite and htmx to app assets with explicit versions 2024-08-06 21:30:14 +02:00
.gitignore feat: Setup Tailwind CSS 2024-08-06 21:11:04 +02:00
Cargo.toml feat: Add livereload 2024-08-08 22:19:24 +02:00
README.md docs: Ajout de documentation autour de l'auto-reload et du livereload 2024-08-08 23:42:12 +02:00
tailwind.config.js feat: Setup Tailwind CSS 2024-08-06 21:11:04 +02:00

Pré-requis

Exécution

  • Lancer tailwindcss en mode watch dans un terminal :
./tailwindcss -i css/input.css -o assets/css/style.css --watch
  • Lancer le serveur web dans un autre terminal :
cargo run --bin app

Rechargement automatique (auto-reload)

Pour le projet app, nous utilisons en plus de cargo-watch ses librairies :

  • systemfd permet de redémarrer un serveur sans interrompre les connexions en cours, il transmet le descripteur de fichier du socket à une nouvelle instance du serveur (exemple: cargo watch -x run --> systemfd --no-pid -s http::3000 -- cargo watch -x run). Si le port est déjà pris il en prendra un autre.
  • listenfd permet, côté Rust, de démarrer un serveur en utilisant des connexions déjà ouvertes.

La librairie systemfd ne fait pas partie des dépendances du projet, il faut donc l'installer avec la commande suivante :

cargo install systemfd

Pour notre application voici la commande à lancer :

systemfd --no-pid -s http::3000 -- cargo watch -x 'run --bin app'

Chargement à chaud (livereload)

Pour que notre navigateur rafraîchisse automatique notre page lorsque le serveur a été recompilé, nous utilisons la librairie tower-livereload.

A chaque changement, que ça soit sur du code en Rust, HTML, CSS ou JS alors le navigateur va recharger entièrement la page.

En Rust, il n'existe pas encore d'outil de Hot Reload complet et intégré comme on en trouve dans d'autres environnements de développement web, comme pour Node.js.