modul:m290_guko:learningunits:lu15:theorie:c_server_konfigurieren

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
modul:m290_guko:learningunits:lu15:theorie:c_server_konfigurieren [2025/12/08 08:33] – gkochmodul:m290_guko:learningunits:lu15:theorie:c_server_konfigurieren [2025/12/08 08:50] (aktuell) – gkoch
Zeile 50: Zeile 50:
 ===== Server starten und im Browser testen ===== ===== Server starten und im Browser testen =====
  
-  1. Öffnen Sie in WebStorm das **Terminal** (Projektordner). +  - Öffnen Sie in WebStorm das **Terminal** (Projektordner). 
-  2. Starten Sie den Server mit:+  - Starten Sie den Server mit:
  
 <WRAP box round center 80%> <WRAP box round center 80%>
Zeile 59: Zeile 59:
 </WRAP> </WRAP>
  
-  3. Im Terminal sollte erscheinen: +  - Im Terminal sollte erscheinen: ''Example app listening on port 3000'' 
-     *''Example app listening on port 3000''* +  - Öffnen Sie Ihren Browser und geben Sie ein: ''http://localhost:3000/'' 
- +  - Sie sollten nur das Wort **''Hello World''** im Browser sehen. 
-  4. Öffnen Sie Ihren Browser und geben Sie ein: +  - Server stoppen: Im Terminal ''Strg + C'' (Windows/Linux) oder ''ctrl + C'' (macOS) drücken.
-     ''http://localhost:3000/'' +
- +
-  5. Sie sollten nur das Wort **''test''** im Browser sehen. +
- +
-  6. Server stoppen: +
-     * Im Terminal ''Strg + C'' (Windows/Linux) oder ''ctrl + C'' (macOS) drücken. +
  
 ===== Wichtig: Wir haben keinen „klassischen“ Webauftritt programmiert ===== ===== Wichtig: Wir haben keinen „klassischen“ Webauftritt programmiert =====
Zeile 78: Zeile 71:
 Sie haben in dieser Learning Unit **kein HTML**, **kein CSS** und **kein JavaScript für den Browser** geschrieben.   Sie haben in dieser Learning Unit **kein HTML**, **kein CSS** und **kein JavaScript für den Browser** geschrieben.  
 Sie haben **JavaScript für den Server** geschrieben. Sie haben **JavaScript für den Server** geschrieben.
- 
   * Der Browser spielt hier nur die Rolle eines **Clients**, der eine Anfrage an Ihren Server sendet.   * Der Browser spielt hier nur die Rolle eines **Clients**, der eine Anfrage an Ihren Server sendet.
   * Der Express-Server beantwortet diese Anfrage mit einer Antwort (''Response'').   * Der Express-Server beantwortet diese Anfrage mit einer Antwort (''Response'').
-  * Der Browser zeigt einfach an, was im **Response-Body** steht (in unserem Fall der Text ''test'').+  * Der Browser zeigt einfach an, was im **Response-Body** steht (in unserem Fall der Text ''Hello World.'').
 </WRAP> </WRAP>
  
Zeile 91: Zeile 83:
  
  
-===== Komfort: npm-Scripts & nodemon =====+===== Entwickler-Komfort: npm-Scripts & nodemon =====
  
 Wenn Sie nach jeder Codeänderung den Server mit ''node index.js'' neu starten müssen, ist das mühsam.   Wenn Sie nach jeder Codeänderung den Server mit ''node index.js'' neu starten müssen, ist das mühsam.  
Zeile 102: Zeile 94:
 ==== 1. nodemon installieren ==== ==== 1. nodemon installieren ====
  
-Installieren Sie ''nodemon'' als Entwicklungsabhängigkeit:+Installieren Sie ''nodemon'' als Entwicklungs-Tool:
  
 <WRAP box round center 80%> <WRAP box round center 80%>
Zeile 112: Zeile 104:
 Dadurch ergänzt ''npm'' Ihre ''package.json'' um einen Eintrag unter ''devDependencies'' für ''nodemon''. Dadurch ergänzt ''npm'' Ihre ''package.json'' um einen Eintrag unter ''devDependencies'' für ''nodemon''.
  
 +**Was bedeutet ''devDependencies''?**
 +
 +In ''package.json'' gibt es zwei wichtige Bereiche für Pakete:
 +
 +  * ''dependencies'' → Pakete, die Ihre Anwendung **zum Ausführen** braucht (z.B. ''express''). Ohne diese Pakete kann der Server in Produktion nicht laufen.
 +  * ''devDependencies'' → Pakete, die Sie **nur während der Entwicklung** brauchen (z.B. Test-Frameworks, Build-Tools – und ''nodemon'').
 +
 +''nodemon'' ist ein typisches **Entwicklungs-Tool**:  
 +Es hilft Ihnen beim Programmieren (automatischer Neustart bei Änderungen), wird aber auf einem späteren Produktionsserver **nicht benötigt**.  
 +Darum speichern wir es mit ''--save-dev'' in den ''devDependencies''.
 +
 +{{:modul:m290_guko:learningunits:lu15:theorie:screenshot_2025-12-08_at_08.45.36.png?direct&700|}}
  
 ==== 2. Scripts in ''package.json'' ergänzen ==== ==== 2. Scripts in ''package.json'' ergänzen ====
  
-Öffnen Sie ''package.json'' und ergänzen Sie den Abschnitt ''scripts'' wie folgt (Beispiel):+Öffnen Sie ''package.json'' und ergänzen Sie den Abschnitt ''scripts'' wie folgt (Beispiel, wie im Screenshot oben):
  
 <WRAP box round center 80%> <WRAP box round center 80%>
Zeile 126: Zeile 130:
 </WRAP> </WRAP>
  
-Sie können dann:+Damit definieren Sie zwei Startvarianten:
  
-  * mit ''npm start'' den Server einmalig starten, +  * **''npm start''**   
-  * mit ''npm run dev'' den Server im Entwicklermodus mit automatischem Neustart starten.+    - Startet den Server mit ''node index.js''.   
 +    - Der Prozess läuft „ganz normal“ ohne automatischen Neustart.   
 +    - Das entspricht eher einem **Produktivbetrieb**: Der Server läuft stabil, Änderungen am Code erfordern ein manuelles Neustarten.
  
-Wenn Sie nun in ''index.js'' etwas ändern und speichern, startet ''nodemon'' den Server automatisch neu.+  * **''npm run dev''**   
 +    - Startet den Server mit ''nodemon index.js''.   
 +    - ''nodemon'' beobachtet Ihre Dateien und startet den Server **automatisch neu**, wenn Sie etwas ändern und speichern.   
 +    - Das ist ideal für die **Entwicklung im Unterricht**, weil Sie sofort die Wirkung Ihrer Änderungen sehen. 
 + 
 +Wenn Sie nun in ''index.js'' (oder Ihrer Server-Datei) etwas ändern und speichern, startet ''nodemon'' den Server bei **''npm run dev''** automatisch neu.   
 +Sie müssen ''node index.js'' nicht jedes Mal von Hand ausführen.
  
  
 ===== node_modules & IDE-Hinweise ===== ===== node_modules & IDE-Hinweise =====
  
-  * Der Ordner ''node_modules/'' kann sehr gross werden.   +  * Der Ordner ''node_modules/'' kann sehr gross werden. Er wird von ''npm'' automatisch verwaltet und muss **nicht** manuell bearbeitet werden.
-    Er wird von ''npm'' automatisch verwaltet und muss **nicht** manuell bearbeitet werden.+
   * Für Abgaben (z.B. in Moodle) reicht meist:   * Für Abgaben (z.B. in Moodle) reicht meist:
     * Quellcode-Dateien (z.B. ''index.js'')     * Quellcode-Dateien (z.B. ''index.js'')
     * ''package.json'' (und optional ''package-lock.json'')     * ''package.json'' (und optional ''package-lock.json'')
-  * In WebStorm können Sie bei Bedarf die **Inlay-Hints** (kleine Typ-Hinweise) deaktivieren, wenn diese Sie stören   +  * In WebStorm können Sie bei Bedarf die **Inlay-Hints** (kleine Typ-Hinweise) deaktivieren, wenn diese Sie stören (''Settings → Editor → Inlay Hints'').
-    (''Settings → Editor → Inlay Hints'').+
  
 In den nächsten Learning Units werden Sie: In den nächsten Learning Units werden Sie:
Zeile 148: Zeile 158:
   * weitere Routen in Ihrem Express-Server anlegen,   * weitere Routen in Ihrem Express-Server anlegen,
   * Daten nicht nur zurückgeben, sondern auch **annehmen** (''POST'', ''PUT'', ''DELETE''),   * Daten nicht nur zurückgeben, sondern auch **annehmen** (''POST'', ''PUT'', ''DELETE''),
-  * Ihre **persönlichen Use Cases** (z.B. Reisedatenbank, Lieblingsfilme, Geburtstage) mit einer echten MySQL-Datenbank verbinden   +  * Ihre **persönlichen Use Cases** (z.B. Reisedatenbank, Lieblingsfilme, Geburtstage) mit einer echten MySQL-Datenbank verbinden und alle CRUD-Operationen **über den Backend-Server** ausführen.
-    und alle CRUD-Operationen **über den Backend-Server** ausführen. +
- +
----- +
-[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] M290 / BZZ (adapted)+
  
  • modul/m290_guko/learningunits/lu15/theorie/c_server_konfigurieren.1765179185.txt.gz
  • Zuletzt geändert: 2025/12/08 08:33
  • von gkoch