Introduction

WebAssembly (Wasm) is a binary instruction format designed for safe and fast execution on the web. Rust is a systems programming language that is well-suited for compiling to WebAssembly due to its performance and safety guarantees. This tutorial will guide you through the steps to set up WebAssembly using Rust.

Prerequisites

Before you begin, ensure you have the following installed:

• Rust: Install Rust using the official installer. You can get it from Rust Installation.
• wasm-pack: This is a tool that helps build Rust-generated WebAssembly packages. You can install it using the following command:
cargo install wasm-pack
• Node.js and npm: If you plan to use a web framework or serve your files locally, make sure Node.js and npm are installed. You can download it from Node.js.

Creating a New Rust Project

To get started, create a new Rust project using Cargo, Rust's package manager.

This command will create a new directory called wasm_example with a basic library structure.

Configuring the Project for WebAssembly

Open the Cargo.toml file in your project directory and add the following lines to configure it for WebAssembly:

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
                

The crate-type line specifies that we are building a dynamic library, while wasm-bindgen is a library that facilitates communication between Rust and JavaScript.

Writing Your First WebAssembly Function

Now, let's write a simple Rust function that we can call from JavaScript. Open src/lib.rs and replace its contents with the following code:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}
                

This function takes a name as input and returns a greeting string.

Building the WebAssembly Package

To compile your Rust code to WebAssembly, run the following command in your project directory:

This command will compile your Rust code to WebAssembly and generate the necessary JavaScript bindings.

Setting Up a Simple Web Server

Now that we have compiled our code, let's set up a simple web server to test our WebAssembly module. You can use http-server, a simple Node.js server:

Navigate to the pkg directory created by wasm-pack and start the server:

By default, the server will run on http://localhost:8080.

Creating an HTML File to Use the WebAssembly Module

Create an index.html file in the pkg directory with the following content:

    
    
    
    


    
WebAssembly with Rust