Hint Windows: in Windows you can use the normal command line, but then the installation of the dependencies need a little bit more time because some dependencies have to be build for Windows with node-gyp. You can also use the Windows Subsystem for Linux (WSL) with Ubuntu (and the build-essentials toolchain)

Install Docker on your system and make sure that the Docker daemon runs in the background even after rebooting your operating system: https://www.docker.com/get-started/

For source code versioning, install Git on your system.

Install the current Node.js version. At least: > 20.11.0

For Linux and MacOS there is the node version manager, which gives you a really easy way of installing Node and updating it. There is also a similar project for Windows

PROCEED uses yarn instead of npm for managing the dependencies within the Mono-Repo. Install Yarn >v1.22.22 (yarn v2 or higher is not supported) by running this command in the root of the project folder:

corepack enable

Test if everything works with: yarn --version

Install: automatically installed with the project dependencies
Can also be done globally: npm install --global prettier

To simplify linting and avoid unnecessary discussions about trivial style guide choices in PRs we use prettier in order to automatically format all code in the codebase to follow a common style guide.

Install: automatically installed with the project dependencies

Husky provides the ability to utilize git hooks and run commands on them. We use husky to automatically apply prettier on the staged changes before every commit, in case the IDE did not do this on save (see below for VS Code) and run the tests before every push.

We mainly use VSCode as our default IDE, so most of the following recommendations are for that IDE.

Install: VSCode Link

We have a .vscode/settings.json file in the root of our monorepo that configures VS Code to automatically format on save. VSCode does not use prettier by default for formatting but has to be instructed to do so. In order to get it to use prettier, you have to install the VS Code extension from the link above. Now all JavaScript, Vue, HTML, CSS and Markdown files will automatically be formatted by prettier on every save in VS Code.

Prettier recognizes the settings in the .editorconfigfile (which intends to configure styling information for all IDEs). Please don't install or disable the separate VSCode extension since it would set the End-of-Line code always to LF (-> this is wrong for Windows systems and git already takes care of the conversion between CRLFand LFon Windows)

Install: VSCode Link

Support for our E2E GUI Playwright tests.

git clone <URI>

• It is possible to use the git https://... method with username/password authentication to clone the repo
• You can also use the ssh git@... clone method with your SSH key (configured in your Github profile)
  • if you have multiple ssh keys for different servers, add a configuration entry to ~/.ssh/config:

Host github.com
  Preferredauthentications publickey
  IdentityFile ~/.ssh/id_ed25519_priv_git_key

It is possible to start PROCEED without an .env file. In that case hardcoded default values will be used. If you want to change those or add new values, you can add an .env file with environment variables. It will be automatically read by NextJS. For examples, take a look in our private environments repo or ask a colleague.

Install and run all software how it is described in the README file of the project. Usually this involves:

• yarn global add node-gyp && yarn install --ignore-engines: installs the dependencies, you need an internet connection for this
• yarn dev: start of the PROCEED Engine in dev mode
• yarn dev-ms: start of the PROCEED Management System in dev mode

Hint Mac OS with ARM CPUs: Chrome (Puppeteer) must be adapted for the new ARM CPUs. Install new Chrome like here and manually set the Electron version to 11.0.0 or higher

The Management System (MS) uses Vue.js as Frontend Framework. Here are some recommended installations:

Install: automatically installed with the project dependencies

For the project we use many Vue-specific libraries, e.g. vuex, vue router, vuetify.

Install the vue cli command globally: yarn global add @vue/cli.
Check afterwards if you have the right version: vue --version

The MS is created out of pluggable modules with the Vue Cli

Install the development addons for Vue.js for your Browser: https://github.com/vuejs/vue-devtools

Install: VSCode Link
Doku

Install and run all software how it is described in the README file of the project. Usually this involves:

• yarn global add node-gyp && yarn install --ignore-engines: installs the dependencies, you need an internet connection for this
• yarn dev: start of the PROCEED Engine in dev mode
• yarn dev-ms-server: start of the PROCEED Management System in dev mode

Beware: We are using HTTPS with a self-signed certificate for development. This will most likely lead to your browser warning you upon the first start of the frontend. You have to accept that warning and create an exception to continue to the site. The self-signed certificate will also lead to errors when the frontend tries to connect to the other HTTPS endpoints (API, Webpack-Dev-Server, WebSocket and Puppeteer-Server). The easiest way to solve this, is to open all endpoints directly inside the browser and add an exception for every endpoint-certificate combination. For the development this is:

• API: https://localhost:33080/
• WebSocket: https://localhost:33081/
• Webpack-Dev-Server (Frontend): https://localhost:33083/
• Puppeteer-Server: https://localhost:33084/

This should allow the Frontend to connect to the other endpoints in subsequent tries.

2023: Currently, Electron is not important anymore

For building the Electron apps for multiple plattforms, you need to install further dependencies like Wine. See: https://www.electron.build/multi-platform-build#linux

Hint for Windows: using the WSL can bring challenges (e.g. the graphical electron interface) and is not completely tested