Merge pull request 'Configurer le re-build automatique de l'app front lors de changements' (#47) from html_auto_reload into main

### Détails

Nous avons plusieurs besoins :
- reconstruire le serveur lorsque des fichiers _Rust_ ont été modifiés
- recharger les fichiers HTML lors d'un changement directement dans le navigateur

Le fichier `.ignore` permet d'indiquer à `systemfd` de ne pas surveiller l'état de ses fichiers.

Actuellement lors d'une modification, on se retrouve sur la page d'accueil vu que l'url reste toujours la même lors d'un changement de page.

### Pourquoi ?

Pour être plus rapide lors du développement et ainsi ne pas à avoir à relancer les commandes trop régulièrement.

### Documentation

Documentation des librairies
- [auto-reload sur Axum](6bd6556385/examples/auto-reload/README.md)
- [tower_livereload](https://docs.rs/tower-livereload/latest/tower_livereload/)

### Todo

- [x] Documenter un peu plus
- [x] Rendre plus lisible `main.rs`

Fix #44

Reviewed-on: #47
Reviewed-by: florian_briand <florian.briand@digital-engine.info>

.ignore

@@ -0,0 +1,5 @@
+# Ignorer les fichiers dont ne dépent pas la compilation 
+*.md
+tailwind.config.js
+*.example
+scripts

README.md

@@ -47,6 +47,19 @@ Si vous souhaitez lancer les composants séparément, les indications de lanceme
 - [app](crates/app/README.md)
 - [sesam-vitale](crates/sesam-vitale/README.md)
 
+## Rechargement automatique
+
+Pour permettre de développer plus rapidement, il existe une librairie qui recompile automatiquement nos modifications en cours : [`cargo-watch`](https://github.com/watchexec/cargo-watch) permet de relancer une commande `cargo` lorsqu'un fichier est modifié (example: `cargo run` --> `cargo watch -x run`).
+
+Voici la commande pour l'installer dans un _package_ :
+```bash
+cargo add cargo-watch --dev --package app
+```
+
+Le fichier [`.ignore`](./ignore) permet d'ignorer certains fichiers pour éviter de relancer la recompilation inutilement.
+
+⚠️ La librairie n'est pas compatible avec _Windows 7_ et les versions antérieurs de _Windows_.
+
 ## Build
 
 Packager le client desktop

crates/app/Cargo.toml

@@ -7,7 +7,13 @@ edition = "2021"
 askama = "0.12.1"
 askama_axum = "0.4.0"
 axum = "0.7.5"
+listenfd = "1.0.1"
+notify = "6.1.1"
 serde = { version = "1.0.204", features = ["derive"] }
 tokio = { version = "1.39.1", features = ["macros", "rt-multi-thread"] }
 tower-http = { version = "0.5.2", features = ["fs"] }
+tower-livereload = "0.9.3"
 
+[dev-dependencies]
+cargo-watch = "8.5.1"
+systemfd = "0.4.0"

crates/app/README.md

@@ -13,3 +13,23 @@
 ```bash
 cargo run --bin app
 ```
+
+## Rechargement automatique (_auto-reload_)
+
+Pour le projet `app`, nous utilisons en plus de `cargo-watch` ses librairies :
+- [`systemfd`](https://github.com/mitsuhiko/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`](https://github.com/mitsuhiko/listenfd) permet, côté _Rust_, de démarrer un serveur en utilisant des connexions déjà ouvertes.
+
+Pour notre application voici la commande à lancer :
+
+```bash
+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`](https://github.com/leotaku/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_.

crates/app/src/main.rs

@@ -1,17 +1,63 @@
 use ::app::get_router;
+use axum::body::Body;
+use axum::http::Request;
+use listenfd::ListenFd;
+use notify::Watcher;
 use std::env;
 use std::path::Path;
+use tokio::net::TcpListener;
+use tower_livereload::predicate::Predicate;
+use tower_livereload::LiveReloadLayer;
+
+/// Nous filtrons les requêtes de `htmx` pour ne pas inclure le script _JS_ qui gère le rechargement
+/// Voir https://github.com/leotaku/tower-livereload/pull/3
+#[derive(Copy, Clone)]
+struct NotHtmxPredicate;
+impl<T> Predicate<Request<T>> for NotHtmxPredicate {
+    fn check(&mut self, req: &Request<T>) -> bool {
+        !(req.headers().contains_key("hx-request"))
+    }
+}
+
+const DEFAULT_LISTENER: &str = "localhost:3000";
+async fn get_tcp_listener() -> TcpListener {
+    let mut listenfd = ListenFd::from_env();
+
+    match listenfd.take_tcp_listener(0).unwrap() {
+        // if we are given a tcp listener on listen fd 0, we use that one
+        Some(listener) => {
+            listener.set_nonblocking(true).unwrap();
+            TcpListener::from_std(listener).unwrap()
+        }
+        // otherwise fall back to local listening
+        None => TcpListener::bind(DEFAULT_LISTENER).await.unwrap(),
+    }
+}
+
+fn get_livereload_layer(templates_path: &Path) -> LiveReloadLayer<NotHtmxPredicate> {
+    let livereload = LiveReloadLayer::new();
+    let reloader = livereload.reloader();
+    let mut watcher = notify::recommended_watcher(move |_| reloader.reload()).unwrap();
+    watcher
+        .watch(templates_path, notify::RecursiveMode::Recursive)
+        .unwrap();
+    livereload.request_predicate::<Body, NotHtmxPredicate>(NotHtmxPredicate)
+}
 
 #[tokio::main]
 async fn main() {
     let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
     let assets_path = Path::new(&manifest_dir).join("assets");
-    let router = get_router(assets_path.as_path());
+    let templates_path = Path::new(&manifest_dir).join("templates");
 
-    // TODO: select port based on available port (or ask in CLI)
-    let listener = tokio::net::TcpListener::bind("localhost:3000")
+    let livereload_layer = get_livereload_layer(&templates_path);
+    let router = get_router(assets_path.as_path()).layer(livereload_layer);
+
+    let listener: TcpListener = get_tcp_listener().await;
+    println!("Listening on: http://{}", listener.local_addr().unwrap());
+
+    // Run the server with the router
+    axum::serve(listener, router.into_make_service())
         .await
         .unwrap();
-    println!("Listening on: http://{}", listener.local_addr().unwrap());
-    axum::serve(listener, router).await.unwrap();
 }