Building a front app with Rust (yes you can) and Yew

JS/TS is killing me. Now that I use Rust everyday, I have to try Yew, a front framework for Rust to create WASM apps, I spotted it long time ago but it wasn’t mature enough for my use case… guess what — now is the time ! The project is still alive and well !

Rust fullstack dev it is.

Part 1: Setup and basics

Let’s start with the basics, how to install it.

cargo new project

cargo add yew # (Using cargo-edit)

Create file app.rs:

Obviously I have to call it in my main.rs

And… yeah, that’s it. In this example I added Header and Root in app.rs, (we will come to it), and I must say this is a really simple setup, the hardest part would be handlings assets and js libs in the build process to finish the setup. So how did I do ?

I created a small ruby script, why ? because no JS, thanks. I could have used yarn or something like this to handle the build pipeline, but I’d rather write it in Ruby since I know it well and it is not JS + it is a good language to write scripts. You can write it in your favorite language, it doesn’t matter here, the goal is just to make system calls to compile Sass files, create files, move files and so on… I used Filewatcher (a ruby gem (to watch files duh)) to listen to changes on my Sass files and recompile them when needed, the Sass files are compiled, minified and appended to app.css and external libs like Material, same thing in libs.css.

The file structure looks like this:

I like to put style.scss where it belongs, for example, `coupons` is a container, listing every `coupon`, the list…