C emscripten WASM: Hello World

Question

For the past few months I have tried without success to create a web assembly hello world. I have read 7 tutorials, watched 4 YouTube videos, and read a good deal of the documentation for both WASM and emscripten. For the purposes of this question, I'll focus on the emscripten documentation tutorial, since hopefully this will be familiar to the most people. As per the tutorial I have:

hello_world.c

#include <stdio.h>

int main() {
    printf("hello world\n");
    return 0;
}

Compiled with:

./emcc tests/hello_world.c

And successfully tested with

node a.out.js

I have also generated an html output with:

./emcc tests/hello_world.c -o hello.html

And (if I serve with Python) this is successfully tested in the browser.

At this point the tutorial seems to think that it is done, and moves off to more advanced topics like file handling. But this can't be right: the generated html is over 1000 lines long and causes apparently hundreds of side effects (expected behavior is simply a blank page which, if you inspect element, should show a console log of 'hello world'. But this html file renders a full webpage).

The reason that I want a hello world example is to test that wasm is working, and be able to then start modifying and expanding the example. If I wanted to modify this webpage, I would have no idea where to start in this gargantuan HTML file.

Edit: Maybe I should just add, I know there is also a large js 'glue code' file generated. I'm quite happy with this, if there is a way to hook into the glue. I don't currently know how this html, or the scripts in it, is interfacing with the js glue.

So my question is, what do I need to do in order to have an HTML file with a couple of lines of html and a small inline script that calls the main function, which then logs hello world to the console? Thank you.

Wasm, of course, runs in a browser loaded by a web page. In many apps, the web page shows something related to the app. In simple tutorials the page can be blank. You're right that wasm tooling is basically hideous. — O. Jones
What I want is of course for the web page to show something related to the app that I define. Typically, it is easier to expand a minimal example, than to edit a full blown existing app. Do you know of any such minimal tutorials that are up-to-date and work? — Neil

zakki zakki · Accepted Answer · 2020-01-29T09:46:07

emcc -s MINIMAL_RUNTIME=1 generates small output.

To modify html, copy emscripten/X.Y.Z/src/shell_minimal_runtime.html to myshell.html and use it as custom shell:

emcc tests/hello_world.c -o hello.html --shell-file myshell.html

If you need standard runtime, emcc ... --shell-file .../emscripten/src/shell_minimal.html may work.

C emscripten WASM: Hello World

1 Answers