Developer Guidelines Projektumgebung

Aufsetzen der Projektumgebung

Hier wird beschrieben wie eine Projektumgebung aufgesetzt werden kann. Das Setzen des Mapbox API-Tokens ist erforderlich für das Starten der Anwendung, da ansonsten die Karte nicht angezeigt und die Mapbox APIs nicht gefetched werden können.

Empfohlene Projektumgebung

VSCode + Volar + TypeScript Vue Plugin (Volar).

Installiere die empfohlenen VSCode Plugins werden (siehe .vscode/settings.json). Wenn Du das nicht möchtest, kannst du die Empfehlungen auch ignorieren. Prettier und ESLint, sowie die beiden Volar-Extensions oben sollten jedoch auf jeden Fall installiert sein.

Stelle sicher, dass du Node und npm installiert hast und es ausführbar ist:

node -v
npm -v

Falls das nicht der Fall ist, folge den hier beschriebenen Anweisungen. Für eine Liste von getesteten Versionen siehe Betriebssyteme und Node-Versionen im Dev Guide.

Führe dann

npm install
npm run build

aus um zu testen, ob der Build der Anwendung erfolgreich durchläuft. Für eine Übersicht von verfügbaren Befehlen wird auf den Abschnitt NPM Scripts verwiesen.

Husky sollte mit npm install die Pre-Commit Hooks initialisieren. Stelle sicher, dass alle Hooks funktionieren, indem Du beispielsweise einen Test-Commit mit kleinen Änderungen machst, die einen ESLint Error hervorrufen. Der Commit sollte blockiert werden.

Setzen des Mapbox API Keys

Wichtig: Führe folgende Schritte durch:

1. Erstelle einen neuen Mapbox Token für dieses Projekt. Dabei fallen keine Kosten an, da das kostenlose Kontingent von Mapbox sehr großzügig ist. Es ist besser nicht den Default Token deines Accounts zu benutzen, um den Überblick zu behalten.
2. Im Project Root (d.h. auf oberster Ebene, wo auch die ganzen anderen Konfigurationsdateien liegen), erstelle eine neue Datei .env.local
3. Platziere VITE_MAPBOX_API_KEY=YOUR_API_KEY in dieser Datei, wobei YOUR_API_KEY dein in Schritt 1 erstellter Mapbox API Key ist.

.env.local wird von Git ignoriert, sodass dein API Key nicht öffentlich auf das GitHub Repository hochgeladen wird.

Debugging

Die aktuelle Test-Datei debuggen

Um die aktuelle Test-Datei zu debuggen (wie z.B. TripAnimator.spec.ts), erstelle folgende Konfigurationsdatei: .vscode/launch.json mit dem Inhalt

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current Test File",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Nun kannst du eine Test-Datei öffnen und dann mit F5 debuggen.

Debuggen mit dem Javascript Debug Terminal

Die ganze Anwendung kann einfach ohne Konfigurationsdatei mittels des Javascript Debug Terminal von VSCode debugged werden:

Alles was in dieser Konsole ausgeführt wird, wird automatisch debugged.

1. Öffne ein neues Javascript Debug Terminal.
   1. Über Terminal -> New Terminal -> Javascript Debug Terminal
   2. Über Ctrl (Cmd) + Shift + P -> Javascript Debug Terminal
2. Führe npm run dev aus.

Alternativ kann es auch direkt mittels Ctrl (Cmd) + Shift + P -> Debug: Debug npm Script -> dev gestartet werden.