One codebase, every platform???

[dan-da]

I am presently evaluating Dioxus for an upcoming web application. I would like to also support Desktop, TUI, and eventually mobile.

The Dioxus homepage says in big bold letters: "One codebase, every platform". This strongly implies that I can have a single codebase that runs on every (supported) platform. Based on this claim, I decided to try out Dioxus before any other rust web framework. I have been following the Dioxus guides.

Yet dx new insists that I choose a single platform/renderer. And after doing so, if I run dx init it gives an error that Cargo.toml already exists.

I followed the guide and created the hackernews example app. It uses the Web renderer. There is no mention how to make it use the Desktop renderer or TUI, or mobile, or fullstack. My expectation (from the homepage) is that I should be able to (easily) wire up multiple renderers in order to target different platforms from the same underlying codebase.

Likewise, I looked in the examples directory and didn't see anything obvious about how to do it. Or if its even possible. Nor did I find mention in the docs.

The project homepage seems to be bragging loudly about this functionality... so where is it?

I'd be grateful for any pointers to examples or documentation of this functionality.

Or if it is not possible and one truly must choose a single platfform per codebase, I'd like to know that also.

[onweru]

@dan-da, you probably should probably move this to Q&A discussions. It strikes me as a question.

[ealmloff]

Yet dx new insists that I choose a single platform/renderer. And after doing so, if I run dx init it gives an error that Cargo.toml already exists.

Choosing the platform in dx new mostly just adds a feature to the dioxus crate. Support for multiple platforms at once in the template is tracked in https://github.com/DioxusLabs/dioxus-template/issues/9

I followed the guide and created the hackernews example app. It uses the Web renderer. There is no mention how to make it use the Desktop renderer or TUI, or mobile, or fullstack. My expectation (from the homepage) is that I should be able to (easily) wire up multiple renderers in order to target different platforms from the same underlying codebase.

The hackernews guide intentionally does not use any libraries that are platform specific. It will work with desktop, fullstack, web or liveview.

Likewise, I looked in the examples directory and didn't see anything obvious about how to do it. Or if its even possible. Nor did I find mention in the docs.

We don't have great documentation for this currently, but you can actually run many of the examples on different platforms with these commands:

dx serve --platform web --features web --example _ -- --no-default-features
dx serve --platform fullstack --features fullstack --example _ -- --no-default-features
dx serve --platform liveview --features liveview --example _ -- --no-default-features

[dan-da]

@onweru on the contrary, it strikes me that this is a documentation issue/omission at the very least. "One codebase, one platform" is a main selling point on the homepage yet is not even discussed in the guide or docs, afaict.

@ealmloff thx for the comments. very helpful.

The hackernews guide intentionally does not use any libraries that are platform specific. It will work with desktop, fullstack, web or liveview.

happy to hear that. It seems the guide should mention it, and how to run for each platform.

How about TUI and mobile? If it doesn't work for those why not, ie what should my expectations be? I'm trying to (constructively) highlight that I don't see any guidance in the docs/guide for what platforms can be expected to work simultaneously or not, and this is confusing for a newcomer. What constraints do I need to adhere to in order to work on all supported platforms? Eg, I don't think I can expect TUI to have all the controls that Web and Desktop do.

We don't have great documentation for this currently, but you can actually run many of the examples on different platforms with these commands:

Thanks for this! Ok, I put this in my Cargo.toml:

dioxus = { version = "0.5", features = ["web", "fullstack", "desktop", "liveview"] }

and tried to run the hackernews demo:

$ dx serve --platform fullstack --features fullstack --example _ -- --no-default-features
| 💼 Waiting to start building the project...                                                                                                        
error: none of the selected packages contains these features: fullstack
build desktop done
Error: 🚫 Serving project failed:

Caused by:
    0: I/O Error: No such file or directory (os error 2)
    1: No such file or directory (os error 2)

Not sure where to go from here.

Also, I don't see any feature-flag available for TUI...?

[dan-da]

ok, I've made some progress. I'm using ubuntu 22.04. I've been able to build the hackernews app (from the guide) with platform=desktop. But I still get an error trying to run it.

My Cargo.toml now contains:

dioxus = { version = "0.5", features = ["web", "fullstack", "desktop", "liveview", "router"] }

I am building with the command:

dx build --platform desktop  -- --no-default-features

To get this far, I had to run the following commands:

$ sudo apt install libwebkit2gtk-4.1-dev   build-essential   curl   wget   file   libssl-dev   libayatana-appindicator3-dev   librsvg2-dev

the above was from Tauri docs linked to by the dioxus "Getting Started" page, under Desktop platform. So docs were helpful there.

I still got a link error, complaining about -ldxo. So I had to install libxdo-dev.

$ sudo apt install libxdo-dev

I don't see this mentioned anywhere in the "Getting Started" page. Maybe its an omission in Tauri docs? either way, it bites newcomers.

Ok, so with that out of the way, It builds and I try to run the desktop program and get an error:

./target/debug/hacker-news
thread 'main' panicked at /home/danda/.cargo/registry/src/index.crates.io-6f17d22bba15001f/js-sys-0.3.69/src/lib.rs:6013:9:
cannot call wasm-bindgen imported functions on non-wasm targets
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

eh? what now?

[dan-da]

Experimenting, I just tried:

$ dx build --platform tui  -- --no-default-features
error: invalid value 'tui' for '--platform <PLATFORM>'
  [possible values: web, desktop, fullstack]

Ok, so --platform supports web, desktop, fullstack. What about liveview, tui and mobile? How does one target those? color me confused.

[dan-da]

a bit more progress. flailing about, I learned that the wasm-bindgen error is indicating the app isn't being run in a proper wasm environment. This led me to dx bundle, which seems to be designed to create sucn ah environment.

But when I try it, I hit yet another error:

 $ dx bundle
build desktop done
Adding assets from dist to bundle
thread 'main' panicked at /home/danda/.cargo/registry/src/index.crates.io-6f17d22bba15001f/dioxus-cli-0.5.4/src/cli/bundle.rs:193:13:
Failed to bundle project: BundlerError(
    Error {
        context: "Failed to build data folders and files",
        source: BundlerError(
            Error {
                context: "Failed to copy resource files",
                source: IoError(
                    Os {
                        code: 36,
                        kind: InvalidFilename,
                        message: "File name too long",
                    },
                ),
            },
        ),
    },
)
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

filename too long. seriously? and of course it doesn't bother to mention which file.

edit: apparently this is already reported in #2239. So is there another way to run Desktop platform, or I am out-of-luck for now?

[ealmloff]

How about TUI and mobile? What constraints do I need to adhere to in order to work on all supported platforms? Eg, I don't think I can expect TUI to have all the controls that Web and Desktop do.

TUI only supports a limited number of widgets and flexbox layout. Mobile supports a full webview, but it is more difficult to set up currently (see the mobile reference for more information)

Ok, I put this in my Cargo.toml:

dioxus = { version = "0.5", features = ["web", "fullstack", "desktop", "liveview"] }

You need to put each platform under a feature in your cargo.toml:

dioxus = { version = "0.5" }

[features]
desktop = ["dioxus/desktop"]
liveview = ["dioxus/liveview"]
fullstack = ["dioxus/fullstack"]
server = ["dioxus/axum"]
web = ["dioxus/web"]

$ dx serve --platform fullstack --features fullstack --example _ -- --no-default-features
| 💼 Waiting to start building the project...                                                                                                        
error: none of the selected packages contains these features: fullstack
build desktop done
Error: 🚫 Serving project failed:

Caused by:
    0: I/O Error: No such file or directory (os error 2)
    1: No such file or directory (os error 2)

Not sure where to go from here.

The _ is a placeholder for the example you want to run. You can try dx serve --platform fullstack --features fullstack --example readme -- --no-default-features

Also, I don't see any feature-flag available for TUI...?

Dioxus TUI has been moved to the blitz repo and may not be supported as a first class renderer in future releases

Ok, so --platform supports web, desktop, fullstack. What about liveview, tui and mobile? How does one target those? color me confused.

The desktop platform works for liveview and TUI as well