PROCEED MS Code Structure - PROCEED-Labs/proceed GitHub Wiki

The desktop software is created with the Electron Framework. Because it uses web technologies for creating its applications, the main web framework is Vue.js. Vue brings module development with the so called Single File Components (SFC), which makes collaborative web development way easier. As a pre-created component list we use Vuetify

Therefore the whole application is built with the vue cli (vue create|add). The following plugins were added/selected with vue create management-system:

• @vue/babel
  • can Babel be deleted? => not really - it seems Jest needs it for at least transpiling es6 module into module.exports
• vuex
• router -> history mode on
• CSS Pre-processor -> Sass/SCSS (with dart-sass)
• Linter -> @vue/eslint -> ESLint + Airbnb config & "Lint on save"
• Unit Testing -> @vue/jest -> Jest
• no "E2E Testing (comes later)
• All configurations are in dedicated files.

Then:

• vue add vuetify (no custom theme, no custom properties (CSS variables), Material Design Icons (not Font Awesome) => roboto-fontface and @mdi/font, offline fonts, a-la-carte components, English)
• vue add electron-builder (Electron version ^6.0.0, Spectron tests) -> this includes Electron-Builder -> for using Electron
  • E2E Testing -> electron-builder tests -> Spectron

Use vue ui inside the project folder to have a graphical overview about the project, webpack and its dependencies.

For development you need to install multiple additional software. See here

For running the software with the vue plugins, you maybe need to invoke the plugins again inside the ms project folder, e.g. vue invoke electron-builder

All configurations are in dedicated files. Mainly vue.config.js can contain most configurations for plugins, webpack loader and mono-repo adaptions.

• nodeModulesPath: ['../../node_modules', './node_modules'] added in vue.config.js for electron-builder
• deleted postinstall execution script inside the project package.json file: not working with mono-repo and only needed if native modules are used
• if there are dependencies that do not work inside a mono-repo, you can use the nohoist option inside the root package.json (use only if really necessary, google before). Done for: monaco editor
• postcss.config.js deleted and config added in vue.config.js => did not work with mono-repo
• OPEN BUG for Electron BUILDER electron version detection problem, => wait for version updates of vue-cli-plugin-electron-builder and electron-builder, current temp solution: version hard coded in vue.config.js (can be deleted if bug is closed)
• Electron-Builder: build options in vue.config.js

Possible extensions (added if needed):

• Adding shared global variables to every CSS
• configure debug, icons, blank screen (electron-builder docu): https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html#blank-screen-on-builds-but-works-fine-on-serve

From electron-builder folder structure

├── dist_electron/
│ ├── bundled/..  # where webpack outputs compiled files
│ ├── [target platform]-unpacked/..  # unpacked Electron app (main app and supporting files)
│ ├── [application name] setup [version].[target binary (exe|dmg|rpm...)]  # installer for Electron app
│ ├── index.js  # compiled background file used for electron:serve
│ └── ...
├── public/  # Files placed here will be available through __static or process.env.BASE_URL
├── src/
│ ├── background.[js|ts]  # electron entry file (for Electron's main process)
│ ├── [main|index].[js|ts]  # your app's entry file (for Electron's render process)
│ └── ...
├── package.json  # your app's package.json file
├── ...

• TODO: explain here how to build the deployable production versions for the varies OS

• TODOs: bpmn-moddle, ...