thats-me/.devcontainer

DevContainer Setup für Thats-Me

Was ist ein DevContainer?

Ein DevContainer ist eine vollständige Entwicklungsumgebung in Docker. Cursor/VSCode läuft direkt im Container und Sie entwickeln mit allen Tools, die bereits vorinstalliert sind.

Voraussetzungen

1. Docker Desktop muss laufen
2. Traefik Proxy als externes Netzwerk:

   docker network create proxy
   

DevContainer starten

1. In Cursor/VSCode:

   • Drücken Sie Cmd+Shift+P (macOS) oder Ctrl+Shift+P (Windows/Linux)
   • Wählen Sie: "Dev Containers: Reopen in Container"
   • Warten Sie, bis alle Container gebaut und gestartet sind

2. Beim ersten Start:

   • Der Laravel Container wird gebaut (kann einige Minuten dauern)
   • Alle Services werden gestartet (MySQL, Redis, Mailpit, Quasar)
   • Sie werden automatisch im Laravel Container eingeloggt

Was passiert beim Start?

Der DevContainer startet folgende Services:

• laravel.test - Laravel Backend (Sie arbeiten in diesem Container)
• mysql - Datenbank
• redis - Cache/Queue
• mailpit - E-Mail Testing
• quasar.app - Frontend App (läuft automatisch)

Arbeiten im Container

Terminal

Das Terminal in Cursor/VSCode ist bereits im Container. Sie können direkt arbeiten:

# Sie sind im /var/www/html Verzeichnis (= ./backend vom Host)
php artisan migrate
php artisan serve
composer install
npm install
npm run dev

Verfügbare Services

Im DevContainer können Sie direkt auf die anderen Services zugreifen:

# MySQL Verbindung
mysql -h mysql -u sail -p
# Passwort: password

# Redis
redis-cli -h redis

# Composer
composer install
composer update

# Artisan
php artisan migrate
php artisan tinker

Zugriff von außerhalb

Von Ihrem Browser (Host)

Die Ports werden automatisch weitergeleitet:

• Laravel App: http://localhost (Port 80)
• Vite Dev Server: http://localhost:5173
• Mailpit Dashboard: http://localhost:8025
• Quasar App: http://localhost:9000

Mit Traefik

Wenn Traefik läuft, können Sie auch die Domains verwenden:

• https://thats-me.test
• https://portal.thats-me.test
• https://api.thats-me.test
• https://app.thats-me.test
• https://assets.thats-me.test

Backend .env Konfiguration

Stellen Sie sicher, dass backend/.env folgende Werte hat:

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=thats-me
DB_USERNAME=sail
DB_PASSWORD=password

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025

REDIS_HOST=redis
REDIS_PORT=6379

Vite Dev Server starten

# Im DevContainer Terminal
npm install
npm run dev

Vite läuft dann auf Port 5173 und ist verfügbar unter:

• http://localhost:5173 (vom Host)
• https://assets.thats-me.test (mit Traefik)

Quasar App

Die Quasar App läuft automatisch in einem separaten Container und ist verfügbar unter:

• http://localhost:9000 (vom Host)
• https://app.thats-me.test (mit Traefik)

Troubleshooting

Container startet nicht

# Schließen Sie den DevContainer
# Öffnen Sie ein normales Terminal auf dem Host
docker-compose down -v
docker-compose build --no-cache
# Dann neu starten: "Dev Containers: Reopen in Container"

"Dockerfile not found" Fehler

Stellen Sie sicher, dass Laravel Sail installiert ist:

cd backend
composer require laravel/sail --dev

Permission-Probleme

Die User-IDs in devcontainer.json anpassen:

"containerEnv": {
    "WWWUSER": "1000",  // Ihre User-ID
    "WWWGROUP": "1000"  // Ihre Group-ID
}

Finden Sie Ihre IDs mit:

id -u  # User ID
id -g  # Group ID

Logs ansehen

# Im DevContainer Terminal
docker-compose logs -f

# Nur MySQL
docker-compose logs -f mysql

# Nur Quasar
docker-compose logs -f quasar.app

DevContainer verlassen

1. Drücken Sie Cmd+Shift+P / Ctrl+Shift+P
2. Wählen Sie: "Dev Containers: Reopen Folder Locally"

Container stoppen

Nach dem Verlassen des DevContainers:

docker-compose down

Vorteile des DevContainers

✅ Alle arbeiten mit der gleichen Umgebung
✅ Keine lokale PHP/MySQL Installation nötig
✅ Automatische Service-Verwaltung
✅ Isolierte Entwicklungsumgebung
✅ Einfaches Onboarding für neue Entwickler