Skip to content

Instantly share code, notes, and snippets.

@surma

surma/build.sh Secret

Last active January 1, 2023 04:10
Show Gist options
  • Save surma/9899231095ada390b2b178a72ff57aa3 to your computer and use it in GitHub Desktop.
Save surma/9899231095ada390b2b178a72ff57aa3 to your computer and use it in GitHub Desktop.
Example for a Emscripten project boilerplate
#!/bin/bash
set -e
export OPTIMIZE="-Os"
export LDFLAGS="${OPTIMIZE}"
export CFLAGS="${OPTIMIZE}"
export CPPFLAGS="${OPTIMIZE}"
echo "============================================="
echo "Compiling wasm bindings"
echo "============================================="
(
# Compile C/C++ code
emcc \
${OPTIMIZE} \
--bind \
-s STRICT=1 \
-s ALLOW_MEMORY_GROWTH=1 \
-s ASSERTIONS=0 \
-s MALLOC=emmalloc \
-s MODULARIZE=1 \
-s EXPORT_ES6=1 \
-o ./my-module.js \
my-module.cpp
# Create output folder
mkdir -p dist
# Move artifacts
mv my-module.{js,wasm} dist
)
echo "============================================="
echo "Compiling wasm bindings done"
echo "============================================="
<!doctype html>
Open the console to see the output from the wasm module.
<script type="module">
import wasmModule from "./my-module.js";
const instance = wasmModule({
onRuntimeInitialized() {
instance.sayHello();
}
});
</script>
#include <emscripten/bind.h>
using namespace emscripten;
int say_hello() {
printf("Hello from your wasm module\n");
return 0;
}
EMSCRIPTEN_BINDINGS(my_module) {
function("sayHello", &say_hello);
}
{
"name": "my-worldchanging-project",
"scripts": {
"build:emscripten": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh",
"build:app": "cp index.html dist/index.html",
"build": "npm run build:emscripten && npm run build:app",
"serve": "http-server -c0 dist"
},
"devDependencies": {
"http-server": "*"
}
}
@thgreasi
Copy link

Hi & thanks for this inspirational gist.
I would like to report that this atm isn't working for me and after an npm i and a docker pull trzeci/emscripten, when I run npm run build I get:

$ npm run build

> my-worldchanging-project@ build /home/teo/Desktop/wasm/cpp docker wasm gist
> npm run build:emscripten && npm run build:app


> my-worldchanging-project@ build:emscripten /home/teo/Desktop/wasm/cpp docker wasm gist
> docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh

/usr/local/bin/docker-entrypoint.sh: exec: line 35: wasm: not found

Maybe something changed in the base image. Could we use a specific base image tag?

@nop-ea
Copy link

nop-ea commented Jul 10, 2020

Hi, thanks for the great article!
I did not have any issues with the docker image but I had to change the index.html file in order to get it working.
It's basically just from the emscripten FAQ:

<!doctype html>
Open the console to see the output from the wasm module.
<script type="module">
  import wasmModule from "./my-module.js";

  // see https://emscripten.org/docs/getting_started/FAQ.html#how-can-i-tell-when-the-page-is-fully-loaded-and-it-is-safe-to-call-compiled-functions

  wasmModule().then((module) => {
    module.sayHello();
  });

</script>

@webmaster128
Copy link

I had to add --no-entry to the emcc call because there is no main function

wasm-ld: error: entry symbol not defined (pass --no-entry to suppress): main

@SuspendedPhan
Copy link

SuspendedPhan commented Apr 18, 2021

For Windows, this is my package.json / build:emscripten
"build:emscripten": "docker run --rm -v %cd%:/src trzeci/emscripten ./build.sh",

Also, I tried using the official emscripten/emsdk docker image and it was bunk. I got some BindingError when the runtime was trying to load the void type.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment