build environment for webapp

[koerri]

As has been pointed out in the discussion about language settings #329, changes to the web UI require an external rebuild of the webapp.
For a total newbie like me the information in webapp/README.md seemed rather sparse, it took me a quite a while to understand what was needed (node.js, npm, yarn, vite) and then to navigate the version dependencies to get to a working setup.
So in case anyone else has similar difficulties here's my sanitized bash log, skipping most non-error output.

USER@lmde5:~$ sudo apt-get update && apt-get upgrade
USER@lmde5:~$ sudo uname -a
Linux lmde5 5.10.0-12-amd64 #1 SMP Debian 5.10.103-1 (2022-03-07) x86_64 GNU/Linux

USER@lmde5:~$ sudo apt-get install nodejs
USER@lmde5:~$ node -v
v12.22.12

USER@lmde5:~$ sudo apt-get install npm
USER@lmde5:~$ npm -v
7.5.2

USER@lmde5:~$ sudo npm install --global yarn
USER@lmde5:~$ yarn -v
1.22.19

USER@lmde5:~$ sudo npm install --global vite
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '^14.18.0 || >=16.0.0' },
npm WARN EBADENGINE   current: { node: 'v12.22.12', npm: '7.5.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>=14.18.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v12.22.12', npm: '7.5.2' }
npm WARN EBADENGINE }
added 36 packages, and audited 37 packages in 6s
4 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

USER@lmde5:~$ vite -v
file:///usr/local/lib/node_modules/vite/bin/vite.js:7
    await import('source-map-support').then((r) => r.default.install())
    ^^^^^
SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
    at async link (internal/modules/esm/module_job.js:42:21)

USER@lmde5:~$ sudo npm install --global n 
USER@lmde5:~$ sudo n stable
  installing : node-v18.12.1
       mkdir : /usr/local/n/versions/node/18.12.1
       fetch : https://nodejs.org/dist/v18.12.1/node-v18.12.1-linux-x64.tar.xz
     copying : node/18.12.1
   installed : v18.12.1 (with npm 8.19.2)

Note: the node command changed location and the old location may be remembered in your current shell.
         old : /usr/bin/node
         new : /usr/local/bin/node
If "node --version" shows the old version then start a new shell, or reset the location hash with:
hash -r  (for bash, zsh, ash, dash, and ksh)
rehash   (for csh and tcsh)

USER@lmde5:~$ node -v
v12.22.12

USER@lmde5:~$ hash -r
USER@lmde5:~$ node -v
v18.12.1

USER@lmde5:~$ vite -v
vite/4.0.3 linux-x64 node-v18.12.1

USER@lmde5:~$ git clone https://github.com/tbnobody/OpenDTU.git
USER@lmde5:~$ cd OpenDTU/webapp

USER@lmde5:~/OpenDTU/webapp$  yarn install

USER@lmde5:~/OpenDTU/webapp$ yarn build
yarn run v1.22.19
$ run-p type-check build-only
$ vue-tsc --noEmit
$ vite build
vite v4.0.3 building for production...
✓ 199 modules transformed.
../webapp_dist/index.html    0.52 kB
../webapp_dist/js/app.js   580.01 kB │ gzip: 144.21 kB
 
(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
 
[vite-plugin-compression]:algorithm=gzip - compressed file successfully: 
webapp_dist//home/USER/OpenDTU/webapp_dist/index.html.gz   0.50kb / gzip: 0.32kb
webapp_dist//home/USER/OpenDTU/webapp_dist/zones.json.gz   15.41kb / gzip: 4.00kb
webapp_dist//home/USER/OpenDTU/webapp_dist/js/app.js.gz    566.54kb / gzip: 140.40kb
 
Done in 6.50s.
USER@lmde5:~/OpenDTU/webapp$  Success, yay!