Using wasm-bindgen

Install

  1. cargo install wasm-bindgen-cli

Build

First build the app which will generate a Wasm file. Suppose you want to build the app from build a sample app. The path of the outputted file would be target/wasm32-unknown-unknown/debug/yew-app.wasm. If you’ve named your crate something different, the name of the Wasm file won’t be yew-app.wasm and will instead be whatever you’ve set package.name to in your Cargo.toml file.

  1. cargo build --target wasm32-unknown-unknown

Then, run wasm-bindgen’s CLI. This command will produce a set of files in the --out-dir directory containing both your app’s compiled WebAssembly and a JavaScript wrapper which will load the Wasm binary and run it. This is necessary because browsers currently can’t load WebAssembly files directly instead requiring them to be loaded via JavaScript scripts. In the build a sample app example we want the files to be generated in the static folder (to do this you’ll need to pass --out-dir static as a flag to wasm-bindgen) and be called wasm.js and wasm_bg.wasm (you can do this by passing --out-name wasm as a flag to wasm-bindgen).

  1. wasm-bindgen --target web --out-dir static --out-name wasm target/wasm32-unknown-unknown/debug/appname.wasm --no-typescript

Serving your application

Feel free to use your preferred server. Here we use a simple python server to serve the app

  1. python -m http.server 8000

Supported targets

  • wasm32-unknown-unknown

Further reading