🦕🦀Writing WebAssembly in Rust and running it in Deno!
Michael "lampe" Lazarski
Posted on May 17, 2020
Requirements
You need to have to follow tools installed on your machine:
- rustc
- rustup
- cargo
- deno
These are standard things you usually use while developing Rust and working with Deno.
We now need to install wasm specific tools for rust.
First we need to add a compiler target like that:
rustup target add wasm32-unknown-unknown
We also need to the wasm-gc
tool
cargo install wasm-gc
I'm usuing Visual Studio Code for development and for this project I also installed the following extensions:
- Better Toml
bungcip.better-toml
- Rust
rust-lang.rust
Creating a rust lib
For the rust part, we need to create a small cargo lib.
We can do it with the following command:
cargo new --lib wasm_deno_example
cd wasm_deno_example
Next, we can open the project in VSCode
and we need to add the dependencies for wasm to our Cargo.toml
.
[lib]
crate-type =["cdylib"]
cdylib
makes our project usable with other languages like C or in our case wasm
. It also removes all the specific stuff that is needed for rust.
Our small rust function
We now will change the src/lib.rs
file to the following code:
#[no_mangle]
pub extern "C" fn square(x: u32) -> u32 {
x * x
}
This is a simple function that takes a number and returns a number.
Important here is that we add the extern
keyword so this function can be imported in our Deno code. When you are reading post liks this you should understand the x * x
😉
Compiling the rust to wasm
Now we can compile our rust code to wasm code.
We first need to compile build it with the following command:
$ cargo build --target wasm32-unknown-unknown
And we also need to strip it down from all the stuff we dont need. This will remove all the unneeded code for wasm
and make the file way smaller.
wasm-gc target/wasm32-unknown-unknown/debug/wasm_deno_example.wasm
That's it we now have a wasm
binary ready to be loaded into Deno and executed.
Run it with Deno
We now need to create a main.ts
. The name of the does not really matter it's just the one I will use here.
When we need to add the following code to the file.
const wasmCode = await Deno.readFile("./target/wasm32-unknown-unknown/debug/wasm_deno_example.wasm");
const wasmModule = new WebAssembly.Module(wasmCode);
const wasmInstance = new WebAssembly.Instance(wasmModule);
const {
square,
} = wasmInstance.exports;
console.log(square(1));
console.log(square(2));
console.log(square(3));
console.log(square(4));
Let us go through the steps.
- 1. Simple loads the raw file.
- 2. Makes a wasm module out of our file. So that we can work with it.
- 3. Creates an instance of our module so that we can use the functions.
- 4. We are importing our
wasm
square()
function into our Deno code. - 5. We are console logging the square number of different numbers.
Now let's execute this code with
deno run --allow-read main.ts
The output should be the following:
1
4
9
16
The Repo
You can find the code in the following Repo
Would you like to see more Deno content? Please let me know! I would like to make more posts and content about Deno!
👋Say Hello! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube
Posted on May 17, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.