How to serve a file for any matching GET request with warp?

Question

I am using React in the frontend development and doing client-side routing with react-router. While intergating with my warp backend, I have come across some obstacles.

After building the React app with npm run build, I move the build folder to my Rust project. According to create-react-app documentation. I need to serve build folder and serve the index.html file for any matching GET request. I could not achieve this in warp like the express example in the documentation.

Here is the build folder example.

build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.089e2544.css
    │   └── main.089e2544.css.map
    └── js
        ├── main.ba6a006a.js
        ├── main.ba6a006a.js.LICENSE.txt
        └── main.ba6a006a.js.map

3 directories, 10 files

Here is index.html line where includes the script.

<script defer="defer" src="/static/js/main.ba6a006a.js"></script>

Using warp::fs::dir("build") was enough to see main page since it includes index.html file in the background. But if I to manually type URL for example 127.0.0.1:8080/login and press enter it does not process the request.

Answer 1

The way to implement a "fallback" is to simply use .or() which will attempt to use the next filter if the one before didn't match. So if the required behavior is to serve from the "build" directory or else serve "build/index.html", that can be done like this:

use warp::Filter;

#[tokio::main]
async fn main() {
    let routes = warp::filters::fs::dir("build")
             .or(warp::filters::fs::file("build/index.html"));

    warp::serve(routes)
        .run(([127, 0, 0, 1], 8080))
        .await;
}