Entwicklungsumgebung für WEB-Vorlesung

.devcontainer/.env

@@ -0,0 +1,4 @@
+POSTGRES_USER=devuser
+POSTGRES_PASSWORD=devpass
+POSTGRES_DB=devdb
+POSTGRES_HOSTNAME=localhost

.devcontainer/Dockerfile

@@ -0,0 +1,4 @@
+FROM mcr.microsoft.com/devcontainers/go:1-1.24-bookworm
+
+# PostgreSQL-Client installieren
+RUN apt-get update && apt-get install -y postgresql-client

.devcontainer/devcontainer.json

@@ -0,0 +1,31 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/go-postgres
+{
+	"name": "Go & PostgreSQL",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "app",
+	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Configure tool-specific properties.
+	"customizations": {
+		"vscode": {
+      		"extensions": [
+				"ms-vscode.live-server",
+				"42Crunch.vscode-openapi",
+				"ms-ossdata.vscode-pgsql"
+			]
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [5432]
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "go version",
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,29 @@
+version: '3.8'
+
+volumes:
+  postgres-data:
+
+services:
+  app:
+    build: 
+      context: .
+      dockerfile: Dockerfile
+    env_file:
+        - .env
+
+    volumes:
+      - ../..:/workspaces:cached
+      
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    env_file:
+      - .env

.gitignore

@@ -0,0 +1 @@
+*Zone.Identifier

README.md

@@ -0,0 +1,91 @@
+# Entwicklungsumgebung mit VS Code, Docker und Dev Containers
+
+Diese Anleitung beschreibt die Schritte zur Installation von Visual Studio Code, Docker und der Dev-Container-Erweiterung.
+
+---
+
+## 1. Visual Studio Code installieren
+
+**Download:** [https://code.visualstudio.com/](https://code.visualstudio.com/)
+
+**Schritte:**
+1. Webseite öffnen.
+2. Betriebssystem auswählen.
+3. Installationsdatei herunterladen.
+4. Installation ausführen.
+5. VS Code starten.
+
+---
+
+## 2. Docker installieren
+
+**Download:** [https://www.docker.com/products/docker-desktop](https://www.docker.com/products/docker-desktop)
+
+**Schritte:**
+1. Webseite öffnen.
+2. Betriebssystem auswählen.
+3. Docker Desktop herunterladen.
+4. Installation ausführen.
+5. Docker starten.
+6. Überprüfen in Terminal oder Kommandozeile mit:
+   ```bash
+   docker --version
+   ```
+
+---
+
+## 3. Dev-Container-Erweiterung installieren
+
+**Schritte:**
+1. VS Code öffnen.
+2. Erweiterungsansicht (_Extensions_) öffnen (`Strg+Shift+X`).
+3. Nach **"Dev Containers"** suchen.
+4. Erweiterung von Microsoft installieren.
+
+---
+
+## 4. Dev-Container starten
+
+**Entwicklungsumgebung in Dev-Container öffnen:**
+1. Repository aus Gitty lokal klonen, z. B. über Terminal oder Git-Client.
+```bash
+git clone https://gitty.informatik.hs-mannheim.de/WEB-IB-WS2526/lab-development-ib.git
+```
+2. VS Code starten.
+3. Den geklonten Projektordner über „Datei → Ordner öffnen…“ auswählen.
+4. Befehlspalette öffnen (`Strg+Shift+P`).
+5. Folgenden Befehl eingeben: 
+```
+Dev Containers: Open Folder in Container...
+```
+6. Die Container-Umgebung wird automatisch erkannt und gestartet.
+7. Das Projekt öffnet sich im Container und ist einsatzbereit.
+
+---
+
+## 5. Funktionstest
+
+1. Wechseln Sie in den Ordner `web/01/demos/``
+2. Öffnen Sie `HalloWelt.html` im Editor
+3. Testen Sie die Browser-Preview:
+	1. Klicken Sie auf das Icon rechts oben:
+	```
+	Open Preview
+	```
+	→ es sollte eine Vorschau der geöffneten HTML-Datei erscheinen.
+4. Testen Sie die Go-Installation:
+	1. Öffnen Sie einen Terminal
+	2. Geben Sie folgenden Befehl ein:
+	```go
+	go version
+	``` 
+	→ es sollte `go version go1.24.5 linux/arm64` erscheinen
+
+## Hinweise
+
+- Docker muss aktiv sein, bevor VS Code mit Containern arbeitet.
+- Bei Problemen: VS Code und Docker neu starten.
+- Weitere Informationen:
+  - [VS Code Dokumentation](https://code.visualstudio.com/docs)
+  - [Docker Dokumentation](https://docs.docker.com/)
+  - [Dev Containers](https://containers.dev/)

web/01/demos/HalloWelt.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Meine erste Webseite</title>
+  </head>
+  <body>
+    <h1>Hallo Welt!</h1>
+    <p>Das ist meine erste HTML-Seite.</p>
+  </body>
+</html>