Wasm Builders 🧱

Cover image for Let's do a "Hello world" program using C and compile it to WebAssembly
Shraddha Vijay Inamdar
Shraddha Vijay Inamdar

Posted on • Updated on

Let's do a "Hello world" program using C and compile it to WebAssembly

Tool Setup

We need to get emsdk which is Emscripten's tool to get the compiler and all the tools you need. We will focus on how to install it for Linux, but you can find documentation for other OSs here.

It's easy to get Emscripten SDK from github using git.

Step 1:

Clone the emsdk repo : git clone https://github.com/emscripten-core/emsdk.git and enter inside the directory emsdk.

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
Enter fullscreen mode Exit fullscreen mode

Step 2:

Next, we will install the necessary tools like Java, Python using the below command.

./emsdk install latest
Enter fullscreen mode Exit fullscreen mode

Step 3:

To activate the latest SDK, execute the following command in your terminal

./emsdk activate latest
Enter fullscreen mode Exit fullscreen mode

Step 4:

To activate PATH and other environment variables, run the following command in your terminal.

source ./emsdk_env.sh
Enter fullscreen mode Exit fullscreen mode

To permanently add this path for EMSDK, use the below command :

Note : Make sure to give the proper to the emsdk_env.sh file

echo 'source "/home/kali/emsdk/emsdk_env.sh"' >>$HOME/.bashrc 
Enter fullscreen mode Exit fullscreen mode

Now the installation of emsdk is completed and you can now compile C code.

The process of compiling C to WebAssembly helps us to understand a basic process of how to use WebAssembly.

  • Write code in a language
  • Compile to “.wasm“
  • Load “.wasm“ in a browser
  • Use WebAssembly JavaScript API to compile and instantiate the module
  • Call exported WebAssembly functions in JavaScript

Let’s create a simple program like the one below :

#include <stdio.h>

int main() {
  printf("  Hello there! You made it to first step towards learning WebAssembly! Cheers!! :) \n ");
  return 0;
}
Enter fullscreen mode Exit fullscreen mode

Now, we have to compile it using the below command :

emcc hello.c -o hello.html -s WASM=1
Enter fullscreen mode Exit fullscreen mode

After compilation, if you have tried to open the file hello.html with certain browsers, you may get an error message instead of output that you want.

That is because the operation of loading the WASM module is asynchronous, and some browsers (for security reasons) do not allow you to do this if the URL is of the kind file://path/to/file/file.html.

In order to solve that issue you can run a local server this way using the below command :

python -m http.server 8080
Enter fullscreen mode Exit fullscreen mode

Go to the browser and type in localhost:8080 or http://127.0.0.1:8080/

Now you should be able to see other three files in the same directory: Hello.html, Hello.js and Hello.wasm.

  • Hello.wasm is the file that contains the Webassembly code (the compiled code).
  • Hello.js is the "glue code" needed to allow JavaScript to call and "communicate" with the WASM compiled code. Emscripten generates this automatically and it is absolutely needed in order to run WASM modules. If you compile without the -s WASM=1 flag this file will contain also the content of hello.wasm (but makes no difference in reality).
  • Hello.html is just a web page automatically generated that shows the result of your Webassembly code in a user friendly way. You don't actually need this file, but it is a cool way to quickly visualize what are you doing. You can tell Emscripten not to generate it by just using -o Hello.js instead of -o Hello.html (everything else remains as before).

Output :

I

Top comments (0)