QGIS Web Client 2 (stand-alone) version - Development Installation - Part 1 of 2

Before you begin installation (using 'yarn') also at https://github.com/qgis/qwc2-demo-app/blob/master/doc/QWC2_Documentation.md#quick-start which was done in Ubuntu 22.04 LTS. 

This is my own version documentation (as usual to archive my notes and caveats). This will not install all of the 'qwc-services' or 'micro-services' that the additional modules provide. It is the 'stand-alone' version with the web map client. 

If you require additional 'micro-services' you may be better off installing 'Docker' containers here https://qwc-services.github.io/setup/quick-start/

Here is an overview of the project as at FOSS 2019. https://blog.sourcepole.ch/assets/2019/qwc2-foss4g19.pdf

**There will be differences in the package management systems on other linux distros (excluding Windows)**

Lets get started! Open a 'Terminal'

:~$ sudo apt install npm

:~$ sudo npm install -g yarn

:~$ git clone --recursive https://github.com/qgis/qwc2-demo-app.git

:~$ cd qwc2-demo-app

In 'qwc-demo-app' directory

:~/ qwc2-demo-app $ sudo yarn install

[sudo] password for $$$$$: 

- Start of Terminal Output -  (for comparison)

yarn install v1.22.19

[1/4] Resolving packages...

warning workspace-aggregator-ce444038-fe31-4c16-887f-ea476cb73f9a > qwc2 > core-js@3.19.0: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

warning workspace-aggregator-ce444038-fe31-4c16-887f-ea476cb73f9a > qwc2 > form-data-entries@1.0.4: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

warning workspace-aggregator-ce444038-fe31-4c16-887f-ea476cb73f9a > qwc2 > @vusion/webfonts-generator > ttf2woff2 > node-gyp > make-fetch-happen > cacache > @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

[2/4] Fetching packages...

warning geotiff@1.0.9: The engine "browsers" appears to be invalid.

[3/4] Linking dependencies...

warning " > babel-loader@8.2.3" has unmet peer dependency "@babel/core@^7.0.0".

warning "workspace-aggregator-ce444038-fe31-4c16-887f-ea476cb73f9a > qwc2 > react-html-parser@2.0.2" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0-0".

warning Workspaces can only be enabled in private projects.

warning Workspaces can only be enabled in private projects.

[4/4] Building fresh packages...

success Saved lockfile.

Done in 61.76s.

Start 'yarn'

:~/qwc2-demo-app$ sudo yarn start

yarn run v1.22.19

$ npm run tsupdate && npm run themesconfig && npm run iconfont && webpack serve --mode development --progress --host --port 8081

> QWC2App@2021.11.24 tsupdate

> node qwc2/scripts/updateTranslations.js

Generating translations for qwc2

Wrote qwc2/translations/de-DE.json

Wrote qwc2/translations/de-CH.json

Wrote qwc2/translations/en-US.json

Wrote qwc2/translations/es-ES.json

Wrote qwc2/translations/fr-FR.json

Wrote qwc2/translations/fi-FI.json

Wrote qwc2/translations/hu-HU.json

Wrote qwc2/translations/it-IT.json

Wrote qwc2/translations/pl-PL.json

Wrote qwc2/translations/pt-BR.json

Wrote qwc2/translations/pt-PT.json

Wrote qwc2/translations/ro-RO.json

Wrote qwc2/translations/ru-RU.json

Wrote qwc2/translations/sv-SE.json

Wrote qwc2/translations/tr-TR.json

Wrote qwc2/translations/cs-CZ.json

Wrote qwc2/translations/no-NO.json

Wrote qwc2/translations/ca-ES.json

Wrote static/translations/de-DE.json

Wrote static/translations/de-CH.json

Wrote static/translations/en-US.json

Wrote static/translations/es-ES.json

Wrote static/translations/fr-FR.json

Wrote static/translations/it-IT.json

Wrote static/translations/pl-PL.json

Wrote static/translations/pt-BR.json

Wrote static/translations/pt-PT.json

Wrote static/translations/ro-RO.json

Wrote static/translations/ru-RU.json

Wrote static/translations/sv-SE.json

Wrote static/translations/tr-TR.json

Wrote static/translations/cs-CZ.json

> QWC2App@2021.11.24 themesconfig

> node qwc2/scripts/themesConfig.js

Reading themesConfig.json

Parsing WMS GetProjectSettings of http://qwc2.sourcepole.ch/ows/uster/bauprojekte

Using WMS GetMap to generate thumbnail for http://qwc2.sourcepole.ch/ows/uster/bauprojekte

Parsing WMS GetProjectSettings of http://qwc2.sourcepole.ch/ows/qwc_demo

Created themes.json

> QWC2App@2021.11.24 iconfont

> node qwc2/scripts/makeIconkit.js


<i> [webpack-dev-server] Project is running at:

<i> [webpack-dev-server] Loopback: http://localhost:8081/

<i> [webpack-dev-server] On Your Network (IPv4):

<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::c545:4d61:a6a9:5f37]:8081/

<i> [webpack-dev-server] Content not from webpack is served from '/home/$$$$$/qwc2-demo-app/static' directory

assets by path assets/ 264 KiB

    assets by path assets/forms/ 114 KiB 29 assets

    assets by path assets/img/ 145 KiB 15 assets

    assets by path assets/css/*.css 4.02 KiB

        asset assets/css/colorschemes.css 4.02 KiB [emitted] [from: static/assets/css/colorschemes.css]                 [copied]

        asset assets/css/qwc2.css 0 bytes [emitted] [from: static/assets/css/qwc2.css] [copied]

    asset assets/templates/legendprint.html 269 bytes [emitted] [from: static/assets/templates/legendprint.html] [copied]

assets by path translations/*.json 170 KiB 15 assets

assets by path *.json 39.8 KiB

    asset themes.json 22.2 KiB [emitted] [from: static/themes.json] [copied]

    asset config.json 17.6 KiB [emitted] [from: static/config.json] [copied]

asset dist/QWC2App.js 13.7 MiB [emitted] (name: QWC2App)

asset api_examples.js 4.47 KiB [emitted] [from: static/api_examples.js] [copied]

asset index.html 2.35 KiB [emitted]

asset qwc-docker-themes.sh 301 bytes [emitted] [from: static/qwc-docker-themes.sh] [copied]

orphan modules 133 KiB [orphan] 94 modules

runtime modules 27.2 KiB 13 modules

modules by path ./node_modules/ 8.72 MiB 1461 modules

modules by path ./qwc2/ 1.97 MiB 318 modules

modules by path ./js/ 26.9 KiB

    modules by path ./js/*.jsx 1.54 KiB 3 modules

    modules by path ./js/*.js 25.4 KiB 2 modules

modules by path ./icons/build/ 23.4 KiB

  ./icons/build/qwc2-icons.css 2.51 KiB [built] [code generated]

  ./node_modules/css-loader/dist/cjs.js!./node_modules/string-replace-loader/index.js??ruleSet[1].rules[0].use[2]!./icons/build/qwc2-icons.css 6.17 KiB [built] [code generated]

  ./icons/build/qwc2-icons.woff?60a13f3f528dcd6b1abbcc3a47bf9e1b 14.7 KiB [built] [code generated]

./static/translations/en-US.json 9.82 KiB [built] [code generated]

readable-stream (ignored) 15 bytes [built] [code generated]

util (ignored) 15 bytes [built] [code generated]

util (ignored) 15 bytes [built] [code generated]

webpack 5.59.1 compiled successfully in 21621 ms

- End of Terminal Output - 

You must retain terminal 'activation' to test QWC2. If your session exits the browser simply type:

:~/qwc2-demo-app$ sudo yarn start

Now check the QWC2 Client is working!


Once you've made your modifications

Running "yarn run prod" will create your actual application inside the 'prod' folder. Now we simply move this folder to your (htdocs/root) folder so apache or some other webserver will serve it.

That's it, now your new client will be accessible across your network. You should access it on:


If this is your first time using the client, you will need a webserver to serve your website.

We will look at the customisation in Part 2


Popular posts from this blog

Qgis-server...Installing the QGIS Lizmap Plugin & Lizmap Web Client

Qgis-server...Installation on Ubuntu 16.04 LTS

Qgis-server...Bringing a map image into the browser on Ubuntu 16.04 LTS