Compile with WebAssembly on Windows

The base instruction is placed over http://webassembly.org/getting-started/developers-guide/ Unfortunately at this moment (17th of December 2016) It does not cover an instruction for Windows.

One option could be to use Windows Subsystem for Linux :) If this is not an option then remaining options are:

1. Compile the latest Emscripten locally
2. Use pre-compiled version

Preparations

Required tools:

• git
• python2.7 (not required to be in system path)
• Visual Studio 2015

Step by step:

1. Pull the latest Emscripten SDK from repository https://github.com/juj/emsdk
   This is crucial, because a linked SDK on the WebAssembly page and on the Emscripten page will point to the latest released SDK – what is 1.35.0, what is lacking a required functionality.

   git clone git@github.com:juj/emsdk.git
   cd emsdk

2. Configure EMSDK to use python2.7
   Emscripten requires Python 2.7 to run. If you use primarily python 3 in system, then it’s required to install python 2.7 inside emsdk. Well.. this process also requires python 2.7. In my case I have installed python 2.7 in C:\Python27

   c:\Python27\python.exe emsdk install python-2.7.5.3-64bit

   After this, it’s not needed to refer to C:\Python27 because every time when you call emsdk.bat it chooses one installed inside c:\emsdk\python\2.7.5.3_64bit

3. Update list of available packages
   ⚠️ Absolutely important issue is do not call emsdk update. It pulls the latest released version, so it will downgrade version what we cloned. ⚠️Instead of that execute:

   emsdk update-tags

4. Next, install the latest nightly build. You can find a list after typing:

   emsdk list
   

   # output
   ...
   The following tools can be compiled from source:
              clang-tag-e1.36.14-32bit
              clang-tag-e1.36.14-64bit
              clang-incoming-32bit
              clang-incoming-64bit
              clang-master-32bit
              clang-master-64bit
              emscripten-tag-1.36.14-32bit
              emscripten-tag-1.36.14-64bit
              emscripten-incoming-32bit
              emscripten-master-32bit
              emscripten-incoming-64bit
              emscripten-master-64bit
              binaryen-master-64bit
   The following precompiled SDKs are available for download: (Run "./emsdk update" to pull in the latest list)
            sdk-nightly-1.36.14-2016_12_15_18_56-64bit
            sdk-nightly-1.36.14-2016_12_16_13_45-64bit
            sdk-1.30.0-64bit
            sdk-1.34.1-64bit
            sdk-1.35.0-64bit
   ...

   ⚠️ Still important, don’t run emsdk update, it will downgrade SDK ⚠️

Installation

Choose either pre-compiled, or the latest version from incoming branch

1) Compile the latest Emscripten locally

ℹ️ This process takes 20-40 minutes

1. Compile incoming branch

   emsdk install sdk-incoming-64bit --vs2015 --build=Release

2. Activate

   emsdk activate sdk-incoming-64bit

2) Use pre-compiled release

In my case I decided to install the latest nightly version: sdk-nightly-1.36.14-2016_12_15_18_56-64bit

1. Installation

   emsdk install sdk-nightly-1.36.14-2016_12_15_18_56-64bit

   This will install tools:
   – emscripten-llvm-e1.36.14-2016_12_15_18_56
   – clang-nightly-e1.36.14-2016_12_15_18_56-64bit
   – node_4.1.1_64bit
   – python-2.7.5.3-64bit – It’s already installed, so it will skip this one
   – portable_jre_7_update_45_64bit

2. Activation
   ℹ️ It’s required to update system PATH in current console session

   emsdk activate sdk-nightly-1.36.14-2016_12_15_18_56-64bit

Testing

1. Create test source codeCreate a file hello.cpp with content

   #include <iostream>
   
   int main(int argc, char** argv) {
       std::cout << "Hello from WebAssembly";
       return 0;
   }

   Execute command

   emcc hello.cpp -s WASM=1 -o hello.html

   You might notice, that before actual compilation the tool will compile ‘binaryen‘, this is totally fine. It will happen only with first compilation.

2. Run a test
   For this it’s required to either create a http server with command:

   start "" python -m SimpleHTTPServer

   Next, open a browser that supports WebAssembly and navigate to localhost:8080/hello.html

   As an alternative, you can use emrun:

   start "" emrun hello.html

   It will run a server and start a default browser. For more information how to use it, see emrun --help

   ℹ️ Command start “” program …  opens new console, without blocking current one.

Effect

Was it useful? Don’t forget to leave a Kudos down here!