Too Slow / Development Flow

[omani]

hi guys,
Im checking out the tailwind_axum example from the leptos repo and I noticed that everytime I make a change I have to wait approx. 30 seconds to recompile the wasm (cargo leptos watch).

this is unacceptable imo. how do you guys deal with this? what does your workflow look like?

[gbj]

There are going to be a variety of different answers to this question, any or all of which might be helpful in your situation:

1. Use cargo leptos watch --hot-reload, which sends patches directly to the browser in many cases without needing to recompile. This is probably more reliable with 0.6 than with 0.7-beta (the main branch). I am not sure hot-reload works directly with the Tailwind that's built into cargo-leptos, YMMV.
2. Use another styling option that doesn't require recompiling your application; for example, if you use CSS or SASS and edit the styles the stylesheet can be reloaded directly in the browser without needing changes in your Rust code; stylance is a Rust library that allows scoped styles + CSS reloading, etc.
3. This may be a hardware limitation you have with compiling Rust; if I make changes in the tailwind_axum example I see ~3-4s incremental builds without other changes. See some suggestions for speeding up Rust compile times here.

Ultimately it's a compiled language and you're compiling for two separate targets (native binary and WASM), so you will never see the kind of immediate reload loop you can get with any JS library.

[omani]

the --hot-reloadflag does not work somehow:

Error: expected identifier, found keyword where is what I get when I run cargo leptos watch --hot-reload. Im on nightly.

[gbj]

Like I said above, "This is probably more reliable with 0.6 than with 0.7-beta (the main branch)." Are you testing it with 0.7/the main branch, or with 0.6 (and the example from the leptos_0.6 branch)?

[omani]

ah that worked. the flag is being recognized now. but it still throws an error:
Reload internal error: sending css reload but no css file is set.

and continues to compile WASM.
do I have to change something in the example for this to work?

[gbj]

Hm let's see...

Looks like for hot-reloading to work you need to edit Cargo.toml to:

1. add the nightly feature to leptos
2. add style-file = "style/tailwind.css" underneath tailwind-input-file = "style/tailwind.css"

(And make sure you remove or edit the rust-toolchain.toml file so it uses nightly)

With those changes I can see this sort of responsiveness, where it will both update the class in the HTML and reload the Tailwind file while it is still recompiling Rust in the background

Screen.Recording.2024-09-03.at.4.06.02.PM.mov

[omani]

With those changes I can see this sort of responsiveness, where it will both update the class in the HTML and reload the Tailwind file while it is still recompiling Rust in the background

I did the changes and it does exactly that but the first hot-reload of the css file makes my background white (even though I changed it to a lighter blue in the example file from-blue-400 to-blue-500). only after the WASM compilation completes, I get the correct version of the css. something seems to be wrong on my end.

I see the change in devtools (/pkg/tailwind.css?version=120) when hot reloading. the file does seem to look correct.

[omani]

unfortunately I dont know how to fix this. any color change pushed to the browser (css) becomes white in color first, then after the WASM compiled, I get the correct color. I dont know if this is a bug or something on my side.

thanks for your help.

[gbj]

Not sure. I definitely don't see that behavior. (See video above)

[omani]

Ive set up https://github.com/leptos-rs/start-axum-0.7 with tailwind and now everything works. also since Im new to leptos I decided I should start with the new syntax (breaking changes since 0.7.0-alpha), so this is a good way for me.

Im happy. thank you.