Hello World (C++ to WASM) using Bazel with Emscritpen
This repository demonstrates compiling C++ code with Bazel to WebAssembly. This repo no longer shows the build to pure JS as this led to very large libraries that were no where near as fast as their WASM counterparts.
Works with the following versions (as of 12/10/2022):
- bazel 5.3.2
- emscripten 3.1.23
Link to blog post
This repository has changed since the time of the article. This approach uses the official bazel + emscripten configuration which simplifies the codebase significantly (and it keeps everything in the bazel ecosystem).
We illustrate how to integrate multiple cc_library targets from different cpp
packages to build a JavaScript file containing WASM.
The generated outputs have been configured in 'single file' mode. This means
instead of handling a separate .wasm file, the wasm binary is encoded as a
base64 string and is embedded into a JS file along with emscripten's glue code.
The result is a single file that works in almost any environment provided it
supports WebAssembly without the need to host, serve, or initialize a .wasm
binary directly. The caveat is that the file size is 33% larger due to the
encoding.
Requirements
This project assumes you have bazel. You should install bazelisk.
Code structure
- hello-world holds all the sources
- hello-world/cpp C++ sources
- hello-world/javascript JavaScript sources
Compiling
First, clone the repository
git clone https://github.com/s0l0ist/bazel-emscripten.git
Now, you can simply run a script to build the WASM version:
npm run build
To bundle:
npm run rollup
To clean the repository:
npm run clean
Example
After you have built and bundled the code, you can run the demo:
npm run demowill execut the WASM code
npm run demo
> [email protected] demo
> RUN_DEMO=wasm node ./hello-world/javascript/examples/demo.js
Sat Dec 10 18:56:47 2022
Hello, World!