Project Setup

Set yourself up for success

Rust

First, you'll need Rust. To install Rust and the cargo build tool, follow the official instructions.

Wasm Build Tools

Extra tooling is needed to facilitate the interop between WebAssembly and JavaScript. Additionally, depending on the tool you choose, they can help make deployment and packaging much less of a headache by generating all of the wrapper JavaScript code necessary to run the .wasm file from your app in the browser.

wasm-pack

A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used together with the wasm-pack-plugin for Webpack.

Both a library and CLI tool and is also developed by the Rust / Wasm Working Group. It is a low level tool (used internally by wasm-pack) which facilitates JS / WebAssembly interoperability. We don't recommend using wasm-bindgendirectly because it requires hand-writing some JavaScript to bootstrap you WebAssembly binary. However, it is possible and more info can be found on the wasm-bindgen guide.

cargo-web

The preferred web workflow tool before the introduction of wasm-pack and wasm-bindgen. It is still the quickest way to get up and running and worth installing to run examples that haven't been migrated to support wasm-pack yet.

Comparison

wasm-pack

wasm-bindgen

cargo-web

Project Status

Actively maintained by the Rust / Wasm Working Group

Actively maintained by the Rust / Wasm Working Group

No Github activity for over 6 months

Dev Experience

Almost there! Requires webpack for best experience.

Barebones. You'll need to write some scripts to streamline your dev experience.

Just works! Batteries included, no external dependencies needed.

Local Server

Supported with webpack plugin

Not supported

Supported

Auto rebuild on local changes

Supported with webpack plugin

Not Supported

Supported

Headless Browser Testing

Supported

Supported

Supported

Supported Targets

  • wasm32-unknown-unknown

  • wasm32-unknown-unknown

  • wasm32-unknown-unknown

  • wasm32-unknown-emscripten

  • asmjs-unknown-emscripten

web-sys

Compatible

Compatible

Incompatible

stdweb

Compatible

Compatible

Compatible

Example Usage

Starter template

Build script for Yew examples

Build script for Yew examples