teatracker/SERVER_SETUP.md

TeeTracker Server Setup

Problem: Dateispeicherung funktioniert nicht

Die TeeTracker-App versucht, Daten im data/-Verzeichnis zu speichern, aber auf den meisten Webservern funktioniert das nicht standardmäßig. Hier sind die Lösungen:

---

Lösung 1: LocalStorage (Empfohlen für Shared Hosting)

Funktioniert immer, ohne Server-Konfiguration!

Die App fällt automatisch auf localStorage zurück, wenn die Dateispeicherung nicht verfügbar ist.

• Alle Daten werden im Browser gespeichert
• Funktioniert auf jedem Webserver
• Daten sind nur auf dem aktuellen Gerät/Browser verfügbar

Status prüfen:

• Gehe zu "Einstellungen" → "Datenverwaltung"
• Wenn "Lokaler Modus (localStorage)" angezeigt wird, funktioniert die Dateispeicherung nicht
• Wenn "Dateispeicherung aktiv" angezeigt wird, funktioniert die Dateispeicherung

---

Lösung 2: Apache Server (.htaccess)

Falls dein Server Apache verwendet (häufig bei Shared Hosting):

1. Stelle sicher, dass die .htaccess-Datei aktiv ist:

   • Die Datei liegt bereits im Hauptverzeichnis
   • Prüfe, ob mod_rewrite aktiviert ist
   • Kontaktiere deinen Hosting-Anbieter, falls .htaccess ignoriert wird

2. Erlaube PUT und DELETE Methoden: Die .htaccess-Datei enthält bereits die notwendigen Regeln:

   <Limit GET POST PUT DELETE OPTIONS>
       Require all granted
   </Limit>
   

3. Setze die richtigen Berechtigungen:

   chmod 755 data/
   chmod 644 data/.gitkeep
   

4. Aktiviere die notwendigen Apache-Module:

   a2enmod rewrite
   a2enmod headers
   a2enmod expires
   service apache2 restart
   

---

Lösung 3: PHP-Backend (Alternative)

Falls dein Server PHP unterstützt, kannst du ein einfaches Backend erstellen:

1. Erstelle save_data.php:

<?php
header('Content-Type: application/json');

$filename = 'data/' . ($_GET['file'] ?? '');
$allowed_files = ['teas.json', 'entries.json'];

if (!in_array(basename($filename), $allowed_files)) {
    http_response_code(403);
    die(json_encode(['error' => 'Not allowed']));
}

if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    if (file_exists($filename)) {
        readfile($filename);
    } else {
        echo '[]';
    }
} elseif ($_SERVER['REQUEST_METHOD'] === 'PUT' || $_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = file_get_contents('php://input');
    file_put_contents($filename, $data);
    echo json_encode(['success' => true]);
} elseif ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
    if (file_exists($filename)) {
        unlink($filename);
    }
    echo json_encode(['success' => true]);
}

2. Ändere die LocalFileStorage-Klasse:

Ersetze die fetch()-Aufrufe durch Aufrufe an dein PHP-Skript.

---

Lösung 4: Node.js/Express Server

Falls du Node.js verwenden kannst:

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.use(express.json());
app.use(express.static('public'));

// Enable PUT and DELETE for data directory
app.use('/data', express.raw({ type: '*/*' }));

app.put('/data/:file', (req, res) => {
    const filePath = path.join(__dirname, 'data', req.params.file);
    fs.writeFile(filePath, req.body, (err) => {
        if (err) return res.status(500).send(err.message);
        res.sendStatus(200);
    });
});

app.get('/data/:file', (req, res) => {
    const filePath = path.join(__dirname, 'data', req.params.file);
    if (fs.existsSync(filePath)) {
        res.sendFile(filePath);
    } else {
        res.status(404).send('[]');
    }
});

app.delete('/data/:file', (req, res) => {
    const filePath = path.join(__dirname, 'data', req.params.file);
    if (fs.existsSync(filePath)) {
        fs.unlink(filePath, (err) => {
            if (err) return res.status(500).send(err.message);
            res.sendStatus(200);
        });
    } else {
        res.sendStatus(200);
    }
});

app.listen(3000, () => console.log('Server running on port 3000'));

---

Häufige Probleme und Lösungen

Problem: "405 Method Not Allowed"

Lösung: Der Server unterstützt PUT/DELETE nicht. Verwende Lösung 2, 3 oder 4.

Problem: "403 Forbidden"

Lösung: Die Berechtigungen sind falsch. Führe aus:

chmod 755 data/
chmod 644 data/*

Problem: "404 Not Found" für data/-Dateien

Lösung: Das data/-Verzeichnis existiert nicht oder die Dateien sind nicht hochgeladen.

Problem: CORS-Fehler

Lösung: Falls du die App von einer anderen Domain lädst, musst du CORS-Header setzen:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

---

Testen der Dateispeicherung

1. Öffne die Browser-Konsole (F12 → Console)
2. Gib ein:

fetch('data/test.txt', { method: 'PUT', body: 'test' })
  .then(r => r.text())
  .then(console.log)
  .catch(console.error);

3. Wenn du eine erfolgreiche Antwort erhältst, funktioniert die Dateispeicherung

---

Empfehlung

Für Shared Hosting: Verwende einfach localStorage (Lösung 1). Die Daten werden im Browser gespeichert und funktionieren ohne Server-Konfiguration.

Für eigene Server: Konfiguriere Apache mit der .htaccess-Datei (Lösung 2) oder verwende das PHP-Backend (Lösung 3).

Für Entwickler: Verwende den Node.js-Server (Lösung 4) oder einen lokalen Entwicklungsserver wie python -m http.server.