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
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
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
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)
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 !
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 !