Build and run

This tutorial uses Vite for the frontend build because its configuration is compact and its development server makes the required cross-origin isolation headers easy to configure. The same orx-parallel-wasm package also provides integrations for Webpack, Rspack, and Rollup; the next section links to equivalent examples and explains what those integrations handle.

At this point the project has this source layout:

par_wasm/
├── app/
│   ├── index.html
│   ├── package.json
│   ├── style.css
│   ├── tsconfig.json
│   ├── vite.config.ts
│   └── src/main.ts
├── computation/
│   ├── Cargo.toml
│   └── src/lib.rs
└── wasm_bindings/
	├── Cargo.toml
	└── src/lib.rs

The lock files are generated by Cargo and npm.

The pkg/ and dist/ directories are generated during the build.

Build

From the app directory (par_wasm/app), install the npm dependency and build the app:

cd app
npm install
npm run build

The build script performs three steps:

1. build:wasm invokes orx-parallel-wasm with wasm_bindings/ as its input and writes the generated JavaScript and WebAssembly files to app/pkg.
2. typecheck runs TypeScript without emitting JavaScript.
3. Vite bundles the page, TypeScript, generated WASM module, and worker into app/dist.

The Vite plugin compiles the bindings for wasm32-unknown-unknown with atomics and shared memory enabled. The first build may download the WASM tooling used by the package.

The development server sends these headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

They are required for SharedArrayBuffer and browser threads.

Run

Start Vite from the same directory:

npm run dev

Open the URL printed by Vite and try it out with different number of threads:

• The page reports the number of initialized threads when the worker is ready.
• If initialization fails, check that both cross-origin isolation headers are present; opening index.html directly does not provide them.

Source code of the app built by following this tutorial can be found here.