How to Compile C code into WebAssembly with Emscripten

In our previous entry in this series, we discussed what WebAssmbly was and the main benefits of using WebAssembly. Before we continue with this next part in the series, you’ll definitely want to catch up by first reading What Is WebAssembly and Why Do You Need It?

Once you’ve finished reading that piece, your first question is probably, “How do I start using WebAssembly?” That’s exactly what we’re going to address this time around. I’m going to demonstrate how to get started with this technology. I’ll be doing so on Ubuntu Linux 20.04 (which is also the same process for installing on macOS) and showing you how to run the always helpful “Hello, World!” application. It’s a simple example that will make it easy for you to get started with WebAssembly.

With that said, let’s get on with the steps toward your first WebAssembly app.

Install the Necessary Dependencies

Fortunately, there aren’t many dependencies to take care of. But before we can install the necessary components for WebAssembly, we’ll need to install git with the command:

sudo apt-get install git -y

Once git is installed, you’re ready to prepare your WebAssembly environment.

Install Emscripten

The next step is to use Emscripten, open source software that compiles projects written in C or C++ — or any language that uses LLVM — to browsers, Node.js, or wasm runtimes. The Emscripten SDK profiles all of the necessary tools (such as Clang, Python, and Node.js), as well as an updated mechanism to enable migrating to newer versions of the toolchain as they are released.

What we’re going to do is first compile the code within your user’s home directory. Next, we’ll make this a bit more useful by making it work within the Apache document root.

To download the Empscripten SDK, issue the command (from within your user’s home directory):

git clone https://github.com/emscripten-core/emsdk.git

Once the file download is complete, change into the newly-created directory with the command:

cd emsdk

Next, we’ll make sure our source is updated with the command:

git pull

Now, we can install the latest version of Emscripten with the command:

./emsdk install latest

This will take some time (as it must install a number of tools to your system). You should probably allow up to 30 minutes for this section to complete. Once the installation finishes, you can then activate the latest version with the command:

./emsdk activate latest

Finally, we’ll set the various environmental variables with the command:

source ./emsdk_env.sh

Create your Hello, World! Source

We’re now ready to finally create our Hello, World! application. We’re going to write this app in C, so for many, this might be old hat. Create the new file with the command:

nano hello_world.c

In that file, paste the following code:

#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, New Stack!\n");
}

Notice, the variation on “Hello, World!”?

Save and close the file with the keyboard shortcut [Ctrl]+[x].

Compile the Source Code

What we’re going to do now is use the emcc compiler to take our C code and turn it into a WebAssembly (WASM) HTML file. We’ll do that with the command:

emcc hello_world.c -s WASM=1 -o hello_world.html

Before we actually launch our code, we still need to install a web server and then move the code to our server document root. You could also avoid this by using Emscripten’s built-in HTTP server with the command:

emrun --no_browser --port 8080 hello_world.html

However, to use the above command, you’d have to recompile the code with:

emcc --emrun hello_world.c -s WASM=1 -o hello_world.html

Let’s do this the right way. Install the Apache webserver with the command:

sudo apt-get install apache2 -y

Once that installation finishes, start and enable the Apache webserver service with the commands:

sudo systemctl start apache2

sudo systemctl enable apache2

Next, move the emsdk folder into the Apache document root with the command:

sudo mv emsdk /var/www/html

Now, point your web browser to http://localhost/emsdk/hello_world.html and you should see Hello, New Stack! printed out (Figure 1).

If you’ve installed Emscripten on a server (without a GUI), you could point the web browser to http://SERVER/emsdk/hello_world.html (where SERVER is the IP address or domain of the server) and you’ll see the same results.

It’s important to note, however, once you move the emsdk folder into the document root, you won’t be able to compile new code into WebAssembly, as the environment variables will have changed. Because of this, you’ll want to start over with the process again, only this time using sudo (as your standard user won’t have permission to install within the /var/www/html/ directory). To do that, you would change to the root user with the command:

sudo -s

Once you’ve done that, you can then change into the document root with the command:

cd /var/www/html/

Remove the emsdk folder (if you already moved it into the document root) with the command:

rm -rf emsdk

And then start at the beginning, back with the command:

sudo git clone https://github.com/emscripten-core/emsdk.git

Go through the how-to once again, and you should be able to compile your code within the Apache document root and then launch it from your web browser.

And that’s the gist of how you compile C code into HTML using WebAssembly, with the help of Emscripten.