Local Development

Vorbereitung

Für die Entwicklung im Frontend werden mehrere Dependencies benötigt wie z.B. node. Folgende Dependencies werden benötigt.

• Node.js
• Yarn
• fnm (optional)

fnm ist optional aber empfehlenswert, damit mit der selben Node Version gearbeitet wird. fnm ist ein Node.js Version Manager. Im Frontend Repository existiert eine .node-version, welche fnm versteht. Mittels folgenden Befehl in selben Verzeichnis wie die besagte Datei, wird sichergestellt, das die korrekte Node Version verwendet wird

fnm use

Nachdem alle benötigten Tools installiert sind, kann das Projekt initialisiert werden. Das Repository besteht aus einem Workspace, welches unter workspaces hat. So beinhaltet z.B. backend-client den Client für die API zum Backend und frontend den Code zum Frontend. Mehr dazu hier...

Als erstes werden die Dependencies für die Anwendung mittels yarn installiert.

yarn install

Backend Client generieren

Es gibt zwei Möglichkeiten, den API Client zu erstellen. Einmal eine lokal laufende Backend oder über die veröffentlichte Developer Backend Instanz.

TL;DR

Lokale Backend Instanz

yarn generate:local # Holt sich api-docs.json von http://localhost:3000
yarn rebuild

Veröffentlichte Developer Backend Instanz

yarn generate # Holt sich api-docs.json von https://app.dev.green-ecolution.de
yarn rebuild

Erläuterung

Näheres zu dem Skript ist in der Backend Client Dokumentation ersichtlich

Vite Server starten

Da nun alle Abhängigkeiten und der Backend Client existieren, kann die Developer Umgebung mittels Vite gestartet werden. Standardmäßig ist Vite unter der Adresse http://localhost:5173 erreichbar. In der Console beim Starten steht allerdings, unter welcher Adresse Vite erreichbar ist. Zum starten wird folgender Befehl ausgeführt:

yarn dev

Verbindung zum Backend

Das Frontend benötigt eine Verbindung zum Backend, um Daten zu erhalten. Folgende Möglichkeiten existieren, um sich mit verschiedenen Backends zu verbinden. Dabei wird der Path zur api angepasst. Innerhalb von Vite leitet der Proxy die Anfrage an unterschiedliche Server weiter. Der Pfad kann mittels der Umgebungsvariable VITE_BACKEND_BASEURL gesetzt werden. Ist nichts gesetzt, wird auf Punkt 1. weitergeleitet.

1. Verbindung über /api-local geht zum lokal laufenden Backend http://localhost:3000/api (default)
2. Verbindung über /api-dev geht zu https://app.dev.green-ecolution.de/api
3. Verbindung über /api-stage geht zu https://app.stage.green-ecolution.de/api

Vite in einem Modus starten

Um nun Vite in einem Modus für die Backend Verbindung zu starten, muss lediglich die Umgebungsvariable beim Starten gesetzt werden. Beispiel für die Verbindung zur öffentlichen dev Umgebung:

VITE_BACKEND_BASEURL=/api-dev yarn dev