Appearance

Javascript ​

Javascript is code that is run in the browser of the client.

For every page (module), the main javascript file is found under /src/Modules/<modulename>/...js. This is automatically sent to the client. All other javascript (should) be found under /client.

Imports ​

Javascript has different ways of using (importing) code from other files. We use npm, the standard package manager for javascript.

All used third-party-packages are listed under /client/package.json. For using a package, we use the import command at beginnings of files. During build of the webpage the imports are resolved (see Vite) and only what is necessary is sent to the user.

To enable small bits of javacode somewhere (inline), there is /client/src/globals.js. There a bunch of functions are made avaiable globally. This is imported in the main module js-files via import '@/core' and import '@/globals'.

Vite ​

The javascript files are not directly sent to the client but bundled by Vite. Vite is configured via /client/vite.config.mjs. For example this includes the alias that translate @ in imports into /client/src.

Every src/Modules/<Name>/<Name>.js is an entry of its own. The build writes assets/modules.json, from which the PHP controller of a module picks the files to load.

In the development environment yarn dev runs the Vite dev server with hot module replacement: a changed component is replaced in the open page without a reload. The dev server keeps its modules in memory. nginx proxies /vite/ to it, and the dev server writes assets/index.html and assets/modules.json with urls below /vite/, so the PHP side does not know the difference.

The test environment runs yarn build instead, so the tests run against the same production build as in the CI. ./scripts/test-e2e builds it again when client files are newer than the bundle.

vue.js ​

The modern way of designing front end pages is vue.js. We try to use more of it do get more order into javascript files. The big advantage is, that html, javascript and css are clearly separated. One example is /client/src/components/Topbar/Login.vue. Before diving into happy vue.js-hacking you probably should read a bit in the vue documentation.