[Desktop] Asset inclusion not working

[Anonyfox]

Problem

Steps To Reproduce

Steps to reproduce the behavior:

• new desktop app with dx new
• with router
• vanilla css
• • dx serve

... the CSS from main.css is not loaded at all.

• tried more explicit with setting in Dioxus.toml:

...
# include `assets` in web platform
[web.resource]

# CSS style file

style = ["assets/main.css"]

# Javascript code file
script = []
...

no difference.

• after some tweaking with the paths, I also get (consistently) the error:

[ERROR] dioxus_desktop::protocol - Failed to read "/path/to/my/crate/dist/dist/__assets_head.html": No such file or directory (os error 2)

where it clearly adds the /dist part twice. the file does exist in the dist folder at the correct location on my disk, no idea whats wrong here. no idea whats wrong. No success with removing that error so far.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Environment:

• Dioxus version: v0.5
• Rust version: rustc 1.77.2 (25ef9e3d8 2024-04-09)
• OS info: MacOS Sonoma 14.4
• App platform: desktop]

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

[terhechte]

I have the same issue when using it for a web project. I did find a workout, but its more of a hack tbh.:
Install Manganis so that it can embed the css for you. This, however, will not work yet. Changing the css will not force a recompile that incorporates the css. So I added an unnamed number variable below. Increasing the number will force a recompile and any changes you made to your css will be picked up.

const _: &str = manganis::mg!(file("./assets/main.css"));
const _: &str = "2";

Note that I get a rust-analyser error for the first line (file not found) but it compiles just fine with dx...

[thurn]

Also seeing this. The tailwind example doesn't work at all on desktop on the current version (0.5.1) but it does work on master when using

dioxus = { version = "0.5.2", features = ["desktop"], git = "https://github.com/DioxusLabs/dioxus.git" }

So possibly this issue has recently been fixed and we're just waiting for a release?

[mrguiman]

Same problem here when serving on macOS. This looks like a macOS specific issue, as our project still works fine when building on linux

[Libq2022]

According to examples, I add this line to App component, and solve the problem.
style { {include_str!("../assets/main.css")} }

[avi-cenna]

I am having the same issue on Mac, but I can confirm that the include_str macro does work, per the comment above.

[goingforbrooke]

I'm having the same issue on MacOS, but it looks like @ealmloff fixed it today in 7efe4d0e49c351545ba #51545ba as part of #2419. 🎉

Running dx serve --hot-reload --platform desktop now succeed with a main patch. 🩹

❯ dx serve --hot-reload --platform desktop
Dioxus @ v0.5.4 [21:40:59]

    > Hot Reload Mode: RSX
    > Watching: [ src, assets, Cargo.toml, Dioxus.toml ]
    > Custom index.html: None
    > Serve index.html on 404: True

    > Build Features: [  ]
    > Build Profile: Debug
    > Build took: 6937 millis

cargo.toml 📦

dioxus = { git = "https://github.com/DioxusLabs/dioxus", features = ["desktop"], branch = "main"}

[Jared-Dahlke]

i am still getting this error on macbook. tried it on 2 different computers to make sure it's not my fault. I've tried tailwind and css and neither styles work.

[juroberttyb]

Having the same issue on Ubuntu. Can confirm @Libq2022's approach fixes it.

[DouFuJuShi]

I'm having this problem too.

[D0bhareach]

According to examples, I add this line to App component, and solve the problem. style { {include_str!("../assets/main.css")} }

The Answer gave me some Idea so:
in Dioxus.toml in Section style put style ["main.css"] and if main.css file is in assets directory it shall work without need to have style {} in fn main.

[prof79]

@D0bhareach there is no section style?

And from the wording, this seems to be for web platform not desktop. But glad you got it working, doesn't work for me.

[prof79]

Only way I got it working - take a look at the tailwind template result :D

You need your main() to be like this:

fn main() {
    // Init logger
    dioxus_logger::init(Level::INFO).expect("failed to init logger");

    let config = dioxus::desktop::Config::new()
        .with_custom_head(r#"<link rel="stylesheet" href="main.css">"#.to_string());

    LaunchBuilder::desktop().with_cfg(config).launch(App);

    //dioxus::launch(App);
}

However, there are styling issues apparently. Some stuff like header color seems to be missing, other stuff doesn't work - the links from the router are not styled properly because they rely on an ID links which is not set and better should be a class since multiple identical IDs would probably break stuff anyways ... There is also no indication of header.svg usage.

Btw since some time has passed, my results are dx --version -> dioxus 0.5.4, dependencies dioxus = { version = "0.5", features = ["desktop", "router"] } created by new, Windows 11.

[prof79]

Look what I've got 😁

I misunderstood the #links part, just a missing div I assume.

Buttons still look shite, might try to fix but my CSS is low.

HTH/enjoy

https://github.com/prof79/dioxus-vanilla-template

[ealmloff]

This should be resolved with the combination of fixes to manganis in DioxusLabs/manganis#30 and Head elements added in #2635.

You can install the git version of the CLI with:

cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli

and the git version of manganis and dioxus with:

manganis = { git = "https://github.com/DioxusLabs/manganis" }
dioxus = { git = "https://github.com/DioxusLabs/dioxus" }

Then you can include CSS in the head with a Link anywhere in a component:

use dioxus::prelude::*;

fn main() {
    launch(|| {
        rsx! {
            // Make the background red
            head::Link {
                href: manganis::mg!(file("./test.css")),
                rel: "stylesheet",
            }
        }
    });
}

Or other assets with the manganis macro:

use dioxus::prelude::*;

fn main() {
    launch(|| {
        rsx! {
            // Display an image
            img {
                src: manganis::mg!(file("./img.png"))
            }
        }
    });
}

[prof79]

Doesn't work at least not in Windows, but anyway. dx serve looks for the "compiled" .css and __assets_head.html in the project root folder, instead of the dist folder where the .exe and all other build artifacts go.

Point was that a template generating CLI should generate the full sample, not part of it. The vanilla CSS ships with assets/main.css but doesn't load/include that in code, what's the point of a template then ...

And main.css is still broken. I understand that styling is not the task of a library but if I include a CSS plus logo with minimal branding in a template, like a visit card, then the expectation is that this works out-of-the-box and looks acceptable.

[ealmloff]

Doesn't work at least not in Windows, but anyway. dx serve looks for the "compiled" .css and __assets_head.html in the project root folder, instead of the dist folder where the .exe and all other build artifacts go.

Point was that a template generating CLI should generate the full sample, not part of it. The vanilla CSS ships with assets/main.css but doesn't load/include that in code, what's the point of a template then ...

And main.css is still broken. I understand that styling is not the task of a library but if I include a CSS plus logo with minimal branding in a template, like a visit card, then the expectation is that this works out-of-the-box and looks acceptable.

Following these steps with the stable version of Dioxus did style things correctly on macos:

• install the latest stable version of the dioxus cli with cargo binstall dixous-cli
• create a new project with dx new myproject (desktop, vanillacss, no router)
• run the project with dx serve (not cargo run)

If you are using the git version of dioxus, you will need to install the git version of the CLI and manually update the code from the template with the changes I listed above or use this branch of the template. The new way to include assets with manganis::mg!(file("./local/path")) normalizes paths and checks the path at compile time

If this isn't working on windows, it would be very helpful to know what the current working directory of the desktop app is when you run it with dx serve (relative to the package root) and what path the webview tries to load for your asset. Absolute paths don't work on windows (#1814) which could be the issue or there could be a path separator issue

[prof79]

Damn, something went wrong with the scaling and cropped it - I tried to make a video in a dev VM because it is easier, sadly parts of the command window and the dx serve commands were cropped.

But the error message can still be seen at 01:26, also the effect of copying files around and launching the exe directly which is fine. dioxus-cli is probably not using something like a "working directory" for the process it spawns. For the .exe, the root is where itself resides (inside the dist folder). dx serve launches dist/<name>.exe but takes the project root for bundled files.

I also now understand that and why the router-template is broken in regard to styling. main.css was meant for another structure, the non-router code which has just links but no other functionality. The router-template more closely mimics a real app with functionality but neither includes the main.css nor does the main.css fit well - like h1 would be in regular black color, link flexbox should be row/horizontal with wrap instead of column and so on. For styling inspiration take a look at my repo above.

https://youtu.be/ZGh_uf4QrrM

Here a separate screenshot of the error message in full.

HTH