Compiling Qt to WebAssembly

Posted in programming with tags c++ Qt -

Intro

In my team, today is project friday ! It means that we are free to test and do things that are not strictly related to the project we work on. That can be testing a new library, learning about a specific aspect of the language … The project I work on is mostly developed with Qt but there is cloud version which mostly independant from ours and that’s a shame because it adds costs. Recently, Qt accounced that Qt could be compiled to WebAssembly, so I wanted to give it a try.

WebAssembly + Qt

For those who don’t know, Qt is C++ GUI framework that grew over time and that has become a huge thing with many different parts (GUI, networking,…). For describing WebAssembly, I quote Wikipedia

WebAssembly (often shortened to Wasm) is a standard that defines a binary format and a corresponding assembly-like text format for executables used by web pages. “High level” languages such as Rust, C or C++ can be compiled to it such that they run in your browser !

Recently, Qt released an early support for WebAssembly with Qt 5.12.0 The implementation lacks of some elements in order to run out-of-the-box production code, but is ready enough to demonstrate the idea ! The documentation is scarce and setting it up is a bit tricky, hence this post blog to, I hope, help you setting it up.

How to set it up

The process can be slipt in 3 parts. First getting, the em++ compiler, then compilling Qt and finally compilling the exemples

Setting up

The environment is simply a folder where we’ll do everything

  mkdir QtWeb
  cd QtWeb

You’ll also Node JS. On Fedora, it’s as simple as:

dnf install nodejs

Getting em++

In its page, Qt says that they used

  git clone https://github.com/juj/emsdk.git
  cd emsdk
  ./emsdk install emscripten-1.38.16 clang-e1.38.16-64bit
  ./emsdk activate emscripten-1.38.16 clang-e1.38.16-64bit
  source ./emsdk_env.sh

Then em++ -v should print something friendly like this

emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.38.16
clang version 6.0.1  (emscripten 1.38.16 : 1.38.16)
Target: x86_64-unknown-linux-gnu
Thread model: posix
InstalledDir: /tmp/QtWeb/emsdk/clang/e1.38.16_64bit
Found candidate GCC installation: /usr/lib/gcc/x86_64-redhat-linux/8
Selected GCC installation: /usr/lib/gcc/x86_64-redhat-linux/8
Candidate multilib: .;@m64
Candidate multilib: 32;@m32
Selected multilib: .;@m64
INFO:root:(Emscripten: Running sanity checks)

Qt

The following commands will download Qt, configure it and compile it for the WebAssembly platform. Make sure you have sourced em++ !

 git clone https://code.qt.io/qt/qt5.git
cd qt5
./init-repository -f --module-subset=qtbase,qtdeclarative,qtwebsockets,qtsvg,qtquickcontrols,qtquickcontrols2,qtgraphicaleffects
cd ..
./qt5/configure  -opensource -confirm-license -xplatform wasm-emscripten -nomake examples -no-compile-examples -skip qt3d -skip qtcanvas3d -skip qtcharts -skip qtconnectivity -skip qtdatavis3d -skip qtwayland -skip qtwebchannel -skip qtwebengine -skip qtwebview -skip qttools -qtlibinfix Emscripten -static -no-feature-thread -no-dbus -no-ssl -prefix $PWD/qtbase -ccache
make -j 6

After some time, it should be done !

Examples

git clone -b master --single-branch https://github.com/msorvig/qt-webassembly-examples.git
cd qt-webassembly-examples/quick_controls2_gallery
../../qtbase/bin/qmake
make
python -mSimpleHTTPServer

And after that, you can open http://127.0.0.1:8000/gallery.html to look at all the examples !

Written by Davidbrcz