Serve A Local Directory As Web Pages With Live Reload In Rust
I built an asciituber avatar in rust (called asciibear). OBS is setup to load it as a webpage via a browser source. I use the code below to serve the page and automatically reload it whenever I make changes.
The Installation
Run these to create a new rust project and add the necessary dependencies:
cargo new tango_server
cd tango_server
cargo add axum
cargo add tokio --features "rt-multi-thread,macros"
cargo add tower-http --features "fs"
cargo add tower-livereload
cargo add notifyThe Rust Code
This is the code to place in the _src/main.rs__ file:
use axum::Router;
use notify::Watcher;
use std::path::Path;
use tower_http::services::ServeDir;
use tower_livereload::LiveReloadLayer;
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
let livereload = LiveReloadLayer::new();
let reloader = livereload.reloader();
let app = Router::new()
.nest_service("/", ServeDir::new(Path::new("html")))
.layer(livereload);
let mut watcher = notify::recommended_watcher(move |_| reloader.reload())?;
watcher.watch(Path::new("html"), notify::RecursiveMode::Recursive)?;
axum::Server::bind(&"0.0.0.0:3030".parse()?)
.serve(app.into_make_service())
.await?;
Ok(())
}
-- h2
The HTML File
Create and _html__ directory next to the _Cargo.toml__ file
with whatever contents you want. e.g.
-- code
-- html
-- h2
The Watcher
The last step is to run the process and set it up to watch
and reload. I do that by running this inside the project
directory:
-- code/
-- bash
cargo watch -x runTODO: FIgure out how to do this without having to restart the process
It's super handy and not a lot of code. Recommended.
-
I had some problems with unicode characters not working properly with this approach. They turned into two characters in some cases. This does not seem to be a problem with axum. My guess is it's the file serving process
-
This is a lot like browser-sync but with way fewer features
-
The main reason I running this is so I don't have to also run browser-sync at the same time. I just start up my app and it provides the core functionality as well as the web page