commit 4504e00bf566962732664a431f12bf61795f9d61 Author: Teena Steger Date: Fri Sep 12 12:57:28 2025 +0000 Entwicklungsumgebung für WEB-Vorlesung diff --git a/.devcontainer/.env b/.devcontainer/.env new file mode 100644 index 0000000..ef3839e --- /dev/null +++ b/.devcontainer/.env @@ -0,0 +1,4 @@ +POSTGRES_USER=devuser +POSTGRES_PASSWORD=devpass +POSTGRES_DB=devdb +POSTGRES_HOSTNAME=localhost diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000..3f6c882 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..55d95de --- /dev/null +++ b/.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" +} diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml new file mode 100644 index 0000000..3cfd494 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..222b181 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*Zone.Identifier \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..41778c4 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/web/01/demos/HalloWelt.html b/web/01/demos/HalloWelt.html new file mode 100644 index 0000000..a18a617 --- /dev/null +++ b/web/01/demos/HalloWelt.html @@ -0,0 +1,11 @@ + + + + + Meine erste Webseite + + +

Hallo Welt!

+

Das ist meine erste HTML-Seite.

+ + \ No newline at end of file