Next: , Up: Deployment   [Contents][Index]


4.1 Web deployment

On the client-side web, JavaScript is the host environment for Wasm modules and the WebAssembly API is used to load and run them. Hoot includes a JavaScript library, reflect.js (see JavaScript reflection) that wraps the WebAssembly API and furthermore can inspect Scheme values and call Scheme procedures. This chapter documents deploying Hoot artifacts and using the reflection API to run Scheme in the browser.

In order to run Hoot binaries in the browser, a web server needs to host a copy of the Hoot JavaScript runtime.

The runtime files can be found in the $prefix/share/guile-hoot/ directory, where $prefix is the directory where Hoot was installed on your system. This is typically /usr or /usr/local on Linux distributions such as Debian, Ubuntu, Fedora, etc.

The runtime files can be copied to the current directory like this:

cp $prefix/share/guile-hoot/$version/reflect-js/reflect.js .
cp $prefix/share/guile-hoot/$version/reflect-wasm/*.wasm .

Don’t forget to upload the Wasm files for the Scheme programs, too!

A bit of JavaScript code is needed to bootstrap a Scheme program using the reflect-js/reflect.js library (see JavaScript reflection). For example, here’s an example boot.js file that runs the Scheme program hello.wasm and prints the return values:

window.addEventListener("load", async () => {
  const results = await Scheme.load_main("/hello.wasm");
  console.log(results);
});

The Scheme namespace is defined in reflect.js. See JavaScript reflection for more information.

To run boot.js on a web page, add <script> tags for it and reflect.js:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="/reflect.js"></script>
    <script type="text/javascript" src="/boot.js"></script>
  </head>
  <body>
    <h1>Hello, Hoot!</h1>
  </body>
</html>