Accesing wasm app using warp web-framework

Hi,
I started trying to make web applications with egui. And the problem is that I don't understand how to deploy it in the localhost using warp framework.
I used trunk to compile to wasm and everything was fine. I got a dist folder with files and when I uploaded this folder to the https://app.netlify.com and opened it using their link - everything worked perfectly. Or github pages.
But how can I deploy it at the localhost and access it using warp framework? What should I do after I filter the incoming request?
And I don't understand why nothing happens when I try to open index.html in generated dist folder which was compiled by trunk.
What I expected to happen : I launch warp at "localhost:8000" and when I enter link "localhost:8000/my_app" in browser it opens my compiled web application.
The problem is that when I build API in warp I know what I should return to request (JSON for example). While in this case I don't know what I should return and what github pages or netify.com are doing to display it correctly.
P.S. I know about "trunk serve" but in our environment warp is actively used, so for me it would be the best option to use both of it.

You want warp to serve the directory where your egui wasm build is located

I'll give it a try right now. Thx

Finally solved it.
I hope it would help smbd in the future. The problem was in the filter. And after filtered request was processed the browser couldn't get other requested files because there were no answers to other requests. (bottom screenshot)

Here is the old code :

use warp::Filter;
#[tokio::main]
async fn main() {
    let filter = warp::path("wasm").and(warp::fs::dir(r#"dist"#));
    warp::serve(filter).run(([0, 0, 0, 0], 8000)).await;
}

When I replaced it with :

use warp::Filter;
#[tokio::main]
async fn main() {
    let filter = warp::any().and(warp::fs::dir(r#"dist"#));
    warp::serve(filter).run(([0, 0, 0, 0], 8000)).await;
}

It finally worked out for me. In this version any requests would be redirected to the dist folder with requested files for search.

Because your other requests (probably resources you are loading in your <head>) weren't looking at http://localhost:8000/wasm/* but http://localhost:8000/*. I assume there are absolute paths in your HTML, like /icon_ios_touch_192.png instead of relative ones (without the leading /). If the HTML file is generated by some tool, there might be an option to specify a path prefix or create relative paths or something.

1 Like

Thanks for your observations. I’ll try to change these paths.
The code is compiled by the trunk, and I also noticed things that you’re talking about. But, but…. I was tired of fighting with it so I’ll do it next time.
It’s working and it was enough for me today

1 Like