description: Set yourself up for success

Project Setup

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.

{% page-ref page="using-wasm-pack.md" %}

wasm-bindgen

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.

{% page-ref page="using-wasm-bindgen.md" %}

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.

{% page-ref page="using-cargo-web.md" %}

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