rksm / axum-yew-setup Goto Github PK

Hi

Sorry if Ive made some mistakes or incorreect assumptions, Im new to rust programming, but it looks like this cargo generate command (cargo generate rksm/axum-yew-template) creates files that dont build or run.

1. They reference axum_extra::routing::SpaRouter which no longer exists
2. pushd frontend; in file install-dependencies.sh creates an error - but changing it to pushd ../'frontend'; seems to work. Same for pushd server
3. The code seems very different from the code that's actually in the source repo - does the cargo generate command need updating?

This is exactly the code I need to get started on my axum / yew first project - so hopefully I can get things running

Do you recommend I just clone the repo and start there?

Many thanks

just wanted to let you know your site[1] is timing out for me.

1. https://robert.kra.hn/posts/2022-04-03_rust-web-wasm/

I just run your code, it really works! Great Job. 👍

I wonder how to parse data to JSON in

        Some(Ok(data)) => {
            html! {
                <div>{"Got server response: "}{data}</div>
            }
        }

You can use my api to have a test
https://my-json-server.typicode.com/july-12/demo/todos

which returns

{
  "todos": [
    {
      "id": "1",
      "description": "COOK",
      "completed": false,
      "editing": false
    },
    {
      "id": "2",
      "description": "Play basketball",
      "completed": false,
      "editing": false
    },
    {
      "id": "3",
      "description": "reading",
      "completed": false,
      "editing": false
    },
    {
      "id": "4",
      "description": "learn rust",
      "completed": false,
      "editing": false
    }
  ]
}

Currently, this example doesn't seem to handle 404s and will return 200 on every request, considering there are 2 Routers being used (Axum's and Yew's), is there a way to somehow handle this?

I tried this:

.fallback_service(
    get_service(
        ServeDir::new(&opt.static_dir)
            .not_found_service(ServeFile::new("./dist/index.html")),
    )
    .handle_error(|_| async {
        (StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong...")
    }),
)

but then /hello-server will return a 404, which is what I don't want.

Is the port number a typo? I'm trying different stuff but I can't get it to work. I'm running this in digitalocean remotely.

I'm trying to understand if there is something under the hood where the port number changes or something. I am assuming you changed it because the port was still busy when you were developing?

Unsure, but some help would be useful.

Thank you for the blog, it's exactly what I was looking for to get started.

Now let’s test it! Start the server on port 8081 and the frontend in dev mode with a proxy for api requests:

cargo run --bin server -- --port 8081
cd frontend; trunk serve --proxy-backend=http://[::1]:8081/api/
When you open your web browser at [localhost:8080/hello-server](http://localhost:8080/hello-server) you should now see:

When running prod.sh and going to http://localhost:8080/ the webpage stays at "loading..."

Console shows following output:

...
2022-08-21T07:46:55.851388Z  INFO server: listening on http://[::1]:8080    
2022-08-21T07:47:02.368106Z DEBUG request{method=GET uri=/ version=HTTP/1.1}: tower_http::trace::on_request: started processing request
2022-08-21T07:47:02.368345Z DEBUG request{method=GET uri=/ version=HTTP/1.1}: tower_http::trace::on_response: finished processing request latency=0 ms status=200
2022-08-21T07:47:02.424372Z DEBUG request{method=GET uri=/assets/frontend-6f8d53fa38d70403_bg.wasm version=HTTP/1.1}: tower_http::trace::on_request: started processing request
2022-08-21T07:47:02.424887Z DEBUG request{method=GET uri=/assets/frontend-6f8d53fa38d70403_bg.wasm version=HTTP/1.1}: tower_http::trace::on_response: finished processing request latency=0 ms status=200
2022-08-21T07:47:02.425059Z DEBUG request{method=GET uri=/assets/frontend-6f8d53fa38d70403.js version=HTTP/1.1}: tower_http::trace::on_request: started processing request
2022-08-21T07:47:02.426817Z DEBUG request{method=GET uri=/assets/frontend-6f8d53fa38d70403.js version=HTTP/1.1}: tower_http::trace::on_response: finished processing request latency=1 ms status=200

There are no errors or messages in JavaScript console and I don't know how to debug why this isn't working.

OS: Debian 11
Browser: Firefox ESR 91.12.0esr

dev.sh works properly, but prod.sh is broken.
index file not found

Less of an issue and more of a question, but when I was looking into how to add a second asset directory in addition to ./dist I found these examples which seem to accomplish the same thing as this repository's fallback_service code. In other words, is there a reason this repository uses this:

    let app = Router::new()
        .route("/api/hello", get(hello))
        .fallback_service(get(|req| async move {
            match ServeDir::new(&opt.static_dir).oneshot(req).await {
                Ok(res) => {
                    let status = res.status();
                    match status {
                        StatusCode::NOT_FOUND => {
                            let index_path = PathBuf::from(&opt.static_dir).join("index.html");
                            let index_content = match fs::read_to_string(index_path).await {
                                Err(_) => {
                                    return Response::builder()
                                        .status(StatusCode::NOT_FOUND)
                                        .body(boxed(Body::from("index file not found")))
                                        .unwrap()
                                }
                                Ok(index_content) => index_content,
                            };

                            Response::builder()
                                .status(StatusCode::OK)
                                .body(boxed(Body::from(index_content)))
                                .unwrap()
                        }
                        _ => res.map(boxed),
                    }
                }
                Err(err) => Response::builder()
                    .status(StatusCode::INTERNAL_SERVER_ERROR)
                    .body(boxed(Body::from(format!("error: {err}"))))
                    .expect("error response"),
            }
        }))
        .layer(ServiceBuilder::new().layer(TraceLayer::new_for_http()));

instead of this:

    let index_path = PathBuf::from(&opt.static_dir).join("index.html");
    let serve_dir = ServeDir::new(&opt.static_dir).not_found_service(ServeFile::new(&index_path));
    let app = Router::new()
        .route("/api/hello", get(hello))
        .fallback_service(get_service(serve_dir).handle_error(|_| async {
            (StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong...")
        }))
        .layer(ServiceBuilder::new().layer(TraceLayer::new_for_http()));

Hi!

Thanks for publishing your project starter! This is super nice to play with.

I ran into an issue quite quickly, though. The first time I ran the project with ./dev.sh, stuff worked.

I then hit Ctrl+C and tried ./prod.sh. From then on, the .js and .wasm assets were served as text/html mime type, which the browser of course rejects.

Do you have any clue what is happening there? It's very confusing, since it worked the first time around...

Update: Devtools show the JS and WASM file request being answered with the actual index.html content in prod mode.