Well, in the previous post, we've already discussed the What and Why of Webassembly.
I've decided to keep the WebAssembly series ongoing, where we'll be making cool projects and learning cool concepts along the way.
So, why wait?? Let's gear up and setup our environment for working on WASM apps. Note that throughout the series we'll use Rust as the programming language for writing our applications and Yew as the framwork. Also, we are using Yew for a couple of reasons: Intuitiveness, Readablity and its Rich ecosystem.
Setting up the Development Environment
- 1) Installing Rust from here
- 2) Installing the WASM Target. This is the compilation target to compile our rust code to WASM Modules.
rustup target add wasm32-unknown-unknown
- 3) Installing Trunk. Trunk is used for deployment and packaging for Yew Applications.
cargo install --locked trunk
Setting up the Yew project
Well, having the necessary stack installed, now let's start with a minimalistic application.
- 1) First off, lets initialize a project with cargo:
cargo new my-wasm-appYou can verify if the project is successfully initialized by runningcargo runand it should show the following output:Hello, World! - 2) Let's now add yew as a dependency in
Cargo.tomlfile (it is present in the project's directory.
[package]
name = "wasm-dev"
version = "0.1.0"
edition = "2021"
[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
- 3) Now, make changes to your main.rs file. It should look like:
use yew::prelude::*;
#[function_component]
fn App() -> Html {
html! {
<h1>Hello from rust in browser 🦀👋</h1>
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
- 4) Let's add a placeholder html file (index.html) in the root directory as well.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello Web in Rust!!</title>
</head>
<body>
</body>
</html>
5) Lets serve it and see the application in browser. By default, the port is 8080.
trunk serve6) Now, opening localhost:8080 in your browser window will display:
So, now our rust app is up and running and the dev environment is also setup successfully😀. Cheers! 🍻.
So this was it for this blog, now as I said we'll be continuing this series and every week we'll have a new blog. Next up, we'll be making a complete Social Media app in Rust and Yew and see many frontend concepts in action in Rust.
Adios Amigos 👋
Top comments (0)