qskinny/doc/tutorials/11-How-to-build-for-Wasm.asciidoc

---
title: 10. Building QSkinny for WebAssembly (Wasm)
layout: docs
---

:doctitle: 10. Building QSkinny for WebAssembly (Wasm)
:notitle:

== 10. Building QSkinny for WebAssembly (Wasm)


=== Build Qt for Wasm

Build Qt for Wasm from source as described here: https://doc.qt.io/qt-6/wasm.html#building-qt-from-source ; The verified Qt version for QSkinny as of this writing was 6.6.0. It might also work to use a downloaded version of Qt for Wasm, but some additional libraries will need to be built.
After configuring Qt as described in the link above, for QSkinny you will need the qtbase, qtdeclarative, qtshadertools and qtsvg modules.
Assuming the Emscripten SDK in `~/dev/emscripten` and Qt in `~/dev/qt6`, Qt can be compiled the following way:

[source]
....
cd ~/dev/qt6
source "~/dev/emsdk/emsdk_env.sh"
cmake --build . -t qtbase -t qtdeclarative -t qtshadertools -t qtsvg
....

This will install all required libs in `~/dev/qt6/qtbase/lib`.


=== Build QSkinny for Wasm

With the Qt version from above QSkinny can be built for WAsm, assuming it has been checked out at `~/dev/qskinny`. Note the configuration option `BUILD_QSKDLL=OFF` for static
 builds:

[source]
....
mkdir -p ~/dev/qskinny-wasm-build
source "~/dev/emsdk/emsdk_env.sh"
~/dev/qt6/qtbase/bin/qt-cmake -S ~/dev/qskinny -B ~/dev/qskinny-wasm-build -DBUILD_QSKDLL=OFF
....


=== Run QSkinny for Wasm

Qt creates the HTML wrappers automatically, so there is not much to do except letting Emscripten start the server and open our app in the browser:

[source]
....
/usr/bin/python3 ~/dev/emsdk/upstream/emscripten/emrun.py --browser firefox --port 30001 --no_emrun_detect  ~/dev/qskinny-wasm-build/examples/bin/iotdashboard.html
....

.The IOT dashboard example in a browser
image::../images/iotdashboard-wasm.png[The IOT dashboard example in a browser]