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:

Code

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 notify

The Rust Code

This is the code to place in the _src/main.rs__ file:

Code

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 run

TODO: FIgure out how to do this without having to restart the process

It's super handy and not a lot of code. Recommended.

References