A simple React application that calls a Rust(WebAssembly) function
- WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.
For this application, I used Rust and targetted WebAssembly as an output. There are 2 ways to use Rust in WebAssembly
- Create an entire application using Yew (a Rust Framework)
- Add WebAssembly inside an already existing application - *This is what is happening here
- Create a React App
npx create-react-app react-app
or if you have Vite
npm create vite
and follow the steps
- Inside your React App;
-
Create Rust library with
cargo
.cargo new wasm-lib --lib
-
Implement a Rust function that you want to call from JavaScript.
Do this inside
lib.rs
. -
Wrap the function with
wasm-bindgen
to export it as Wasm.wasm-bindgen
is Rust library that facilitate high-level interactions between Wasm and JavaScript. For example, you can call Rust(Wasm) from JavaScript, and vice versa. -
Build as Wasm library with
wasm-pack
.Add a build command to bundle the Rust lib into a package
"build:wasm": "cd wasm-lib && wasm-pack build --target web --out-dir pkg",
-
Call the Wasm function from the React app.
As seen in the
App.tsx
file
-
Prerequisites
-
Clone the project
-
Run;
npm install
oryarn install
-
Run
npm run build:wasm
oryarn run build:wasm
to create the Wasm Lib -
To view the application
npm run dev
oryarn dev
Viola !!