WebAssembly sample with Mono AOT

05 May 2019

Overview

There is an existing description how to build a WebAssembly with Mono on Windows, but I wanted to compile an example with using AOT (Ahead of Time Compilation). I haven’t found any clear description how to do this, only one with the Uno Platform and Visual Studio. I’ve followed the general idea from this tutorial (using the Windows Subsystem for Linux) just without the Uno Platform.

The sources that I’ve used to configure this build:

Install prerequisites

 sudo apt install python msbuild
wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo add-apt-repository universe
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.2
 sudo apt install libc6 ninja-build
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk update-tags
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
export EMSDK=/path/to/emsdk/
export WASM_SDK=/path/to/wasm_sdk/

Create sample

  1. Create a directory:

     mkdir my-app
     cd my-app
    
  2. Copy the sample code from the SDK. We’ll assume that the $WASM_SDK variable points to it.

     cp $WASM_SDK/sample.html .
     cp $WASM_SDK/sample.cs .
     cp $WASM_SDK/dependency.cs .
     cp $WASM_SDK/server.py .
     cp $WASM_SDK/runtime.js .
    
  3. Compile sample

    csc /target:library -out:sample.dll /noconfig /nostdlib /r:$WASM_SDK/wasm-bcl/wasm/mscorlib.dll /r:$WASM_SDK/wasm-bcl/wasm/System.dll /r:$WASM_SDK/wasm-bcl/wasm/System.Core.dll /r:$WASM_SDK/wasm-bcl/wasm/Facades/netstandard.dll /r:$WASM_SDK/wasm-bcl/wasm/System.Net.Http.dll /r:$WASM_SDK/framework/WebAssembly.Bindings.dll /r:$WASM_SDK/framework/WebAssembly.Net.Http.dll dependency.cs sample.cs
    
  4. Package the sample

     mono $WASM_SDK/packager.exe --emscripten-sdkdir=$EMSDK --mono-sdkdir=$WASM_SDK -appdir=bin/aot-bindings-sample --builddir=obj/aot-bindings-sample --aot --template=runtime.js --link-mode=SdkOnly --asset=./sample.html --asset=./server.py  sample.dll
    
  5. Build using ninja

     ninja -v -C obj/aot-bindings-sample
    

Serving sample

To test the application launch the provided webserver:


cd bin/aot-bindings-sample
python server.py

After executing you will see the port displayed (default: 8000): From a browser go to http://localhost:8000/sample.html or http://127.0.0.1:8000/sample.html depending on the browser (change the port number if needed)


comments powered by Disqus