Wasm Builders

Paul Nwoko
Paul Nwoko

Posted on • Updated on

How I compiled a C program to WebAssembly and ran it in a Web browser

INTRODUCTION

WebAssembly is a new type of code that can be run in modern browsers and provides new features and major gains in performance.

It is not intended to be written by hand, rather it is designed to be an effective compilation target for source languages like C/C++, C#, Rust etc.

In this tutorial I will be demonstrating how to compile a C application to WebAssembly and also generate the JavaScript and HTML "glue" code using the Emscripten tool and how to run it on a Web browser.

SETTING UP EMSCRIPTING WORK ENVIRONMENT

Open your terminal, then copy and paste the following commands on your terminal. this is done once, skip if you have already done this setup before.

Get the emsdk repo cloned to a directory
git clone https://github.com/emscripten-core/emsdk.git
Enter fullscreen mode Exit fullscreen mode
Enter that directory
cd emsdk
Enter fullscreen mode Exit fullscreen mode
Fetch the latest version of the emsdk (not needed the first time you clone)
git pull
Enter fullscreen mode Exit fullscreen mode
Download and install the latest SDK tools.
./emsdk install latest
Enter fullscreen mode Exit fullscreen mode
Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest
Enter fullscreen mode Exit fullscreen mode
Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh
Enter fullscreen mode Exit fullscreen mode
Reference site: https://emscripten.org/docs/getting_started/downloads.html

COMPILING C CODE TO WASM

#include <stdio.h>
#include <string.h>

int main() {
  int x = 0;

  while (x <= 10)
  {
    printf("hello, world! : %d\n\r", x);    
    x++;
  }

  return 0;
}

Enter fullscreen mode Exit fullscreen mode

Open the terminal from the emsdk/ folder and run the commands below.

Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest
Enter fullscreen mode Exit fullscreen mode
Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh
Enter fullscreen mode Exit fullscreen mode

Here I compiled my C application to wasm and created HTML to run our code in, plus all the JavaScript "glue" code needed to run wasm in the Web environment.

In the terminal window, I enter the Emscripten compiler environment, I navigated to the directory I saved my C source file, and ran the following command:

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

-s WASM=1 — Specifies that we want wasm output. If we don’t specify this, Emscripten will just output asm.js, as it does by default.

-o hello.html — Specifies that we want Emscripten to generate an HTML page to run our code in (and a filename to use), as well as the wasm module and the JavaScript "glue" code to compile and instantiate the wasm so it can be used in the Web environment.
Emscripten will generate the following file in the C source directory as shown in the next section.

C SOURCE DIRECTORY WILL NOW CONTAIN A .html, .js, AND .wasm FILE AS SHOWN IN THE PICTURE BELOW

image

SETTING UP LOCAL SERVER ON MY PC

I’ll need a server to run the hello.html generated file on my browser.
My code editor of choice is vscode. So, I installed live server extension in my vscode editor program.
image
Reference site: https://github.com/ritwickdey/vscode-live-server

RUNNING ON A WEB BROWSER.

To run the wasm file on a browser, I opened the hello.html on vscode, right clicked on it and clicked on “open with live server” as shown below
image

THE PICTURE BELOW SHOWS MY C APPLICATION RUNNING ON A WEB BROWSER

image

Discussion (0)