1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
/****************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\previouspage creator-developing-qnx.html
\page creator-setup-webassembly.html
\nextpage creator-build-process-customizing.html
\title 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.
\l {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's \l{Specifying Run Settings}
{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.
\section1 Requirements
You need the following software to build Qt applications for the web and run
them in a browser:
\list
\li Qt for WebAssembly 5.15, or later
\li On Windows: \l{http://wiki.qt.io/MinGW}{\MinGW} 7.3.0, or later
\li \l{https://emscripten.org/docs/introducing_emscripten/index.html}
{emscripten} tool chain for compiling to WebAssembly
\endlist
\section1 Setting Up the Development Environment
You need to install and configure Qt for WebAssembly and the tool chain for
compiling to WebAssembly. The Qt Installer automatically adds a build and
run kit to \QC.
\section2 Setting Up Qt for WebAssembly
To set up Qt for WebAssembly:
\list 1
\li Use the Qt maintenance tool to install Qt for WebAssembly and, on
Windows, \MinGW (found in \uicontrol {Developer and Designer Tools}).
\li Check out a known-good Emscripten version supported by the Qt for
WebAssembly version that you installed, and install and activate
\c emscripten, as instructed in
\l {https://doc.qt.io/qt-5/wasm.html#install-emscripten}
{Install Emscripten}.
\endlist
\section2 Enabling the WebAssembly Plugin
To enable the plugin:
\list 1
\li In \QC, select \uicontrol Help > \uicontrol {About Plugins} >
\uicontrol {Device Support} > \uicontrol {WebAssembly}.
\li Select \uicontrol {Restart Now} to restart \QC and load the plugin.
\endlist
\section2 Specifying WebAssembly Settings
To configure \QC for building Qt apps for the web:
\list 1
\li Select \uicontrol Edit > \uicontrol Preferences > \uicontrol Devices >
\uicontrol WebAssembly.
\li In the \uicontrol {Emscripten SDK path} field, enter the root
directory where \c emsdk is installed.
\li \QC configures the \uicontrol {Emscripten SDK environment} for you
if the \c emsdk is supported by the Qt for WebAssembly version that
you will use for developing the application.
\image qtcreator-webassembly-options.png "Qt for WebAssembly device preferences"
\li Select \uicontrol Edit > \uicontrol Preferences > \uicontrol Kits.
\image qtcreator-kit-webassembly.png "Qt for WebAssembly kit"
\li In the \uicontrol Compiler group, \uicontrol {Emscripten Compiler}
should have been automatically detected for both C++ and C. If not,
check that emscripten is set up correctly.
\endlist
\section2 Adding WebAssembly Kits
The Qt for Web Assembly installation automatically adds build and run kits
to \QC. To add kits:
\list 1
\li Select \uicontrol Edit > \uicontrol Preferences > \uicontrol Kits >
\uicontrol Add.
\li In the \uicontrol Name field, specify a name for the kit.
\li In the \uicontrol {Device type} field, select
\uicontrol {WebAssembly Runtime}.
The value of the \uicontrol Device field is automatically
set to \uicontrol {Web Browser}.
\li In the \uicontrol Compiler field, select
\uicontrol {Emscripten Compiler} for both C and C++.
\li Select \uicontrol Apply to add the kit.
\endlist
\section1 Running Applications in a Web Browser
To run a project:
\list 1
\li Open a project for an application you want to run in a web browser.
\li Select \uicontrol Projects > \uicontrol {Build & Run}, and then
select the WebAssembly kit as the build and run kit for the project.
\li Select \uicontrol Run to specify run settings.
\li In the \uicontrol {Web browser} field, select the browser to run
the application in.
\image qtcreator-settings-run-webassembly.png "Selecting the browser to run in"
\endlist
You can now build Qt applications in WebAssembly format and run them in
a web browser as described in \l {Building for Multiple Platforms} and
\l{Running on Multiple Platforms}.
*/
|
