How To Setup Webassembly in a Windows PC?

The get started instructions from Webassembly.org are confusing for a windows user that wants to try Webassembly. The instructions are geared towards someone that wants to build the Emscripten compiler, and not for someone that wants to use the compiler. The instructions are for the Linux environment with side notes for Windows.

CMake and the Host compiler(Visual Studio) are not needed.

What is Really Needed to Build a Webassembly Application in Windows?

  • Git
  • Python

That’s it.

Verify Whether Git is Already Installed and Operational.

No one deserves to go through a Git for Windows installation twice

No one deserves to go through a Git for Windows installation twice, here is how we can check if Git is working in our PC. Launch a DOS window and issue the command to request its version:


C:\>git --version
git version 2.15.1.windows.2

If you see a Git version as shown above, then you are good to go because it means Git is already installed and in the PATH.

If it fails as follows:


C:\>git --version
'git' is not recognized as an internal or external command,
operable program or batch file.

Then you need to go through the pleasure of installing Git for windows.

Installing Git for Windows:

  • Download Git for windows. Git being git, even the download page is confusing, it offers me a 32bit version, which is not what I want. Click on Save File if you have a 32bit PC. If you have a 64bit PC, as I do, click cancel to the 32bit offer and click on 64-bit Git for Windows Setup. If you don’t know if you have a 32bit or 64bit PC, check this Microsoft article out.
    git-windows-download
  • Installing git. Double click on the file you have just downloaded, mine was Git-2.15.1.2-64-bit.exe, then be prepared to face a long 12 installation steps asking you all sort of information. Not asking for your SSN yet.
  • Click Next on License:
    git-windows-installation-license
  • Select Destination Location. Make sure this is the place you want Git to get installed and click next:
    git-windows-installation-location
  • Select components. I left as it was suggested to me because I can’t understand half of the things that is in there. Why would I uncheck the git LFS support? It might be important for perhaps 0.001% of users, but this installation makes all of us look at this option and then wonder, anyway, just click Next.
    git-windows-installation-select-components
  • Select start menu folder. Leave as it is and click Next. Lets follow the great advice from the Git installation to place the Git start shortcut inside the Git folder:
    git-windows-installation-start-menu
  • Choosing the default editor used by Git. I hope I will never need to use any of these options. I changed the radio box to Nano just because every time I, accidentally, get into VI, I can’t exit from it, it just ruins my day, believe it or not I need to do a Google search and look for how to exit VI, which is so popular that Google now presents the instruction without requiring you to go to any other website. Oh, for the record, it is very easy: ESC -> :q! -> ENTER, what would make someone come up with this sequence? Nano is not a whole lot better, but a little bit more familiar. Besides I don’t have another option as Notepad++ is not an available option. Again, lets hope we don’t ever need to use it.
    git-windows-installation-default-editor
  • Adjusting the PATH environment. We need git to be in the PATH.
    git-windows-installation-path
  • Choosing the SSH executable. I left the default option that I believe(hope) will work.
    git-windows-installation-ssh
  • Choosing HTTPS transport backend. Again left the default.
    git-windows-installation-HTTPS
  • Configuring the line ending conversions. Just left the default.
    git-windows-installation-line-ending
  • Configuring the terminal emulator to use with Git Bash. I changed the default to Use Windows default console window despite the warnings that this would be an inferior choice, it might integrate better with the Windows environment. I don’t know if it makes any difference, besides I did not like the warning message for the MinTTY option: Windows console programs must be launched via ‘winpty’…
    git-windows-installation-terminal-emulator
  • Configuring extra options. These options that are too random to have its own window! I have no clue why I would change any of them. What would be the benefits or problems caused by these options. FINALLY we got the install button and not a NEXT button! Just click Install.
    git-windows-installation-extra-options
  • Completing the Git Setup Wizard. We don’t want to see the release notes nor launch Git Bash, we want to exit this installation as soon as possible, just click on Finish:
    git-windows-installation-Finish
  • Verifying if Git is operational. Go to Verify if Git is already installed and operational.

Verifying if Python is Already Installed and Operational

Launch a DOS window and issue the command to request its version:


C:\>python --version
Python 2.7.14

If you see a Python version as above you are good, it means Python is installed and in the PATH.

If it fails as follows:


C:\> python --version
'python' is not recognized as an internal or external command,
operable program or batch file.

Or if its version is not 2.7.x then you need to install Python for Windows.

Installing Python for Windows

The official Get started instructions from webassembly.org  asks us to install Python version 2.7.x. I have disobeyed this instruction and have installed the latest Python version, which at this time is 3.6.4. Newer versions are supposed to be better and, should have bug fixes, new features, and should be backward compatible right? It did not work. You can skip what happened to me when trying the latest Python and go directly to the installation of Python 2.7.14:

First the installation froze on me, this appears to be a year old bug that is still around, it happens on Windows 7 when trying to install for all users.

Then, once I passed the freeze issue by installing for the current user only, one of the commands that installs the Emscripten Toolchain fails:


D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk>emsdk install latest
Fetching all tags from Emscripten Github repository...
Done. No tagged releases available.
Fetching all tags from Binaryen Github repository...
Traceback (most recent call last):
  File "D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\\emsdk", line 2335, in <module>
    sys.exit(main())
  File "D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\\emsdk", line 2106, in main
    fetch_emscripten_tags()
  File "D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\\emsdk", line 1555, in fetch_emscripten_tags
    binaryen_tags = sorted(binaryen_tags, key=version_key)
TypeError: '<' not supported between instances of 'map' and 'map'

Big dependency here, lets install Python 2.7.14

Installing Python 2.7.14 for Windows

Go to Python installation page and look for the 2.7.14 section:

python-windows-installation-2.7.14

I suppose that the first option is for 32bit PCs, just because the other option have a 64 number in their description. You need to figure out if your PC is 32bit or 64bit first. I chose the Windows x86-64 MSI installer, downloaded the 19MB python-2.7.14.amd64.msi file and executed it.

Downloading and Installing Emscripten Toolchain

OK, if you are still with me, then the requirements for the Emscripten installation are supposed to be met.

This step creates the emsdk folder and stores the Emscripten Toolchain into it. Open a DOS window and go to the folder where the Toolchain folder will be created. Your folder will probably be different than mine, take that into consideration when looking at the DOS windows that follow.

First lets clone emsdk and get into the created emsdk folder:


D:\My Documents>d:

D:\My Documents>cd D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources

D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources>git clone https://github.com/juj/emsdk.git
Cloning into 'emsdk'...
remote: Counting objects: 1109, done.
remote: Compressing objects: 100% (18/18), done.
remote: Total 1109 (delta 20), reused 35 (delta 19), pack-reused 1072
Receiving objects: 100% (1109/1109), 559.42 KiB | 637.00 KiB/s, done.
Resolving deltas: 100% (700/700), done.

D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources>cd emsdk

D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk>

Second lets install the latest, this step takes quite a long time:


D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk>emsdk install latest
Fetching all tags from Emscripten Github repository...
Done. 115 tagged releases available, latest is 1.37.28.
Fetching all tags from Binaryen Github repository...
Done. 42 tagged Binaryen releases available, latest is 1.37.28.
Fetching all precompiled Nightly versions..
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/llvm-nightlies-32bit.txt from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/nightly/win_32bit/index.txt
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/llvm-nightlies-64bit.txt from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/nightly/win_64bit/index.txt, 19124 Bytes
 Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/emscripten-nightlies.txt from https://s3.amazonaws.com/mozilla-games/emscripten/packages/emscripten/nightly/win/index.txt, 19887 Bytes
 Fetching all precompiled tagged releases..
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/llvm-tags-32bit.txt from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/tag/win_32bit/index.txt
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/llvm-tags-64bit.txt from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/tag/win_64bit/index.txt, 1035 Bytes
 Installing SDK 'sdk-1.37.26-64bit'..
Installing tool 'clang-e1.37.26-64bit'..
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/emscripten-llvm-e1.37.26.zip from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/tag/win_64bit/emscripten-llvm-e1.37.26.zip, 197939142 Bytes
 Unpacking 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/emscripten-llvm-e1.37.26.zip' to 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/clang/e1.37.26_64bit'
Done installing tool 'clang-e1.37.26-64bit'.
Installing tool 'node-8.9.1-64bit'..
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/node-v8.9.1-win-x64.zip from https://s3.amazonaws.com/mozilla-games/emscripten/packages/node-v8.9.1-win-x64.zip, 16940179 Bytes
 Unpacking 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/node-v8.9.1-win-x64.zip' to 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/node/8.9.1_64bit'
Done installing tool 'node-8.9.1-64bit'.
Installing tool 'python-2.7.5.3-64bit'..
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/python_2.7.5.3_64bit.zip from https://s3.amazonaws.com/mozilla-games/emscripten/packages/python_2.7.5.3_64bit.zip, 21059543 Bytes
 Unpacking 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/python_2.7.5.3_64bit.zip' to 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/python/2.7.5.3_64bit'
Done installing tool 'python-2.7.5.3-64bit'.
Installing tool 'java-8.152-64bit'..
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/portable_jre_8_update_152_64bit.zip from https://s3.amazonaws.com/mozilla-games/emscripten/packages/portable_jre_8_update_152_64bit.zip, 69241499 Bytes
 Unpacking 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/portable_jre_8_update_152_64bit.zip' to 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/java/8.152_64bit'
Done installing tool 'java-8.152-64bit'.
Installing tool 'emscripten-1.37.26'..
Downloading: D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/1.37.26.zip from https://github.com/kripken/emscripten/archive/1.37.26.zip
Unpacking 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/zips/1.37.26.zip' to 'D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/emscripten/1.37.26'
Done installing tool 'emscripten-1.37.26'.
Done installing SDK 'sdk-1.37.26-64bit'.

Third and last, lets activate the latest:


D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk>emsdk activate latest
Writing .emscripten configuration file to user home directory C:\Users\family/
The Emscripten configuration file C:\Users\family\.emscripten has been rewritten with the following contents:

import os
LLVM_ROOT='D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/clang/e1.37.26_64bit'
EMSCRIPTEN_NATIVE_OPTIMIZER='D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/clang/e1.37.26_64bit/optimizer.exe'
BINARYEN_ROOT='D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/clang/e1.37.26_64bit/binaryen'
NODE_JS='D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/node/8.9.1_64bit/bin/node.exe'
PYTHON='D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/python/2.7.5.3_64bit/python.exe'
JAVA='D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/java/8.152_64bit/bin/java.exe'
EMSCRIPTEN_ROOT='D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk/emscripten/1.37.26'
SPIDERMONKEY_ENGINE = ''
V8_ENGINE = ''
TEMP_DIR = 'c:/users/family/appdata/local/temp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

Adding directories to PATH:
PATH += D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk
PATH += D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\clang\e1.37.26_64bit
PATH += D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\node\8.9.1_64bit\bin
PATH += D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\python\2.7.5.3_64bit
PATH += D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\java\8.152_64bit\bin
PATH += D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\emscripten\1.37.26

Setting environment variables:
EMSDK = D:/My Documents/Pessoal/Ze/sites/www.webassemblycode.com/resources/emsdk
EM_CONFIG = C:\Users\family\.emscripten
BINARYEN_ROOT = D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\clang\e1.37.26_64bit\binaryen
JAVA_HOME = D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\java\8.152_64bit
EMSCRIPTEN = D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk\emscripten\1.37.26

Set the following tools as active:
   clang-e1.37.26-64bit
   node-8.9.1-64bit
   python-2.7.5.3-64bit
   java-8.152-64bit
   emscripten-1.37.26

The changes made to environment variables only apply to the currently running shell instance. Use the 'emsdk_env.bat' to re-enter this environment later, or if you'd like to permanently register this environment globally to all users in Windows Registry, rerun this command with the option --global.

D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk>

Verifying Whether the Emscripten Toolchain was Properly Installed

Lets issue the emcc –version command:


D:\My Documents\Pessoal\Ze\sites\www.webassemblycode.com\resources\emsdk>emcc --version
INFO:root:generating system asset: is_vanilla.txt... (this will be cached in "C:\Users\family\.emscripten_cache\is_vanilla.txt" for subsequent builds)

INFO:root: - ok
emcc (Emscripten gcc/clang-like replacement) 1.37.26 (commit 2314fe9db8c69c8d6cc016a41ee2e1adc2948566)
Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)
This is free and open source software under the MIT license.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Yes! We have version 1.37.26 installed!

Really Verifying Whether the Emscripten Toolchain was Properly Installed

Compile and run a simple, and boring, Hello World application as described in the Compile and run a simple program from the official Get Started documentation.

After that you can run an application that actually generates a NULL pointer reference in Webassembly and see how the browser reacts.

Conclusions

To build a Webassembly application we only need to install Git and Python, not all the software listed in the official Get Started documentation.
Installing these applications were already a lot of work, Git with its 12 steps and Python that requires a specific version in order to allow installing Emscripen.

Post Mindmap

mindmap-webassembly-windows-setup-webassemblycode.com

Software version
Windows 7
git 2.15.1.2
Python 2.7.14
emscripten 1.37.26

Leave a Reply

Your email address will not be published. Required fields are marked *