| Nächste Überarbeitung | Vorhergehende Überarbeitung |
| modul:m290_guko:learningunits:lu15:theorie:b_nodejs_express [2025/12/07 21:39] – angelegt gkoch | modul:m290_guko:learningunits:lu15:theorie:b_nodejs_express [2025/12/08 09:29] (aktuell) – gkoch |
|---|
| * Sie können **Express** als Bibliothek zu Ihrem Projekt hinzufügen. | * Sie können **Express** als Bibliothek zu Ihrem Projekt hinzufügen. |
| |
| | {{ :modul:m290_guko:learningunits:lu15:theorie:m290_lu15_node-backend-server_small.mp4?1040x585 | Nodejs und express installieren und konfigurieren }} |
| | //Dieses Video veranschaulicht den Installationsprozess von Nodejs und express und zeigt das Erstellen eines Backend-Servers.// |
| |
| ===== Schritt 1 – Node.js installieren ===== | ===== Schritt 1 – Node.js installieren ===== |
| <code bash> | <code bash> |
| node -v | node -v |
| npm -v | |
| </code> | </code> |
| </WRAP> | </WRAP> |
| ===== Schritt 2 – Neues Projekt in WebStorm anlegen ===== | ===== Schritt 2 – Neues Projekt in WebStorm anlegen ===== |
| |
| 1. Starten Sie **WebStorm**. | - Starten Sie **WebStorm**. |
| 2. Wählen Sie **''New Project''**. | - Wählen Sie **''New Project''**. |
| 3. Geben Sie dem Projekt einen sinnvollen Namen statt ''untitled'' | - Geben Sie dem Projekt einen sinnvollen Namen statt ''untitled'' (z.B. ''m290-backend-demo''). |
| (z.B. ''m290-backend-demo''). | - Create Git-Repository: optional – nur aktivieren, wenn Sie wissen, was Git ist und damit arbeiten möchten. |
| 4. Git-Repository: | - Language: **JavaScript**. |
| * optional – nur aktivieren, wenn Sie wissen, was Git ist. | - WebStorm erstellt ein neues Projekt. Meistens wird automatisch eine Datei ''package.json''und ''index.js'' erzeugt. |
| 5. Projekttyp: einfaches **JavaScript / Node.js**-Projekt. | |
| 6. WebStorm erstellt ein neues Projekt. Meistens wird automatisch eine Datei **''package.json''** erzeugt. | |
| |
| Typische Dateien: | Typische Dateien: |
| ===== Schritt 3 – Express installieren ===== | ===== Schritt 3 – Express installieren ===== |
| |
| Öffnen Sie das Terminal im Projektordner (unten in WebStorm). | Öffnen Sie das Terminal im Projektordner (unten links in WebStorm). |
| |
| Installieren Sie Express mit: | Installieren Sie Express mit: |
| "main": "index.js", | "main": "index.js", |
| "scripts": { | "scripts": { |
| "start": "node index.js" | "test": "echo \"Error: no test specified\" && exit 1" |
| }, | }, |
| "dependencies": { | "dependencies": { |
| "express": "^4.19.0" | "express": "^5.2.1" |
| } | } |
| } | } |
| |
| Wichtig: | Wichtig: |
| |
| * Ändern Sie ''"type": "module"'' **nur bewusst**. | |
| * Löschen oder benennen Sie ''package.json'' **nicht** um – sonst funktionieren npm und Ihre Abhängigkeiten nicht mehr. | * Löschen oder benennen Sie ''package.json'' **nicht** um – sonst funktionieren npm und Ihre Abhängigkeiten nicht mehr. |
| |
| |
| * **''index.js'' (oder ''app.js''):** | * **''index.js'' (oder ''app.js''):** |
| - Einstiegspunkt Ihrer Anwendung. | * Einstiegspunkt Ihrer Anwendung. |
| - Hier initialisieren Sie Express, definieren Routen und starten den Server. | * Hier initialisieren Sie Express, definieren Routen und starten den Server. |
| * **''package.json'':** | * **''package.json'':** |
| - Enthält Scripts (z.B. ''start'', ''dev'') und die Liste Ihrer Bibliotheken. | * Enthält Scripts (z.B. ''start'', ''dev'') und die Liste Ihrer Bibliotheken. |
| - Wird von ''npm'' verwendet, um die richtigen Pakete zu installieren. | * Wird von ''npm'' verwendet, um die richtigen Pakete zu installieren. |
| * **''node_modules/'':** | * **''node_modules/'':** |
| - Enthält den gesamten Code der installierten Pakete. | * Enthält den gesamten Code der installierten Pakete. |
| - Wird von ''npm'' automatisch verwaltet. | * Wird von ''npm'' automatisch verwaltet. |
| - Sie müssen (und sollten) diesen Ordner **nicht manuell bearbeiten**. | * Sie müssen (und sollten) diesen Ordner **nicht manuell bearbeiten**. |
| |
| In der nächsten Learning Unit bauen Sie nun auf dieser Basis Ihren ersten **Express-Server** auf. | In der nächsten Seite bauen Sie nun auf dieser Basis Ihren ersten **Express-Server** auf. |
| |