Setup Leptos + Tauri App (CSR - Client Side Rendering)

this does not include setting up rust or vscode, leave a comment below for any requests you may have.

Initialize Project

this is just a matter of preference, but we'll be using a monorepo structure.

packages/leptos-app
.gitignore
Cargo.toml
rust-toolchain.toml

.gitignore

target/
**/*.rs.bk

Cargo.toml

[workspace]
members = ["packages/*"]
resolver = "2"

rust-toolchain.toml

[toolchain]
channel = "nightly"
targets = ["wasm32-unknown-unknown"]

Inside leptos-app

public/favicon.svg
src
Cargo.toml
index.css
index.html
tailwind.config
Trunk.toml

leptos-app/Cargo.toml


Setup Build Tool

cargo install trunk

alternatively you could use https://github.com/leptos-rs/cargo-leptos

Setup LeptosFMT

Use LeptosFMT to add formatting to leptos view! macro

cargo install leptosfmt

Add in .vscode/settings.json, recommend adding this setting only on workspaces using leptos

"rust-analyzer.rustfmt.overrideCommand": ["leptosfmt", "--stdin", "--rustfmt"]

Add rustfmt.toml to root

edition = "2021"

For more info visit: https://github.com/bram209/leptosfmt

Fix Issues

Wrong MIME type for CSS stylesheet, in app.js remove or comment this line

// <Stylesheet id="leptos" href="/pkg/tailwind.css"/>

References/Resources

https://leptos-rs.github.io/leptos https://github.com/leptos-rs/leptos/tree/main/examples https://github.com/friendlymatthew/leptos-csr-tailwind