#Integrating dioxus into larger axum backend

1 messages · Page 1 of 1 (latest)

marsh timber
#

Hi, I already have an axum monolith backend serving a couple apps, (two react apps and a few APIs).

I built the next frontend in dioxus but currently the only way I've managed to get it to work is build a VirtualDom and SSR it like so:

    // in an axum route handler
    let rendered = tokio::task::block_in_place(|| {
        let mut app = VirtualDom::new(build_app)
            .with_root_context(doc)
            .with_root_context(data);
        app.rebuild_in_place();
        dioxus::ssr::render(&app)
    });

    Ok(Html(rendered))

But this means I lose WASM-based reactivity and have to implement reactivity by inlining JS.

I think going dioxus-fullstack interests me the most but at this point getting dioxus-web would be a big upgrade. But I can't find any docs or examples where either of these are merged into an existing axum router. Ideally one which can take path and query parameters.
e.g. for dioxus-web the only two examples show

dioxus_web::launch::launch(app, vec![], Config::new().hydrate(true));

But it's not obvious how to make this impl axum::response::IntoResponse

outer gull
#

You need two entry points to your application:

  • The server that launches axum
  • The client that launches the web build
#

Fullstack sets that up with a feature for the web and server

marsh timber
#

Very cool, I didn't see this function. I don't see any path specs though, is this just hosting on /? is there any way to specify a path? Again I am hosting other things on the same backend

outer gull
#

You can nest another axum router under a path

#

You will also need to set the base path in your dioxus.toml

marsh timber
#

do I need a dioxus.toml? Overall do I need to use the dx command in order to use this effectively? I already have separate build and CI steps for this backend

outer gull
#

Yes, dx bundles a bunch of stuff for wasm

#

You need either it or some other wasm bindgen setup

#

If you use assets with manganis, dx will also copy that over

ancient quest
#

hi @marsh timber , are you using the "fullstack" feature set for this project, or are you still launching the "web" App from your server?

plain ledge
#

@ancient quest I'm working with Tom, our intention is to use the fullstack feature set

#

@outer gull This mostly seems to work, except for server functions. The client is still trying to post to /api/... Instead of /prefix/api/... even though I set the base_path on the web side's Dioxus.toml. Do you know the correct way to fix that?

outer gull