Doc: Add info about building apps for the web

Users have to install Qt for WebAssembly and the tool chain,
as well as add a kit.

Fixes: QTCREATORBUG-22927
Change-Id: Id22d5fb5e7d9e676d77f3f80880030cb9c1f61c7
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

11 files changed, 147 insertions, 7 deletions

diff --git a/doc/images/qtcreator-kit-webassembly.png b/doc/images/qtcreator-kit-webassembly.png
new file mode 100644
index 0000000000..d37450d245
--- /dev/null
+++ b/doc/images/qtcreator-kit-webassembly.png
diff --git a/doc/images/qtcreator-settings-run-webassembly.png b/doc/images/qtcreator-settings-run-webassembly.png
new file mode 100644
index 0000000000..e9396c30fc
--- /dev/null
+++ b/doc/images/qtcreator-settings-run-webassembly.png
diff --git a/doc/src/overview/creator-only/creator-mobile-targets.qdoc b/doc/src/overview/creator-only/creator-mobile-targets.qdoc
index 9cc5039656..4c5ff795a3 100644
--- a/doc/src/overview/creator-only/creator-mobile-targets.qdoc
+++ b/doc/src/overview/creator-only/creator-mobile-targets.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2019 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -47,6 +47,9 @@
     Additionally, you can connect Linux-based devices by using a WLAN
     connection.
 
+    The experimental WebAssembly plugin enables you to build your applications
+    in WebAssembly format, to deploy them, and to run them in a web browser.
+
     \list
 
         \li \l{Connecting Android Devices}
@@ -95,6 +98,12 @@
 
     \list
 
+        \li \l{Building Applications for the Web}
+
+            You can use the experimental Qt WebAssembly plugin to build
+            applications in WebAssembly format, to deploy them, and to
+            run them in a web browser.
+
         \li \l{http://doc.qt.io/qtcreator/creator-overview-qtasam.html}
             {Qt Application Manager}
 
diff --git a/doc/src/overview/creator-only/creator-overview.qdoc b/doc/src/overview/creator-only/creator-overview.qdoc
index 09ef2766e4..4210894cdf 100644
--- a/doc/src/overview/creator-only/creator-overview.qdoc
+++ b/doc/src/overview/creator-only/creator-overview.qdoc
@@ -40,7 +40,8 @@
     \QC is an integrated development environment (IDE) that provides you with
     tools to design and develop applications with the Qt application framework.
     Qt is designed for developing applications and user interfaces once and
-    deploying them to several desktop, embedded, and mobile operating systems. \QC
+    deploying them to several desktop, embedded, and mobile operating systems or
+    web browsers (experimental). \QC
     provides you with tools for accomplishing your tasks throughout the whole
     application development life-cycle, from creating a project to deploying the
     application to the target platforms.
diff --git a/doc/src/overview/creator-only/creator-supported-platforms.qdoc b/doc/src/overview/creator-only/creator-supported-platforms.qdoc
index a64947d802..55262c469e 100644
--- a/doc/src/overview/creator-only/creator-supported-platforms.qdoc
+++ b/doc/src/overview/creator-only/creator-supported-platforms.qdoc
@@ -39,7 +39,8 @@
     \title Supported Platforms
 
     You can install and run \QC on several operating systems to create
-    applications for multiple desktop, embedded, and mobile device platforms.
+    applications for multiple desktop, embedded, and mobile device platforms,
+    as well as web browsers (experimental).
 
     \QC automatically runs scheduled checks for updates based on the settings
     specified in \uicontrol Tools > \uicontrol Options \uicontrol Environment >
diff --git a/doc/src/overview/creator-only/creator-target-platforms.qdocinc b/doc/src/overview/creator-only/creator-target-platforms.qdocinc
index a936ae7a9a..c269e61404 100644
--- a/doc/src/overview/creator-only/creator-target-platforms.qdocinc
+++ b/doc/src/overview/creator-only/creator-target-platforms.qdocinc
@@ -46,6 +46,8 @@
 
         \li Universal Windows Platform (UWP)
 
+        \li WebAssembly
+
     \endlist
 
     \section2 Embedded Devices
@@ -104,6 +106,11 @@
             \li
             \li
             \li \image ok
+        \row
+            \li WebAssembly
+            \li \image ok
+            \li \image ok
+            \li \image ok
     \endtable
 
     * See \l{Running on QNX Devices} for limitations.
diff --git a/doc/src/projects/creator-only/creator-projects-builds-customizing.qdoc b/doc/src/projects/creator-only/creator-projects-builds-customizing.qdoc
index 08e894f919..52b367cbf3 100644
--- a/doc/src/projects/creator-only/creator-projects-builds-customizing.qdoc
+++ b/doc/src/projects/creator-only/creator-projects-builds-customizing.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2019 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -36,7 +36,7 @@
     \previouspage creator-developing-generic-linux.html
     \nextpage studio-advanced.html
     \else
-    \previouspage creator-developing-qnx.html
+    \previouspage creator-setup-webassembly.html
     \nextpage creator-testing.html
     \endif
 
diff --git a/doc/src/qnx/creator-developing-qnx.qdoc b/doc/src/qnx/creator-developing-qnx.qdoc
index 115e552bc9..7787437303 100644
--- a/doc/src/qnx/creator-developing-qnx.qdoc
+++ b/doc/src/qnx/creator-developing-qnx.qdoc
@@ -32,7 +32,7 @@
     \contentspage index.html
     \previouspage creator-developing-ios.html
     \page creator-developing-qnx.html
-    \nextpage creator-build-process-customizing.html
+    \nextpage creator-setup-webassembly.html
 
     \title Connecting QNX Devices
 
diff --git a/doc/src/qtcreator-toc.qdoc b/doc/src/qtcreator-toc.qdoc
index 331a5a8091..2aab46319c 100644
--- a/doc/src/qtcreator-toc.qdoc
+++ b/doc/src/qtcreator-toc.qdoc
@@ -176,6 +176,7 @@
                 \li \l{Connecting Embedded Linux Devices}
                 \li \l{Connecting iOS Devices}
                 \li \l{Connecting QNX Devices}
+                \li \l{Building Applications for the Web}
             \endlist
             \li \l{Customizing the Build Process}
         \endlist
diff --git a/doc/src/qtcreator.qdoc b/doc/src/qtcreator.qdoc
index 4d814582ec..5401ecc442 100644
--- a/doc/src/qtcreator.qdoc
+++ b/doc/src/qtcreator.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2019 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -45,6 +45,11 @@
     Windows
     operating systems. For more information, see \l{Supported Platforms}.
 
+    In addition, you can use the experimental
+    \l{Building Applications for the Web}{WebAssembly plugin}
+    to build applications in web format and run them in web
+    browsers.
+
     This manual also describes features that are only available if you have the
     appropriate \l{http://qt.io/licensing/}{Qt license}. For more information,
     see \l{Commercial Features}.
diff --git a/doc/src/webassembly/creator-webassembly.qdoc b/doc/src/webassembly/creator-webassembly.qdoc
new file mode 100644
index 0000000000..37ca68ed5e
--- /dev/null
+++ b/doc/src/webassembly/creator-webassembly.qdoc
@@ -0,0 +1,116 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 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.
+**
+****************************************************************************/
+
+    /*!
+    \contentspage index.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 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,
+    as well as add a build and run kit in \QC.
+
+    \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.13.1, or later
+        \li On Windows: \l{http://mingw.org/}{MinGW} 7.3.0, or later
+        \li \l{https://emscripten.org/docs/introducing_emscripten/index.html}
+            {emscripten} tool chain for compiling to WebAssembly
+        \li \c sed stream editor
+    \endlist
+
+    \note You need to add the location of the \MinGW and \c sed installation
+    folders to the system path, either globally or for the Qt for WebAssembly
+    kit.
+
+    \section1 Setting Up the Development Environment
+
+    To configure \QC for building Qt apps for the web and running them in a
+    web browser:
+
+    \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 \c emsdk and install and activate \c emscripten, as
+            instructed in \l {Qt for WebAssembly}.
+        \li On Windows, you have to download and install \c sed, as instructed
+            in \l{http://gnuwin32.sourceforge.net/packages/sed.htm}
+            {sed for Windows}, and add its location to the system PATH.
+        \li In \QC, select \uicontrol Help > \uicontrol {About Plugins} >
+            \uicontrol {Device Support} > \uicontrol {WebAssembly} to enable
+            the plugin.
+        \li Restart \QC to be able to use the plugin.
+        \li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits >
+            \uicontrol {Qt Versions} > \uicontrol Add to add Qt for WebAssembly
+            (wasm_32).
+        \li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits >
+            \uicontrol Add to add a kit for building applications for the web:
+            \image qtcreator-kit-webassembly.png "Qt for WebAssembly kit"
+            \list 1
+                \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 Change next to the \uicontrol Environment
+                    field to append the locations where you installed \MinGW and
+                    \c sed to the PATH variable. For example, on Windows:
+                    \c {PATH=C:\Qt\Tools\mingw730_64\bin;C:\Program Files (x86)\GnuWin32\bin;${PATH}}
+                \li Select \uicontrol Apply to add the kit.
+            \endlist
+        \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 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}.
+*/