Copyright 2019-2022 Moddable Tech, Inc.
Revised: January 27, 2022
This document provides instructions to build and run Moddable SDK apps for the Wasm platform.
-
Setup instructions
Setup instructions Setup instructions
-
If you do not already have the Emscripten repository, clone the repository into your
~/Projects
directory.cd ~/Projects git clone https://github.com/emscripten-core/emsdk.git
If you already have the Emscripten repository, upgrade to the latest version using the following commands:
cd ~/Projects/emsdk git pull
-
Make sure you have all of the Emscripten prerequisites listed for your host platform in the Platform-specific notes section of the Emscripten Download and install webpage.
-
Install and activate the latest version of Emscripten.
cd ~/Projects/emsdk ./emsdk install latest ./emsdk activate latest
We last tested using version 3.1.1 (commit
0f0ea34526515d0b2caa262ab5915bc1a7e5dd71
). -
If you do not already have the Binaryen repository, clone the repository into your
~/Projects
directory.cd ~/Projects git clone --recursive https://github.com/WebAssembly/binaryen.git
If you already have the Binaryen repository, upgrade to the latest version using the following commands:
cd ~/Projects/binaryen git pull origin main --recurse-submodules
If you experience any problems updating the Binaryen repository, you can simply delete the binaryen directory and re-clone it instead:
cd ~/Projects rm -rf binaryen git clone --recursive https://github.com/WebAssembly/binaryen.git
-
Build the Binaryen tools.
cd ~/Projects/binaryen cmake . && make
We last tested using wasm-opt version 105 (commit
060442225165d0423d06ea33ab865e850b54f61b
) -
Setup the
PATH
and other environment variables by pasting the following commands into your~/.profile
. The first command sources a shell script that sets environment variables for Emscripten. The second updates yourPATH
to include BinaryEn.source ~/Projects/emsdk/emsdk_env.sh export PATH=~/Projects/binaryen/bin:$PATH
Note: These instructions assume that your shell sources from
~/.profile
when a new terminal is opened. That may not be the case depending on what shell you use and how you have it configured. Starting with macOS Catalina, the default shell iszsh
which uses~/.zshrc
instead.Note: You must open a new shell instance or manually run the export statements in your shell before proceeding. Adding the export statements to your
~/.profile
does not update the environment variables in active shell instances. -
Build the Moddable Wasm tools from the command line:
cd ${MODDABLE}/build/makefiles/wasm make
-
To test, build the
balls
example for thewasm
target.cd $MODDABLE/examples/piu/balls mcconfig -d -m -p wasm
You can run the app that's built in the browser by hosting it on a local HTTP server. Python provides a simple tool for doing this.
If you are using Python 2:
cd $MODDABLE/build/bin/wasm/debug/balls python -m SimpleHTTPServer
If you are using Python 3:
cd $MODDABLE/build/bin/wasm/debug/balls python3 -m http.server
Go to
localhost:8000
in a browser. You should see a web page with a simulator runningballs
.
-
If you do not already have the Emscripten repository into your
~/Projects
directory and activate the latest version.cd ~/Projects git clone https://github.com/emscripten-core/emsdk.git cd emsdk
If you already have the Emscripten repository, upgrade to the latest version using the following commands:
cd ~/Projects/emsdk git pull
-
Make sure you have all of the Emscripten prerequisites listed for your host platform in the Platform-specific notes section of the Emscripten Download and install webpage.
-
Install and activate the latest version of Emscripten.
cd ~/Projects/emsdk ./emsdk install latest ./emsdk activate latest
We last tested using version 3.1.2 (commit
476a14d60d0d25ff5a1bfee18af73a4b9bfbd385
). -
If you do not already have the Binaryen repository, clone the repository into your
~/Projects
directory.cd ~/Projects git clone --recursive https://github.com/WebAssembly/binaryen.git
If you already have the Binaryen repository, upgrade to the latest version using the following commands:
cd ~/Projects/binaryen git pull origin main --recurse-submodules
If you experience any problems updating the Binaryen repository, you can simply delete the binaryen directory and re-clone it instead:
cd ~/Projects rm -rf binaryen git clone --recursive https://github.com/WebAssembly/binaryen.git
-
Build the Binaryen tools.
cd ~/Projects/binaryen cmake . && make
We last tested using wasm-opt version 105 (commit
707be2b55075dccaaf0a70e23352c972fce5aa76
) -
Setup the
PATH
and other environment variables by pasting the following commands into your~/.bashrc
. The first command sources a shell script that sets environment variables for Emscripten. The second updates yourPATH
to include BinaryEn.source ~/Projects/emsdk/emsdk_env.sh export PATH=~/Projects/binaryen/bin:$PATH
Note: You must open a new shell instance or manually run the export statements in your shell before proceeding. Adding the export statements to your
~/.profile
does not update the environment variables in active shell instances. -
Build the Moddable Wasm tools from the command line:
cd ${MODDABLE}/build/makefiles/wasm make
-
To test, build the
balls
example for thewasm
target.cd $MODDABLE/examples/piu/balls mcconfig -d -m -p wasm
You can run the app that's built in the browser by hosting it on a local HTTP server. Python provides a simple tool for doing this.
If you are using Python 2:
cd $MODDABLE/build/bin/wasm/debug/balls python -m SimpleHTTPServer
If you are using Python 3:
cd $MODDABLE/build/bin/wasm/debug/balls python3 -m http.server
Go to
localhost:8000
in a browser. You should see a web page with a simulator runningballs
.
Not all features of the Moddable SDK are supported in the Wasm simulator.
The following features are currently supported:
- All JavaScript features supported by XS
- Piu user interface framework
- Commodetto graphics library
The following features are not supported:
- Files
- Socket
- BLE
- Pins/IO