This directory is designed to be used as a template for sketches. It contains a minimal set of scripts, config, and other boilerplate to create a WebAssembly web application with Rust,
wasm-bindgen, and Webpack.
You must have several tools installed in order to use this template:
- The Rust programming language: https://rustup.rs/
rustup target add wasm32-unknown-unknown
cargo install wasm-bindgen-cli
cargo install wasm-gc
wasm-opt: Clone https://github.com/WebAssembly/binaryen and follow install instructions there
- NodeJS and Yarn
If you prefer, you can build sketches via docker to avoid manually installing all of the dependencies. Simply run the
docker_build_all.sh script. Please note that the Docker image is very big (>1GB).
After you've copied the template to a new subdirectory, all you have to do to build the sketch is to install dependencies by running
yarn in the project root followed by running the
docker_build_all.sh if you're using Docker) script. This will handle compiling the Rust project into WebAssembly, running
wasm-bindgen-cli to generate TypeScript bindings, optimizing the generated Wasm binary, linking it into the frontend, and generating a static site output in the
/dist directory. You can then serve that directory with any simple HTTP server (such as
yarn install serve,
serve dist)) and view it in a web browser.
Please note that there is a library pulled in by the Rust part by default (
/common in the repository root) which contains various helpers and utility functions. If you move a copied sketch out of the
/sketches directory, it won't be able to find the library. You'll have to either tweak
engine/Cargo.toml and supply a new path to the directory or remove it if you don't need it.
The directory is mostly split into two parts: the Rust part (
engine directory) and the TypeScript part (
src directory). All of the code that gets compiled into Wasm goes in the
engine/src/ directory and gets called from
In addition to just the code, there are several config files you may want to edit:
package.jsonto add new scripts, JS dependencies, change the license, set your name as the author, etc.
index.hbsto edit the HTML that is generated
webpack.prod.jsto tweak the WebPack config
tslint.jsonto tweak the TypeScript compiler+linter
LICENSEif you'd prefer something other than the MIT license
.eslintrcto tweak the Eslint config (I used my personal preferences as a default)