Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

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.

Notes

  • 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

References