Leptos SSR from zero
I have been using Leptos for a few months, and I think it is a very promising Web Framework, and an excellent way to start learning about Rust and WASM, so, I decided to write this little tutorial.
1. Install dependencies and other things
The first step, is also the most obvious one, we need to install Rust (if you already have it, you can skip this part). And for that, the way I recommended is with the Rustup Installer:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Now, we need to install cargo-leptos, with this tool we will be able to run some commands for Leptos:
cargo install cargo-leptos
Then, we need to do some additional stuff (just a few extra steps):
- Add the Wasm32 target to our Rust compiler (this allows Rust to build wasm files):
rustup target add wasm32-unknown-unknown
- Install
cargo-generate:
cargo install cargo-generate
- We also should install dart-sass:
npm install -g sass
2. Generate, build and run
To generate our project, we just need to run the following command (my-project is the project name, but you can change it if you want):
cargo leptos new --git https://github.com/leptos-rs/start-axum --name my-project
It will ask you if you want to Use nightly features?, but just answer No for now.
Now, at last, we should be able to run our project:
cd my-project
cargo leptos watch # or `cargo leptos serve`
The first build is also the slowest one. When we see the following message: listening on http://127.0.0.1:3000, that means is up and running.
Now, we can go to this address in our web browser: http://127.0.0.1:3000. And we should see something like this:
We can see the source code of this home page in this path: src/app.rs.
Our home page is in the HomePage() component, and we can see it has a variable count that is a signal with an integer value (0). And every time we click the button, it calls the method on_click, and this increment the count value by one.
I will write more about the components and signals in another post. But that it for now.
If you want more information: you can check the official website: https://leptos.dev/. You can also check the project template repository https://github.com/leptos-rs/start-axum.