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 :

bash

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 :

rust

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

- 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

Footnotes And References

•
tower-livereload
•
ASCII_BEAR