Express: Einen einfachen Server mit Express.js und Node.js bauen

Eingestellt von am

Einleitung

Du möchtest einen Server zur Verwaltung bestimmter Anfragen erstellen? Dann bist du genau hier richtig! In diesem Tutorial geht es darum, einen einfachen Server mit ExpressJS und NodeJS zu erstellen. 

ExpressJS

ExpressJS ist ein weitaus bekanntes Framework zum Erstellen einer REST-API. Mit Express kannst du ganz einfach einen Server erstellen, welcher bestimmte Anfragen auf bestimmten Routen so beantwortet wie du es möchtest.

Vorraussetzungen

  • Javascript kenntnisse
  • NodeJS auf dem Rechner
  • Wissen wie HTTP Funktioniert mit allen Methoden
  • Wissen was ein Server ist und tut


NodeJS

NodeJS ist eine serverseitige, eventbasierte JavaScript-Laufzeitumgebung. Um einen Backend Server mit ExpressJS zu erstellen, muss NodeJS und npm (NodeJS package manager) auf deinen Rechner installiert sein. Mit dem folgenden Befehl kannst du prüfen ob du diese schon bereits installiert hast:

node -v
npm -v

Falls beides nicht installiert ist, kannst du es ganz einfach auf der NodeJS Webseite installieren. Der Package Manager wird automatisch mit installiert.

Los geht´s

Wir sind jetzt bereit einen einfachen Server mit ExpressJS aufzubauen. Dafür müssen wir ein leeres Projekt erstellen und mit unserer IDE öffnen. Um aus dem leeren Projekt ein NodeJS Projekt zu machen müssen wir folgenden Befehl in das Projekt Terminal eingeben:

npm init

Nun werden uns einige Fragen gestellt, wie zum Beispiel der Name des Projektes oder der Name des Author. Einfach mit der Tastatur eingeben und mit der ENTER-Taste bestätigen. Ganz wichtig: Es wird auch nach dem "entry point" gefragt. Dies ist sehr wichtig, damit NodeJS weiß, welche Datei ausgeführt werden soll! Es sollte nun eine neue Datei automatisch erzeugt werden:


Diese Datei ist das Herz des Projektes. In dieser Datei befinden sich alle notwendigen Informationen, wie zum Beispiel die "Dependencies". Diese Information gibt dem Projekt bescheid, von welchen externen Paketen das Projekt angewiesen ist. 
Jetzt wo wir gerade von Dependencies sprechen, müssen wir nun unser ExpressJS Framework installieren. Pakete (libraries) kann man ganz einfach mit dem Befehl "npm install <NAME>" installieren. Also tun wir das auch:

npm install express

Nach kurzer Zeit sollte die "package.json" Datei bearbeitet werden und ein der neue Abschnitt "dependencies" dar stehen. Außerdem wurde eine neue Datei und ein neuer Ordner automatisch erzeugt. "node_modules" ist ein sehr wichtiger Ordner! Denn darin befinden sich alle Module von unseren "dependencies" (in unserem Fall nur von ExpressJS). Das Projekt sollte nun so aussehen:



Sieht so aus? Super, weiter geht´s! Wir haben unser Projekt jetzt so vorbereitet, dass wir nun unseren kleinen Server aufbauen können. Dazu erstellen wir die Datei "index.js". Achtung: Die Datei muss genauso heißen wie sie unter dem Abschnitt "main" benannt wurde (package.json). Nun fängt das Coden an. Um mit Express zu arbeiten, müssen wir es importieren:

const express = require('express');

Nun müssen wir ein Objekt von Express erstellen um auf die Methoden zugreifen zu können:

const app = express();

Was braucht jeder Server? Richtig einen Port auf dem dieser auf Anfragen warten soll:

const PORT = 8080;

Lass uns jetzt endlich unsere erste Route erstellen. Da wir nun mit der Konstante "app" auf alle Methoden von Express zugreifen können, nutzen wir diese auch zu unserem Vorteil. Denn Express bietet uns eine Menge Methoden an. Wir möchten eine einfach /GET Route bauen, auf dieser beim Aufrufen "Hallo liebe Freunde" ausgegeben wird. Express hat für jede HTTP-Methode eine Methode parat:

app.get('/', (req, res) => {
    res.send('Hallo liebe Freunde!');
});

Was passiert hier:
  1. Es wird die Methode "get" aufgerufen
  2. Die Methode braucht als aller erstes den Endpoint auf welche der Server bei dieser Anfrage reagieren soll
  3. Dann erstellen wir eine Methode mit den Parametern "req" und "res" als zweiten Parameter. 
  4. "req" steht für Request. Dieser Parameter wird mit allen Daten der Anfrage gefüllt. Zum Beispiel wenn man ein LogIn System einbauen möchte, muss der Server ja irgendwie auf die eingegebenen Daten vom User zugreifen können. Diese wird in der Request gespeichert.
  5. "res" steht für Response. Das ist die Antwort vom Server. Wenn es komplexer wird kann es nicht nur zum Senden von Nachrichten kommen sondern auch zum Senden von Fehlerstatusmeldungen.
Zusammengefasst: Wir erstellen eine /GET Route mit der "get" Methode und lassen diese auf dem Endpoint '/' stehen. Bei jeder Anfrage auf diesem Endpoint wird der zweite Parameter aktiviert und diese wird dann ausgeführt. Simple oder?
Wir sind fast fertig! Wir müssen nur noch unserem Server bescheid geben, dass er auf unserem Port warten soll auf Anfragen:

app.listen(PORT, () => console.log('Juhu unser Server ist online!'));

Was passiert hier:
  1. Wir greifen auf die "listen" Methode von Express zu. Diese ist dafür da den Server auf einen bestimmten Port warten zu lassen
  2. Als erster Parameter geben wir den Port an, an dem der Server warten soll
  3. Als zweiten Parameter geben wir eine Callback mit, welche ausgeführt wird, wenn der Server online ist.
Das war´s! So sollte nun unsere "main" Datei aussehen:

const express = require('express');

const app = express();

const PORT = 8080;

app.get('/', (req, res) => {
    res.send('Hallo liebe Freunde!');
});

app.listen(PORT, () => console.log('Juhu unser Server ist online!'));

Wir starten wir nun unseren Server und testen diesen? Ganz einfach! Ein einfacher Befehl in unserem Projekt Terminal startet unseren Server:

node index.js

Ganz wichtig: Wenn deine main Datei einen anderen Namen hat, dann musst du diesen statt "index.js" nutzen! 
Unsere Konsole sollte uns nun mitteilen, dass der Server online ist und wir prüfen unsere Route indem wir den Endpoint im Browser öffnen:

Fazit

In wenigen Schritten haben wir unseren ersten Server aufgebaut. Natürlich wurde alles so einfach wie möglich gehalten, um den Einstieg vorerst einfach zu machen. Ein Backend Server ist in der Regel viel komplexer. Deswegen schön weitere Beiträge auf dem Blog lesen und ein wahrer Fullstacker werden!
Vielen Dank.

Kommentare

Kommentar veröffentlichen