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).

Empfohlene VSCode Plugins sollten automatisch installiert werden, da diese in .vscode/settings.json geteilt 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.