Skip to content

Instantly share code, notes, and snippets.

@surma

surma/build.sh Secret

Last active May 22, 2021
Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@thgreasi thgreasi commented May 27, 2019

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

This comment has been minimized.

Copy link

@nop-ea 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

This comment has been minimized.

Copy link

@webmaster128 webmaster128 commented Sep 17, 2020

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

This comment has been minimized.

Copy link

@SuspendedPhan 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