Note: If you are new to Bazel, I recommend checking out one of my other Bazel articles first.
The tldr; is that Bazel is a language agnostic and incremental build toolchain, designed to be the single build tool for your entire tech stack. In my previous articles you will see examples of how to use Bazel to build full stack projects in Java, Typescript, Svelte, Angular, React, C#, Go and C++. In this article I will show an example of how to use Bazel to build C++ WebAssembly (Emscripten) and a Svelte web application.
My demo application is basic and experimental, but should at least highlight some of the benefits of using Bazel as your build tool in a mixed tech stack.
Let’s take a look at the C++ and Svelte code below:
I have intentionally kept the C++ code very simple, but I have more advanced C++ examples in my other articles if you are interested.
All this code does is add two numbers and return the result.
Svelte (App.svelte and add-service.js)
Integrating Emscripten with Bazel is pretty easy now that the Github repo includes a Bazel toolchain for pointing the C++ Bazel rules to Emscripten. My demo is just a slightly modified version of the original setup. In order to set the necessary compiler flags I have configured a new flag_set as seen below.
This part should be made more generic and parametrized, but as a POC it works just fine. Two important flags here are EXTRA_EXPORTED_RUNTIME_METHODS and EXPORTED_FUNCTIONS since these are needed to expose cwrap and my custom add_numbers method.
One the Svelte side I use my own experimental Bazel rules like so:
Finally I am setting up a simple Node/Express server for serving the Svelte/C++ application.
The code can be downloaded from Github
The end result is a Svelte application with WASM integration where Bazel is the single build tool for both languages. My current setup uses Docker for all Bazel dependencies, so there is no need to install anything manually.