In exploring WASM’s enormous potential on the server side, we mentioned that one of WASM’s strengths is its support for influential new programming languages such as Rust. This article will show you how to write and execute a Wasm Rust program, code only.

Tim McCallum is a researcher and open source core developer at Second State.

The following is the text:

The demo was conducted using the Ubuntu Linux operating system and Google’s Chrome browser. Other combinations have not yet been tested.

Step 1: Install Apache2 and Rust

Run all of the following Ubuntu system setup commands (Update, install Apache2 and Rust)

sudo apt-get update
sudo apt-get -y upgrade
sudo apt-get -y install apache2
sudo chown -R $USER:$USER /var/www/html
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
rustup target add wasm32-wasi
rustup override set nightly
Copy the code

Step 2: Create a new Rust project

Create a quick Rust project

cd ~
cargo new --lib triple
cd triple
Copy the code

Step 3: Configure Rust for Wasm by adding the following configuration to the lib section of the ~ / triple Cargo. Toml file

[lib]
name = "triple_lib"
path = "src/triple.rs"
crate-type =["cdylib"]
Copy the code

Step 4: Specify the build target

Configure Rust by creating a new file in ~ /.cargo. Config and adding the following configuration

[build]
target = "wasm32-wasi"
Copy the code

Step 5: Write Rust

Write a quick Rust program and save it as Triple. Rs (in the ~ / Triple/SRC directory)

#[no_mangle]
pub extern fn triple(x: i32) -> i32 {
 return 3 * x;
}
Copy the code

Step 6: Build the Wasm code

Build the Rust code into Wasm, then copy the Wasm files to the Apache2 Web server area

cd~ / triple cargo build - release cp - rp ~ / triple/target/wasm32 wasi/release/triple_lib wasm/var/WWW/HTML/triple wasmCopy the code

Step 7: Create an HTML page

Create a new file called Triple. HTML in the var/WWW/HTML/directory and populate it with the following code.

<html>
	<head>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
		<script>
    if(! ('WebAssembly' in window)) {
      alert('you need a browser with wasm support enabled :(');
    }
(async () => {
  const response = await fetch('triple.wasm');
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);
  const instance = await WebAssembly.instantiate(module);
  const exports = instance.exports;
  const triple = exports.triple;
  var buttonOne = document.getElementById('buttonOne');
        buttonOne.value = 'Triple the number';
        buttonOne.addEventListener('click'.function() {
          var input = $("#numberInput").val();
          alert(input + ' tripled equals ' + triple(input));
        }, false); }) (); </script> </head> <body> <div class="row">
			<div class="col-sm-4"></div>
			<div class="col-sm-4">
				<b>Rust to Wasm in under 5 minutes - Triple the number</b>
			</div>
			<div class="col-sm-4"></div>
		</div>
		<hr />
		<div class="row">
			<div class="col-sm-2"></div>
			<div class="col-sm-4">Place a number in the box</div>
			<div class="col-sm-4"> Click the button</div>
			<div class="col-sm-2"></div>
		</div>
		<div class="row">
			<div class="col-sm-2"></div>
			<div class="col-sm-4">
				<input type="text" id="numberInput" placeholder="1", value="1">
				</div>
				<div class="col-sm-4">
					<button class="bg-light" id="buttonOne">Triple the number</button>
				</div>
				<div class="col-sm-2"></div>
			</div>
		</body>
		<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
	</html>
Copy the code

Step 8: Click the mouse to execute the written Rust code

In triple HTML page: http://12.345.456.78/triple.html access to the computer’s IP.

Then click the “Triple the Number” button.

The following prompts will be displayed.

Here we have completed a Rust + WebAssembly program, you also try!