Building Applications for the Web
WebAssembly is a binary format that allows sand-boxed executable code in web pages. This format is nearly as fast as native machine code, and is now supported by all major web browsers.
Qt for WebAssembly enables building Qt applications so that they can be integrated into web pages. It doesn't require any client-side installations and reduces the use of server-side resources.
The experimental WebAssembly plugin enables you to build your applications in WebAssembly format and deploy and run them in the local web browser. You can change the web browser in the project run settings.
To build applications for the web and run them in a web browser, you need to install Qt for WebAssembly and the tool chain for compiling to WebAssembly.
Requirements
You need the following software to build Qt applications for the web and run them in a browser:
- Qt for WebAssembly 5.13.1, or later
- On Windows: MinGW 7.3.0, or later
- emscripten tool chain for compiling to WebAssembly
sed
stream editor
Note: You need to add the location of the MinGW and sed
installation folders to the system path, either globally or for the Qt for WebAssembly kit.
Setting Up the Development Environment
You need to install and configure Qt for WebAssembly and the tool chain for compiling to WebAssembly. The installer automatically adds a build and run kit to Qt Creator.
Setting Up Qt for WebAssembly
To set up Qt for WebAssembly:
- Use the Qt maintenance tool to install Qt for WebAssembly and, on Windows, MinGW (found in Developer and Designer Tools).
- Check out
emsdk
and install and activateemscripten
, as instructed in Qt for WebAssembly.Note: Do not use the
--embedded
option for activating theemscripten
version in theemsdk
, because Qt Creator expects to find the.emscripten
file describing the toolchain in your home directory. - On Windows, you have to download and install
sed
, as instructed in sed for Windows.
Enabling the WebAssembly Plugin
To enable the plugin:
- In Qt Creator, select Help > About Plugins > Device Support > WebAssembly.
- Select Restart Now to restart Qt Creator and load the plugin.
Specifying WebAssembly Settings
To configure Qt Creator for building Qt apps for the web:
- Select Tools > Options > Kits.
- In the Compiler group, Emscripten Compiler should have been automatically detected for both C++ and C. If not, check that emscripten is set up correctly and your home directory contains an
.emscripten
file. - Select Change next to the Environment field to append the locations where you installed MinGW and
sed
to the PATH variable. For example, on Windows:PATH=C:\Qt\Tools\mingw730_64\bin;C:\Program Files (x86)\GnuWin32\bin;${PATH}
- Select Apply to save the changes to the kit.
Adding WebAssembly Kits
The Qt for Web Assembly installation automatically adds build and run kits to Qt Creator. To add kits:
- Select Tools > Options > Kits > Add.
- In the Name field, specify a name for the kit.
- In the Device type field, select WebAssembly Runtime. The value of the Device field is automatically set to Web Browser.
- In the Compiler field, select Emscripten Compiler for both C and C++.
- Select Change next to the Environment field to append the locations where you installed MinGW and
sed
to the PATH variable. - Select Apply to add the kit.
Running Applications in a Web Browser
To run a project:
- Open a project for an application you want to run in a web browser.
- Select Projects > Build & Run, and then select the WebAssembly kit as the build and run kit for the project.
- Select Run to specify run settings.
- In the Browser field, select the browser to run the application in.
You can now build Qt applications in WebAssembly format and run them in a web browser as described in Building for Multiple Platforms and Running on Multiple Platforms.
© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.