How to get Bazel and Emscripten to compile C++ to WebAssembly or JavaScript

Spoiler: Use Emscripten with Bazel. Shortcut to the github repo.

What’s out there?

• WebAssembly Text Format (WAT)
• Node Addons (N-API)
• LLVM
• Wasmer
• Cheerp
• Emscripten

Getting started

How do I convert an existing C++ library?

configure

make

cmake

Bazel 💚

— a fast, scalable, multi-language, and extensible build system.

First steps

Note: I’ve taken a lot of inspiration from the TensorFlow.js project on how they managed to get it working. My changes revolve around compiler/linker flags, showing how to output both JS and WASM, and most important — using the latest emscripten release 🎉!

git clone --recurse-submodules https://github.com/s0l0ist/bazel-emscripten.git
cd bazel-emscripten

yarn install

yarn submodule:update

yarn em:update
yarn em:init

The layout

1. .bazelrc

    — describes default commands for building a target

2. WORKSPACE

    — defines our external dependencies

hello-world/

1. BUILD

    — empty file so bazel doesn’t complain

2. deps.bzl

    — bazel toolchain dependencies (emsdk)

hello-world/

1. cpp/

    — holds the simple C++ sources

2. javascript/

    — holds all JS related material

3. javascript/bindings/

    — holds all emscripten bindings

4. javascript/src/

    — holds all JS wrappers

5. javascript/scripts

    — the handy build scripts to shorten our cli statements

6. javascript/toolchain

    — the heart of the Bazel + Emscripten configuration

The code 💻

//////// cpp/localtime.hpp ////////
#ifndef LIB_LOCAL_TIME_H_
#define LIB_LOCAL_TIME_H_
namespace HelloWorld {
class LocalTime {
        public:
        /*
        * Prints the current time to stdout
        */
        static void Now();
    };
} // namespace HelloWorld
#endif

//////// cpp/localtime.cpp ////////
#include <ctime>
#include <stdio.h>
#include "localtime.hpp"
namespace HelloWorld  {
void LocalTime::Now() {
        std::time_t result = std::time(nullptr);
        printf("%s", std::asctime(std::localtime(&result)));
    }
} // namespace HelloWorld

//////// cpp/greet.hpp ////////
#ifndef LIB_GREET_H_
#define LIB_GREET_H_
#include <string>
namespace HelloWorld {
class Greet {
        public:
        
        /*
        * Greets the name 
        */
        static std::string SayHello(const std::string &name);
    };
} // namespace HelloWorld
#endif

//////// cpp/greet.cpp ////////
#include <string>
#include "greet.hpp"
namespace HelloWorld {
std::string Greet::SayHello(const std::string &name) {
        return "Hello, " + name + "!";
    }
} // namespace HelloWorld

Emscripten bindings 🦾

LocalTime::Now

console.log

Greet::SayHello

console.log

//////// javascript/bindings/hello-world.cpp ////////
#include <emscripten/bind.h>
#include "hello-world/cpp/greet.hpp"
#include "hello-world/cpp/localtime.hpp"
using namespace emscripten;
using namespace HelloWorld;
EMSCRIPTEN_BINDINGS(Hello_World) {
    class_<Greet>("Greet")
        .constructor<>()
        .class_function("SayHello", &Greet::SayHello);
      
    class_<LocalTime>("LocalTime")
        .constructor<>()
        .class_function("Now", &LocalTime::Now);
}

Building 🏗

bazel build -c opt //hello-world/cpp/...

.bazelrc

.wasm

yarn build:js
// or
yarn build:wasm
// or both
yarn build

Note: In 

.bazelrc

 there are a few defined compiler flags that are present for both the JS/WASM builds geared towards production use. You may feel free to modify the flags as necessary, but I wanted to show what’s possible here.

If you do want to have full control over instantiating the WASM to reduce the bundle size, you may generate a pure WASM build by adding the link flag 

-s STANDALONE_WASM=1

 inside the starlark file, 

hello-world/javascript/BUILD

.

Bundling 📦

javascript/src/implementation

<iostream>

Generate the bundles

yarn rollup

hello-world/javascript/bin/*

hello-world/javascript/src/*

hello-world/javascript/dist/

js

wasm

ES6 module

UMD

hello-world/javascript/dist/<js|wasm>/<es|umd>/*

Let’s run 🏃

yarn demo:js

yarn demo:wasm

javascript/html/index_wasm.html

Conclusion

Credits

1. schoppmp for help with optimizing the bazel configuration
2. TensorFlow.js for the initial bazel configuration