Build, bundle & ship your Rust WASM application to the web

”Pack your things, we’re going on an adventure!”
~ Ferris

Star
Discord Chat Build Status
Explore More ⇩
Overview

Trunk is a WASM web application bundler for Rust. Trunk uses a simple, optional-config pattern for building & bundling WASM, JS snippets & other assets (images, css, scss) via a source HTML file.

Getting Started

Install

First, install Trunk via one of the following options.

# Install via homebrew on Mac, Linux or Windows (WSL).
brew install trunk

# Install a release binary (great for CI).
# You will need to specify a value for ${VERSION}.
wget -qO- https://github.com/thedodd/trunk/releases/download/${VERSION}/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-

# Install via cargo.
cargo install --locked trunk

Release binaries can be found on the Github releases page.

Next, we will need to install wasm-bindgen-cli. In the future Trunk will handle this for you.

cargo install wasm-bindgen-cli

If using wasm-opt, we will need to install wasm-opt which is part of binaryen. On MacOS we can install it with Homebrew:

brew install binaryen

Some linux distributions provide a binaryen package in their package managers but if it's not available, outdated or you're on Windows, then we can grab a pre-compiled release, extract it and put the wasm-opt binary in some location that's available on the PATH.

App Setup

Get setup with your favorite wasm-bindgen based framework. Yew & Seed are the most popular options today, but there are others. Trunk will work with any wasm-bindgen based framework. The easiest way to ensure that your application launches properly is to setup your app as an executable with a standard main function:

fn main() {
    // ... your app setup code here ...
}

Trunk uses a source HTML file to drive all asset building and bundling. Trunk also ships with a built-in sass/scss compiler, so let's get started with the following example. Copy this HTML to the root of your project's repo as index.html:

<html>
  <head>
    <link data-trunk rel="scss" href="path/to/index.scss"/>
  </head>
</html>

trunk build will produce the following HTML at dist/index.html, along with the compiled scss, WASM & the JS loader for the WASM:

<html>
  <head>
    <link rel="stylesheet" href="/index-c920ca43256fdcb9.css">
    <link rel="preload" href="/index-7eeee8fa37b7636a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
    <link rel="modulepreload" href="/index-7eeee8fa37b7636a.js">
  </head>
  <body>
    <script type="module">
      import init from '/index-7eeee8fa37b7636a.js';
      init('/index-7eeee8fa37b7636a_bg.wasm');
    </script>
  </body>
</html>

The contents of your dist dir are now ready to be served on the web.

Next Steps

That's not all! Trunk has even more useful features. Head on over to the following sections to learn more about how to use Trunk effectively.

Contributing

Anyone and everyone is welcome to contribute! Please review the CONTRIBUTING.md document for more details. The best way to get started is to find an open issue, and then start hacking on implementing it. Letting other folks know that you are working on it, and sharing progress is a great approach. Open pull requests early and often, and please use GitHub's draft pull request feature.

License


trunk is licensed under the terms of the MIT License or the Apache License 2.0, at your choosing.