Building a WASM binary manually

Here are the complete commands for building a WASM binary with this library:

export RUSTUP_TOOLCHAIN=nightly
export RUSTFLAGS="-C target-feature=+atomics,+bulk-memory,+mutable-globals"
wasm-pack build \
    -t no-modules \
    -d <WASM_OUTPUT_PATH> \
    --no-typescript -- \
    -Z build-std=std,panic_abort

Continue reading for more details.

flutter_rust_bridge_codegen expects a certain setup that is modeled after the wasm_bindgen raytracing example and by extension consumes the wasm_bindgen library and its ecosystem. The requirements are:

• The standard library being built with the panic_abort feature
• The library and standard library being built with the target features atomics, bulk_memory and mutable_globals
• wasm-pack called with -t no-modules (to be relaxed in the future)

Note that these features also represent a hard requirement on your users' browser versions.

Furthermore, this library does not support JavaScript runtimes as of writing.

WASM_OUTPUT_PATH refers to the output directory of the WASM module. If running Flutter, this is usually web/pkg.

Setting up the web server

Once you have built your binary and are ready to deploy, you will also need to configure your web server to respond with these two headers:

• Cross-Origin-Resource-Policy set to same-origin
• Cross-Origin-Embedder-Policy set to require-corp¹

Here is a sample web server that accomplishes this task (excerpt from flutter_rust_bridge_serve):

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart';
import 'package:shelf_static/shelf_static.dart';

void main() async {
    final root = "/* directory containing index.html */";
    final staticFilesHandler = createStaticHandler(root, defaultDocument: 'index.html');
    final handler = const Pipeline().addMiddleware((handler) {
        return (req) async {
            final res = await handler(req);
            return res.change(headers: const {
                'Cross-Origin-Opener-Policy': 'same-origin',
                'Cross-Origin-Embedder-Policy': 'require-corp',
            });
        };
    }).addHandler(staticFilesHandler);
    await serve(handler, 'localhost', 8080);
}