Skip to content

Using Emscripten on Windows

Jump to bottom Edit New page
msc-hi edited this page Aug 17, 2013 · 5 revisions

This page describes how to use Emscripten on Windows.

Setting up the Emscripten Toolchain on Windows

This section contains basic instructions on how to start using Emscripten on a clean Windows box. After these steps, you can invoke emcc from the command line by calling 'python emcc'. 64-bit versions of all needed dependencies are preferred, and may be required if you are building large projects.

Installing required tools

  1. Install Python 2.x (not 3.x) from http://www.python.org/.
    • e.g. python-2.7.5.amd64.msi for a 64-bit install.
    • If you plan to use the Visual Studio integration, do NOT install the 64-bit version. Get the 32-bit version of python from python-2.7.5.msi.
    • Add the Python bin\ directory to your PATH. (Open up System Settings, Advanced system properties, click Environment Variables. Add "C:\Python27\bin" to the PATH, separated by a semicolon.) If on the other hand python.exe appears in "C:\Python27" and not under bin, just add "C:\Python27".
  2. Install node.js from http://nodejs.org/
  3. Setup gcc 4.6 and llvm-clang 3.2.
  4. If you do not already have a git client, Install Github for Windows.
  5. Clone the kripken/emscripten repository from github. The emscripten repository contains the main compiler tool for compiling C/C++ programs to JavaScript.
    • Launch the GitHub for Windows Client. You may click "Skip Setup" if you don't have a github account.
    • (optional) Select "Options" from the gear menu, and customize the default storage directory. A path without spaces can save you lots of pain down the line.
    • In your web browser, open https://github.com/kripken/emscripten and press the "Clone in Windows" button.
    • Note: if you already had a different git client, the repository URL is https://github.com/kripken/emscripten.git (e.g. git clone https://github.com/kripken/emscripten.git)

Configuring Emscripten

  1. Open up a command prompt, and change to the directory where you cloned the emscripten repository. By default with the GitHub client, this will be C:\Users\username\Documents\GitHub\emscripten.
  2. Run python emcc --help
    • You should get a Welcome to Emscripten! message. Behind the scenes, emscripten generated a file called .emscripten in your Windows home folder.
    • If you do not see this message, make sure that python is properly in your global PATH, and that you are in the emscripten directory.
  3. Edit C:\Users\username\.emscripten:
    1. Edit the variable EMSCRIPTEN_ROOT to point to the emscripten root folder, e.g. EMSCRIPTEN_ROOT = 'C:/Users/username/Documents/GitHub/emscripten' (Note: use forward slashes)
    2. Edit the variable LLVM_ROOT to point directly to the path where you installed clang.exe, e.g. LLVM_ROOT = 'C:/mingw64/bin'
    3. Edit the variable TEMP_DIR to point to a valid Windows path on your local system, e.g. TEMP_DIR = 'C:/tmp', and create that folder on the local filesystem if it doesn't exist.
    4. If you are planning on using Cygwin and cygwin make in the future, copy the .emscripten file to your cygwin home folder as well, e.g. copy C:\users\username.emscripten C:\cygwin\home\username\ (There is a bug in emscripten that it currently looks for the file .emscripten in two places (Win7 user home folder or cygwin user home folder), depending on the environment it is executed in, so as a current workaround these files must be present and identical on Windows. (see issue #411))

Integrating Emscripten to Visual Studio 2010

It is possible to integrate the Emscripten compiler directly to Visual Studio. This allows existing VS .sln files to be directly built using emcc. The Microsoft compiler property pages are replaced by Clang and emcc -specific options.

  1. Install Visual Studio 2010
  • Note: Express version has not been tested, but should be ok. Please drop a line on emscripten IRC channel or mailing list to report your experience with VS2010 Express!
  1. Clone the juj/vs-tool repository from github:
  • The vs-tool repository contains a plugin to Visual Studio 2010 (or rather, to MSBuild) that instructs Visual Studio how to use the llvm-clang and emscripten toolchain.
  1. Install vs-tool itself.
    1. Navigate to folder vs-tool\
    2. Copy the folders Clang and Emscripten to C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Platforms\.
  2. Set up the required environment variables for vs-tool.
    1. Windows 7: Open Control Panel -- System -- Advanced System Settings -- Environment Variables.
    2. Create a new environment variable 'CLANG_BIN' and set it to point to the folder where you built clang to (path to clang.exe) E.g.
      • SETX CLANG_BIN C:\Projects\llvm-build\bin\Release
      • This is how vs-tool locates the folder to your llvm-clang compiler. Alternatively, this path can be set per-project in Visual Studio project property pages.
    3. Create a new environment variable 'EMSCRIPTEN' and set it to point to the emscripten git repository root folder (the path where you copied emcc.exe and other exes to). E.g.
      • SETX EMSCRIPTEN C:\Projects\emscripten
      • This is how vs-tool locates the emscripten compiler. This path can also be overridden per-project in VS property pages.
    4. Create a new environment variable 'EMCC_WEBBROWSER_EXE' and set it to point to an executable you want to use to browse emscripten-generated web pages from Visual Studio. This process is spawned when you tap Start (Ctrl-F5) in Visual Studio for a emscripten-targeted project.
      • SETX EMCC_WEBBROWSER_EXE C:\Program Files (x86)\Mozilla Firefox\firefox.exe
  3. Now you are all set to start developing Emscripten-based projects from Visual Studio. To test the installation, open the Visual Studio solution file \emscripten\tests\msvc10\tests_msvc10.sln.

Tips for using Emscripten from the Visual Studio 2010 IDE

To build a Visual Studio solution using the Emscripten toolchain, select the "Emscripten" configuration from the Configuration Manager dropdown as the active configuration, and choose Build Solution (F7).

To launch a project directly to a web browser from Visual Studio, right-click on the project to run, choose "Set as Startup Project", and select Start without Debugging (Ctrl+F5). This should launch the generated .html file to the browser you specified in EMCC_WEBBROWSER_EXE. A bug(?) in Visual Studio causes a "Executable for Debug Session" dialog to occasionally open up when you hit Ctrl+F5. This can be ignored by clicking Yes, then No, or simply by hitting Esc and then tapping Ctrl+F5 again.

llvm-clang and emscripten compiler settings can be edited for the project in the "usual" Visual Studio fashion: First make sure that the Emscripten platform configuration is active, then right-click on a project, and choose Properties. In the Project properties dialog, two tree nodes Clang C/C++ and Emcc Linker should exist, which allow you to specify the desired compilation options.

If you have an existing solution file you want to build using Emscripten, open the Configuration Manager.. dialog for the solution, and in the Active Solution Platform dropdown, choose New.... In the new dialog, choose Emscripten as the platform name, and Copy settings from Empty. After this, you can switch between building the solution for Win32 and Emscripten from the Configuration Manager dropdown list.

When you want to create a new Visual Studio project for Emscripten, we recommend you start with a Visual C++ Empty Project. This will create a new project for the Win32 platform. Then convert that project for Emscripten as outlined in the previous paragraph.

Building LLVM/Clang from Source

In case the above-referenced prebuilt binaries do not work for you, you can build LLVM and Clang from source:

*. Install and set up llvm-clang 3.2. Open a Visual Studio 2010 command prompt and type: 1. svn co http://llvm.org/svn/llvm-project/llvm/tags/RELEASE_32/final llvm 2. cd llvm\tools 3. svn co http://llvm.org/svn/llvm-project/cfe/tags/RELEASE_32/final clang 4. cd ..\.. 5. mkdir build 6. cmake -G "Visual Studio 10" ..\llvm 7. msbuild LLVM.sln /p:Configuration=Release

  • If you have problems with the above, see more help here: http://clang.llvm.org/get_started.html NOTE: Instead of checking out the trunk as the guide suggests, check out the latest tagged release of Clang (3.2 at the time of writing). An older version will not most likely work with Emscripten.
Add a custom footer
Add a custom sidebar
Clone this wiki locally