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 JavaScript code necessary to load and run your app’s .wasm binary in a browser.

trunk

A tool practically made for building Yew apps. It can build any wasm-bindgen based app and its design is inspired by rollup.js. With Trunk you don’t need to have Node.js installed or touch any JavaScript code for that matter. It can bundle assets for your app and even ships with a Sass compiler.

All of our examples are built with Trunk.

Getting started with trunk

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. The primary purpose of wasm-pack is building Wasm libraries for use in JavaScript. Because of this, it can only build libraries and doesn’t provide useful tools like a development server or automatic rebuilds.

Get started with wasm-pack

Comparison

trunkwasm-pack
Project StatusActively maintainedActively maintained by the Rust / Wasm Working Group
Dev ExperienceJust works! Batteries included, no external dependencies needed.Bare-bones. You’ll need to write some scripts to streamline the experience or use the webpack plugin.
Local ServerSupportedOnly with webpack plugin
Auto rebuild on local changesSupportedOnly with webpack plugin
Asset handlingSupportedOnly with webpack plugin
Headless Browser TestingIn ProgressSupported
Supported Targets
  • wasm32-unknown-unknown
  • wasm32-unknown-unknown
Example UsageSample appStarter template