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 0.0.0.0 --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

Done!

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

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

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

<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!

http://localhost:8081/

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:

mycomputerIP:<PortWhereWebserverListens>/prod

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