merge frontend

README.md

@@ -61,4 +61,56 @@ Volg deze stappen om de backend van het project op te zetten:
 10. De testen kunnen uitgevoerd worden met het volgende commando:
     ```bash
     python -m unittest discover tests
-    ```
+    ```
+
+## Frontend
+
+Volg deze stappen om de backend van het project op te zetten:
+
+
+1. Navigeer naar de backend map:
+    ```bash
+    cd UGent-2/frontend
+    ```
+2. Instaleer Node:
+
+    **Ubuntu**
+    ```bash
+    sudo apt update
+    sudo apt install ca-certificates curl gnupg
+
+    sudo mkdir -p /etc/apt/keyrings
+    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
+
+    NODE_MAJOR=20
+    echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
+
+    sudo apt update
+    sudo apt install nodejs
+    ```
+    **Fedora**
+    ```bash
+    sudo dnf install nodejs
+    ```
+    **Arch**
+    ```bash
+    sudo pacman -S nodejs-lts-iron
+    ```
+3. Installeer alle npm dependencies
+    ```bash
+    npm install
+    ```
+4. Build de frontend:
+   ```bash
+   npm run build
+   ```
+   De gecompileerde html/css/js bevindt zich nu in de `dist` folder
+
+5. Deploy:
+
+   Zet de inhoud van de `dist` folder op de juiste plaats, zodat het geserveerd kan worden.
+
+6. De testen kunnen uitgevoerd worden met: (nog niet geïmplementeerd)
+   ```bash
+   npm run tests
+   ```