Getting started with WebAssembly

Getting started with WebAssembly

This page provides step-by-step instructions to compile a simple program directly to WebAssembly. Create a "Hello World" with WebAssembly.

This page provides step-by-step instructions to compile a simple program directly to WebAssembly.

Windows 10 installation

The easiest way to get set up on Windows 10 is to use one of the Linux subsystem installations available in the Microsoft Store.

To get the installation working:

  1. Install the Windows Subsystem for Linux using the instructions here: https://docs.microsoft.com/en-us/windows/wsl/install-win10. Any flavour of Linux should work, however these instructions assume you install the Ubuntu Linux distribution.
  2. After you’ve set up the Linux subsystem, from the Linux command line you need to install python 2.7. Type the following commands:* sudo apt update * sudo apt upgrade * sudo apt install python2.7 python-pip
  3. Install the Emscripten SDK by following the instructions below under the heading ‘Downloading the Toolchain’

Windows 7 and earlier installation

Windows versions prior to 10 don’t support the Linux susbsytem. To install on earlier versions of Windows do the following:

  1. Go to the Emscripten SDK page at https://github.com/emscripten-core/emsdk
  2. Click the ‘Clone or Download’ button
  3. Choose the ‘Download ZIP’ option
  4. Unpack the downloaded ZIP file somewhere on your file system
  5. From a command shell, go into the directory where you unpacked the ZIP file using cd “where-you-unpacked-the-zip”
  6. Run these commands from the command line:* emsdk update * emsdk install latest * emsdk activate latest * emsdk_env.bat

Note: If you are using Visual Studio 2017, emsdk install should be appended with the argument --vs2017.

Mac OS X and Linux installation

If you’re on OS X or Linux, SDK installation should be straightfoward by opening a shell terminal and following the instructions below under the next heading ‘Downloading the Toolchain’.

Downloading the Toolchain

A precompiled toolchain to compile C/C++ to WebAssembly is easily obtained via GitHub.

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest

Compiling the Toolchain for unsupported Linux distributions or just for fun

If you are running a Linux distribution for which Emscripten toolchain is not available precompiled (currently Ubuntu 16.04 works best), or if you want to build the whole toolchain from source, Emscripten SDK can also be used to drive the build. The required steps are as follows.

Prerequisites

To compile to WebAssembly, some prerequisite tools are needed:

After installing, make sure that git, cmake and python are accessible in PATH. Technically, CMake and a system compiler may not be needed if using a precompiled toolchain, but development options may be a bit limited without them.

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
$ ./emsdk activate --build=Release sdk-incoming-64bit binaryen-master-64bit

Environment setup after installation (non Windows 7 installs)

After installing or compiling the SDK, the installation is complete. To enter an Emscripten compiler environment in the current command line prompt after downloading a precompiled toolchain or building your own, type

$ source ./emsdk_env.sh --build=Release

This command adds relevant environment variables and directory entries to PATH to set up the current terminal for easy access to the compiler tools.

Compile and run a "Hello World" with WebAssembly

We now have a full toolchain we can use to compile a simple program to WebAssembly. There are a few remaining caveats, however:

  • If we want Emscripten to generate an HTML page that runs our program, in addition to the Wasm binary and JavaScript wrapper, we have to specify an output filename with a .html extension.
  • Finally, to actually run the program, we cannot simply open the HTML file in a web browser because cross-origin requests are not supported for the file protocol scheme. We have to actually serve the output files over HTTP.

The commands below will create a simple “hello world” program and compile it. The compilation step is highlighted in bold.

$ mkdir hello
$ cd hello
$ cat << EOF > hello.c
#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}
EOF
$ <b>emcc hello.c -o hello.html</b>

To serve the compiled files over HTTP, we can use the emrun web server provided with the Emscripten SDK:

$ emrun --no_browser --port 8080 .

Once the HTTP server is running, you can open it in your browser. If you see “Hello, world!” printed to the Emscripten console, then congratulations! You’ve successfully compiled to WebAssembly!

WebAssembly

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is WebAssembly? WebAssembly Hello World

What is WebAssembly? WebAssembly Hello World - WebAssembly (wasm) is going to be the next big thing. WebAssembly hello world would show you how to get started with WebAssembly and write your first hello world program in it and execute it with JavaScript. WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine.

WebAssembly Tutorial: WebAssembly Debugging

In this WebAssembly tutorial: you'll see the current state of interactive debugging for WebAssembly and useful tips on how to do better. Debugging WebAssembly, as with any code, is critical for both developers and implementers.

What is WebAssembly? WebAssembly Hello World

WebAssembly (wasm) is going to be the next big thing. WebAssembly hello world would show you how to get started with WebAssembly and write your first hello w...

What is WebAssembly? Is WebAssembly Really the Death of JavaScript?

In this WebAssembly tutorial, you will look at what WebAssembly is, the future of JavaScript, Is WebAssembly Really the Death of JavaScript? Why WebAssembly matters and crucially what it means for JavaScript and the future of web development.

WebAssembly Tutorial: Build Your Own WebAssembly Compiler

This WebAssembly tutorial explains how to build your own WebAssembly compiler. Why do we need WebAssemby? Why create a WebAssembly compiler? Colin Eberhardt looks at some of the internals of WebAssembly, explores how it works “under the hood”, and looks at how to create a (simple) compiler that targets this runtime.