🦕🦀Writing WebAssembly in Rust and running it in Deno!
Tags: deno, rust, webassembly, beginners
Published: 2020-05-17 13:17:02

### 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:
```bash
rustup target add wasm32-unknown-unknown
```
We also need to the `wasm-gc` tool
```bash
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:
```bash
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`.
```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:
```rust
#[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:
```bash
$ 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.
```bash
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.
```ts
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
```bash
deno run --allow-read main.ts
```

The output should be the following:
```bash
1
4
9
16
```
## The Repo

You can find the code in the following [Repo](https://github.com/lampewebdev/wasm_deno_example)

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](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)