Entwicklung einer Web-App - Teil 2 : Server mit Node.js und Express einrichten

• Coding
• Express
• Node.js

27.6.2023

Für eine Web-Applikation benötigst du ein "Frontend" und ein "Backend". Das Frontend ist die Client-Seite, der visuelle Aspekt der Anwendung, der Teil, den die Benutzer sehen und mit dem sie interagieren. Alles, was im Hintergrund geschieht, wie Struktur, System, Daten und Logik, geschieht im Backend.

Frontend und Backend kommunizieren über Http-Anfragen miteinander. Ein Benutzer gibt z.B. Daten in ein Feld auf dem Frontend ein, die dann an das Backend gesendet werden, das etwas damit macht, z.B. es validiert, wenn es ein Passwort ist oder es in einer Datenbank speichert. Dann sendet es Informationen zurück an das Frontend.

Für mein Backend werde ich Node.js verwenden. Node ist eine Javascript-Laufzeitumgebung zum Ausführen von Javascript-Programmen und wird zum Erstellen von serverseitigen Anwendungen verwendet.

Ich habe Node bereits auf meinem Computer installiert. Wenn du wissen möchtest, wie man es installiert, besuche die Node Website.

Ein neues Node-Projekt initialisieren
Um ein neues Node.js-Projekt zu initialisieren, gebe ich die Befehlszeile npm init -y in das Terminal ein. Dadurch wird eine standardmässige package.json-Datei erzeugt. Diese Datei enthält beschreibende und funktionale Metadaten über das Projekt wie Name, Version und Abhängigkeiten.

NPM steht für "Node Package Manager", mit dem du Abhängigkeiten für dein Node.js-Projekt installieren und verwalten kannst. Der npm-Befehl "init" wird verwendet, um ein neues Node.js-Projekt zu erstellen, und "-y" ist eine Abkürzung für die Option "--yes". Wenn du "-y" oder "--yes" in den "npm init"-Befehl einfügst, werden automatisch die Standardwerte für alle Eingabeaufforderungen akzeptiert, die normalerweise während des Projektinitialisierungsprozesses erscheinen. Das heisst, es überspringt die interaktiven Abfragen und setzt die Standardwerte für Felder wie Paketname, Version, Beschreibung, Einstiegspunkt, Testbefehl, Repository-URL, Autor, Lizenz usw. Mehr dazu findest du in der npm-Dokumentation hier.

Node-Framework "Express" installieren
Als nächstes installiere ich Express mit dem Zeilenbefehl npm install express. Express ist ein Node.js-Framework für Webanwendungen, das umfassende Funktionen für die Erstellung von Web- und Mobilanwendungen bietet. Es ist eine Ebene, die auf Node aufbaut und bei der Verwaltung von Servern und Routen hilft.

Express in der Anwendungsdatei einrichten
Ich brauche eine Javascript-Datei, um meine Anwendung/Applikation auszuführen. Deshalb erstelle ich in meinem Stammverzeichnis eine Datei namens app.js (du kannst die Datei so nennen, wie du willst). Jetzt kann ich diesen Code in meine Datei implementieren, damit ich Express ausführen und einen Server starten kann:

Mein Server sollte jetzt laufen, wenn ich "localhost:3000" in meinen Browser eingebe. Aber ich muss noch definieren, was der Browser "zurückbekommen" soll, womit er antworten muss, also werde ich testweise eine einfache Nachricht "TESTING THE SERVER" senden, die angezeigt werden soll, wenn ich "localhost:3000" aufrufe:

Installation von EJS (Embeded Javascript Templating)
Jetzt werde ich EJS mit der Kommandozeile npm install ejs installieren.
EJS ist eine einfache Templating-Sprache/Engine, mit der man HTML mit einfachem Javascript erzeugen kann. Sie bietet eine einfache Möglichkeit, dynamische Inhalte in unseren Webanwendungen zu erzeugen. In meinem App-Ordner erstelle ich einen neuen Ordner namens "views" und erstelle eine Testdatei namens "test.ejs". Danach werde ich die View-Engine in meiner app.js-Datei wie folgt einrichten:

Ich werde auch das Node-Path-Modul benötigen, das eine Möglichkeit bietet, mit Verzeichnissen und Dateipfaden zu arbeiten. Ausserdem passe ich app.set("views") wie folgt an:

Die Methode path.join() fügt angegebene Pfadsegmente zu einem Pfad zusammen. Du kannst so viele Pfadsegmente angeben, wie du möchtest, und die angegebenen Pfadsegmente müssen durch ein Komma getrennte Strings sein.
Wenn ich nun res.send("TESTING THE SERVER") in res.send("test") ändere, sollte es mich zu meiner test.ejs-Datei im Browser leiten... JA, es funktioniert! Sehr schön, wir kommen voran.

Aktivieren der Bereitstellung statischer Dateien
Als Letztes möchte ich es Express ermöglichen, statische Dateien bereitzustellen. Statische Dateien sind Dateien, die sich nicht ändern, wenn deine Applikation läuft, wie z. B. Bilder, HTML-, CSS- und Javascript-Dateien. Sie werden nicht vom Server generiert, sondern müssen wenn angefordert an den Browser gesendet werden. Dazu muss ich einen Ordner "public" in meinem Projektordner erstellen und danach eine integrierte Middleware verwenden:

Und so haben wir nun unseren Basisserver mit Express eingerichtet.