Preamble
Notice to Reader
Preface
Acknowledgements
About this Book
About the Author
If you get stuck or lose steam
Introductions
Programming
1. What it is
2. Why it's worth it
3. Why it's hard
4. Programmer Thinking
Languages
1. Meaning and Interpretation
Architectures
1. What is architecture
2. How your computer works
3. How the web works
4. The frontend-backend divide
5. General application architecture
6. Trade-offs between WASM and JavaScript
Tools and Languages
1. Web browsers
2. HTML
3. Bash and the terminal
4. Rust
5. Trunk
6. Cargo Leptos
Other Resources
1. Rust
Getting Started with Rust and Leptos
Setup
Architecture
1. Leptos Components - #[component]
2. Signals (reactive values) - create_signal
3. Effects (side effects) - create_effect
Generting UI
Introduction
Setup
1. Trunk
Introspection and Debugging
HTML
The view! macro
Leptos Components
Variables and the view! macro
Component properties
Component dynamic content separation
Loops and the <For /> view! macro tag
Conditional display and the <Show> view! macro tag
Tables and data sets
Reserved Tags
Client Side
Introduction
Setup
1. Trunk
Introspection and Debugging
Responding to Events
1. Witnessing events
2. Reacting to events with event handlers
3. Event handers as props
4. Event Bubbling and Signal Generics
5. Preventing bubbling and default event behaviours
6. Custom Events
7. Custom Event Data
8. Custom Event Module
9. Custom Event Module with Data
10. Custom Event Data with Signals and Effects
11. Custom Event Data with Signals and Effects - Part 2
Sending Data
1. Forms
2. Acton Forms
Sending and Receiving Data
1. Fetch
2. Web Socket
Saving/Persisting Data
Server Side
Introduction
Setup
1. Cargo Leptos
Introspection and Debugging
Responding to Requests
1. Get Method Forms
2. Post Method Forms
3. Accessing Request Data
4. Responding Parts
5. 1. Headers
  2. Cookies
  3. Body
6. HTML Requests - Routes
7. Data Requests - Server Functions
8. Behaviour Request - Server Actions
Client Server Communication
1. Server Functions
2. <Transition>
3. <ActionForm>
4. Web Sockets
Saving/Persisting Data
Architecture
Scope and Runtime
Passing data around
Deployment
Render.com
Fly.io
Cloudflare Workers
Desktop Applications
Tauri
TUI
Tutorial Projects
Blog
RPG Initiative Tracker
Chat
Quick Reference
Structuring Applications
Documenting Applications
Testing Applications
Recipes
Appendix
Common Application Behaviours
1. Form Validation
Common Design Patterns
1. Event Sourcing
Common Problems and Concerns
1. Quality
2. 1. UI Response Time
  2. Bundle Size
  3. Partial Hydration
3. Consistency
4. 1. Offline Support and Data Sync
  2. Observability and Logging

Configuring Cargo Leptos

Cargo.toml

Configuration for Cargo Leptos can be done in the cargo.toml. We do this by adding package metadata to leptos.

[package.metadata.leptos]

# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name

output-name = "start-axum"

# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.

site-root = "target/site"

# The site-root relative folder where all compiled output (JS, WASM and CSS) is written

# Defaults to pkg

site-pkg-dir = "pkg"

# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css

style-file = "style/main.scss"

# Assets source dir. All files found here will be copied and synchronized to site-root.

# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.

#

# Optional. Env: LEPTOS_ASSETS_DIR.

assets-dir = "public"

# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.

site-address = "127.0.0.1:3000"

# The port to use for automatic reload monitoring. Make sure this port is not the same as the port used in site-address.

reload-port = 3001

# [Optional] Command to use when running end2end tests. It will run in the end2end dir.

# [Windows] for non-WSL use "npx.cmd playwright test"

# This binary name can be checked in Powershell with Get-Command npx

end2end-cmd = "npx playwright test"

end2end-dir = "end2end"

# The browserlist query used for optimizing the CSS.

browserquery = "defaults"

# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head

watch = false

# The environment Leptos will run in, usually either "DEV" or "PROD"

env = "DEV"

# The features to use when compiling the bin target

#

# Optional. Can be over-ridden with the command line parameter --bin-features

bin-features = ["ssr"]

# If the --no-default-features flag should be used when compiling the bin target

#

# Optional. Defaults to false.

bin-default-features = false

# The features to use when compiling the lib target

#

# Optional. Can be over-ridden with the command line parameter --lib-features

lib-features = ["hydrate"]

# If the --no-default-features flag should be used when compiling the lib target

#

# Optional. Defaults to false.

lib-default-features = false

Error: Address already in use

Interrupting Cargo Leptos may result in the port being bound after Cargo Leptos terminates. Using cargo leptos watch again will yield an error message stating:

thread 'main' panicked at 'error binding to 127.0.0.1:3000: error creating server listener: Address already in use (os error 48)',

You will receive the same error if your site-address is using the same port as the reload-port.