Leptos is becoming best rust web framwork and How to set up

[GreatGreatGreg]

I have written 30+ thousands lines code of rust web app. I have transferred some part of it into Leptos. It works great. And feel Leptos is going to be the best web framework in Rust ecosystem. Here are the thoughts:

1. Fastest: I used several rust web framework. The result showed that Leptos is the fastest one among all rust web frameworks. And third party js-framework-benchmark shows the same . This is the most important for a product.

2. HotReload: Cargo-Leptos. When we develop the web app. The Instant UI preview feedback is most inportant. I tried the same feature of several other frameworks. It shows that Leptos is already the fastest one.

3. TailwindCSS Intellisense: TailwindCSS makes the web app development feel like developing a Flutter app. It makes css develop very easily. It already became the most weekly downloaded CSS. However TailwindCSS Intellisense does not work on some rust web frameworks due to rust micro and own DSL. TailwindCSS Intellisense works on Leptos perfectly.

4. Web standard. I can copy most of JSX code into Leptos project and do little twist work then it works easily on Leptos. Its hard to fit into some own DSL framework. There is a lot of work for that fitting. Easy fit-in eliminates a lot of work.

5. Desktop+potential App with tauri. Tauri-Leptos-Example

6. No Nodejs installation needed on computer. It is good part for those not wanting to use JS.

7. Vscode Remote-ssh: I use Mac for development while the code sits in Ubuntu. I split vscode into 2 parts at the main window. Left windows is for coding. The right part is simple browser/VS Browser. When I code with Leptos at the left window the preview result shows at the right window instantly. This is great developing experience.

Thank you the Leptos team

[GreatGreatGreg]

Here is what I did:

1. Install Cargo-Leptos.
   Create a new project:

cargo leptos new

Leptos setting added to Cargo.toml:

[package.metadata.leptos]
# Path, relative to root, to generat rust code to
gen_file = "src/server/generated.rs"
# Path to the source index.html file
index_file = "index.html"
# [Optional] Files in the asset_dir will be copied to the target/site directory
assets_dir = "assets"
# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
end2end_test_cmd = "npx playwright test"
# On which port to serve the client side rendered site (when using --csr option)
csr_port = 3000
# The port to use for automatic reload monitoring
reload_port = 3001

[package.metadata.leptos.style]
# Main style file. If scss or sass then it will be compiled to css.
# the parent folder will be watched for changes
file = "style/output.css"
# A https://browsersl.ist query
browserquery = "defaults"

NOTE:

change this part to tailwindcss "output.css"

file = "style/output.css"

2 ports to forward:

ports: 3000, 3001

2. Optionally if using nightly version, add "rust-toolchain.toml" file at the same path as Cargo.toml

# rust-toolchain.toml
[toolchain]
channel = "nightly"
# channel = "stable"
# EOF

3. TailwindCSS Intellisense setting:
   Install TailwindCSS executable . So we dont need Nodejs runtime installation on our computer any more.

put the following setting into vscode settings.json:

  "emmet.includeLanguages": {
    "rust": "html",
    "*.rs": "html"
  },
  "tailwindCSS.includeLanguages": {
      "rust": "html",
      "*.rs": "html"
  },
  "files.associations": {
      "*.rs": "rust"
  },
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "on",
    "strings": true
  },
  "css.validate": false,

Add rust files watching at tailwind.config.js :

  content: { 
    files: ["*.html", "./src/**/*.rs"],
  },

Write TailwindCSS code at "input.css" file at the same path as Cargo.toml and put the output.css into "style/output.css". Then let TailwindCSS excutable work at the terminal.

tailwindcss -i ./input.css -o ./style/output.css --watch

4. Start Cargo-Leptos. I waited for 1-2 minutes for the very first startup. From the second time, it will start to work quickly.

cargo leptos watch --csr

5. Install Tailwind CSS Intellisense

6. Install "VS Browser" extension, a browser at the right window.
   Allow vscode Ports forward: 3000, 3001.

Then everything should work.

[sturmenta]

how to install and configure tailwindCSS executable?

• tailwind docs

mkdir ~/.tailwindcss; cd ~/.tailwindcss/
mkdir bin; cd bin
# this works for arm64, check docs for other arch
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

• add to your .zshrc or .bashrc:

# tailwindcss
export PATH=$PATH:~/.tailwindcss/bin

now you can use tailwindcss

tailwindcss --help

[Kaligraphy247]

I take the same steps except I keep the tailwindcss binary in the project, but then add it to .gitignore. Works either way.

[moaz-mokhtar]

Very thankful @sturmenta
I would to share commands in case it is Ubuntu x64 like my device.

• I did follow below steps:
  Note: Check link for all executable files https://github.com/tailwindlabs/tailwindcss/releases/

mkdir ~/.tailwindcss; cd ~/.tailwindcss/
mkdir bin; cd bin
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
mv tailwindcss-linux-x64 tailwindcss

To make command tailwindcss working, you should follow:

# add in file ~/.bashrc
export PATH=$PATH:~/.tailwindcss/bin

source ~/.bashrc

Then:

❯ tailwindcss --help

tailwindcss v3.4.4

Usage:
   tailwindcss [--input input.css] [--output output.css] [--watch] [options...]
   tailwindcss init [--full] [--postcss] [options...]

Commands:
   init [options]

Options:
   -i, --input              Input file
   -o, --output             Output file
   -w, --watch              Watch for changes and rebuild as needed
   -p, --poll               Use polling instead of filesystem events when watching
       --content            Content paths to use for removing unused classes
       --postcss            Load custom PostCSS configuration
   -m, --minify             Minify the output
   -c, --config             Path to a custom config file
       --no-autoprefixer    Disable autoprefixer
   -h, --help               Display usage information

[gbj]

Thanks for writing this up -- this is awesome! I'm not a Tailwind user myself but we've gotten a bunch of questions about it, so people have definitely saved this for including in docs in the future. Really appreciate it and glad to hear your enthusiasm.

[joksas]

Does anyone have experience with formatting content within view! macros in their editors? Equivalent dicussion for Yew didn't provide satisfactory answers/solutions.

[erlandsona]

Is there an option to use Rust native bindings for the dom elements? Sorta like VDom libs?
Then rust-analyzer could just treat the dom as regular rust functions?
This is how Elm works and it means there's no discrepancies like className or Components being "pure" or "impure" because everything is just a pure function.

[gbj]

Is there an option to use Rust native bindings for the dom elements?

Yes you can use a builder pattern with Leptos, which will lead rust-analyzer to format it as normal code. It's not super well documented but you can see an example here.

[erlandsona]

Ah okay interesting... is there a way to make cx: Scope a part of the return type ala the Reader monad? This would fix having to pass it around as an argument everywhere, and individual components could pull from it as needed, sorta like React hooks but I imagine it'd work better in a Rust context 🤔

[gbj]

Ah okay interesting... is there a way to make cx: Scope a part of the return type ala the Reader monad?

This would definitely make the ergonomics for the builder pattern more convenient at the cost of making it possible for you to write incorrect code in certain cases — since cx is so cheap to pass around and so omnipresent, and since 90% of people are using the view macro, we opted for the less-convenient-but-more-correct option.

(When I say "incorrect": if you don't need to pass in the cx, it's completely possible to write code with the builder pattern in which the element is created but, for example, an attribute that should be reactive doesn't update because you've actually disposed of the scope. It would be relatively hard and somewhat strange to end up in this situation, but very possible and very hard to debug. We just make it impossible instead.)

[Kaligraphy247]

If I understood you correctly, you might be looking for leptosfmt

[Arcitec]

Thanks for this conversation. It's very interesting to learn about Leptos and its ability to be used for live previews while coding, excellent syntax highlighting with Tailwind CSS extension, and being able to bundle it with Tauri.

Something else I can add to this is that Leptos and Dioxus, two Rust web frameworks, both beat the hell out of React JS (and Rust's Yew framework too):

(Source: https://krausest.github.io/js-framework-benchmark/index.html)

Despite using WebAssembly, and despite being large and advanced component rendering frameworks, Leptos and Dioxus are close to native vanilla Javascript (no-framework) DOM performance. That's an amazing achievement.

I will have to judge Dioxus vs Leptos for myself but I can already say that it appears that Leptos has much more enthusiasm. What are are your thoughts on Dioxus, @GreatGreatGreg, did you (or anyone else here) have a chance to evaluate it?

[ChrisB9]

I both really like dioxus and leptos, and the contributors of dioxus @Demonthos are really showing lots of enthusiasm. I just think they havent "taken off" in publicity

[moaz-mokhtar]

In latest benchmark, I found Leptos have some bad numbers like below, why do you think that?

Link: https://krausest.github.io/js-framework-benchmark/2023/table_chrome_120.0.6099.62.html

[gbj]

See here for some discussion. Basically there are pervasive differences between WASM and JS libraries because of the way memory is measured. I'd recommend comparing like with like: so compare Leptos to Dioxus, Sycamore, and Yew on the memory management metrics.

I've seen some improvements in memory use when running this benchmark for early versions of Leptos 0.6.

[ntrp]

I like the framework so far but the only big problem is setting up rust_analyzer.. If I understand correctly there is no way of having intellisense for both csr and ssr at the same time. How do you guys deal with that issue?

[aperepel]

FWIW, I've been leveraging https://codeium.com/ for months. While it's not a solution for the CSR/SSR rust-analyzer config issue, it kinda side-steps the problem altogether and will try and work with you within the current context of the code being edited. It's free for individual developers (and uses OpenAI apis from what I can tell).

Of course, the usual caution about AI assistant over-eagerness at times and hallucinations for LLMs, treat it as your tool to get the job done faster rather than 'outsourcing' the effort to it.

[Wcubed]

I'm currently using leptos in vscode (or actually vscodium, but that works the same). What I did was add "rust-analyzer.cargo.features": "all" to the configuration. I haven't used it too long yet, but it seems like it is now checking both the client and server code.

[reneherrero]

New to the wasm/leptos scene, forgive me if this is a newbie question...

I've gone through the docs, but there's no mention on debugging? Is it possible using vscode?

Thanks,

PS: great work, I love what I'm seeing

[gbj]

See this recently-added example: https://github.com/leptos-rs/leptos/tree/main/projects/counter_dwarf_debug