MORE / Front-End

The Management & Monitoring Backend (MMB) is the front-end to manage and monitor the back-end. The frontend`s architecture is based upon an Architectural Decision Records (ADR). Mainly, Vue 3, vite, TS, tailwindCSS and PrimeVue are used.

Things to do to start development

npm i
npm run dev
npm run generate:api

go to http://localhost:3000

To have a consistent code style and quality, we use Eslint in combination with prettier.

Setup

nvm use                   # Optional, let nvm use the needed version
npm i                     # install all dependencies
npm run generate:api      # generate needed sourced from BE, for generation as in the pipeline, java 17 must be set in your path
npm run dev               # start local development server

See nvm for more. The local front-end can be visited on http://localhost:3000, the gateway, back-end with their dependencies must also run locally. See vite.config.ts for the required port for localhost.

Intellij, Webstorm ESLint configuration

Set the EsLint settings for Webstorm in Preferences --> Languages & Frameworks --> Javascript --> Code Quality Tools --> ESLint

• Automatic ESLint config check
• File extensions to check: {**/*,*}.{js,ts,html,vue,json}
• Check on run eslint fix on save

Currently not working because of Intellij IDEs..., use npm run lint:fix for now

Scripts

• npm i: install dependencies / node modules
• npm run: shows all possible npm run commands including generation, development, linting, testing, and building

Dependencies

• EsLint 8 for code formatting
• Headless UI
• Heroicons
• i18n
• jsDom
• PostCSS: install PostCSS plugin for VS Code and Jetbrains Editors
• Prettier: install Prettier plugin for VS Code, Jetbrains Editors have it included
• prettier-plugin-tailwindcss
• PrimeVue: for components
• Tailwind CSS 3
• Typescript 5
• Vite 6
• Vitest 3
• Vue 3
• Vue Router v4
• Vue Test Library
• Vue Test Utils

First-party plugins needed for Tailwind UI:

• tailwindcss/forms
• tailwindcss/typography
• tailwindcss/aspect-ratio

The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Generation

Make sure that the enum structure within openapi/StudyManagerApi.yml is

1574  StudyDuration:
            type: object
            properties:
              value:
                type: integer
              unit:
                $ref: '#/components/schemas/DurationUnit'
          DurationUnit:
            type: string
            description: unit of time
            enum:
              - MINUTE
              - HOUR
              - DAY

Otherwise, the generated enums will be duplicated, leading to errors.

Testing Environment with Vitest

Run

npm run test:unit

• Vitest Documentation
• Vitest quick explanation
• Vite introduction with Vue