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 that directory

cd emsdk

Fetch the latest version of the emsdk (not needed the first time you clone)

git pull

Download and install the latest SDK tools.

./emsdk install latest

Make the "latest" SDK "active" for the current user. (writes .emscripten file)

./emsdk activate latest

Activate PATH and other environment variables in the current terminal

source ./emsdk_env.sh

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;
}

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

Activate PATH and other environment variables in the current terminal

source ./emsdk_env.sh

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

-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

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.

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

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