Webserver mit NodeJS & Express einrichten

Einen Webserver mit NodeJS und dem Express-Framework zu erstellen ist super einfach. Bevor es losgeht, solltest kurz checken ob du folgende Voraussetzungen mitbringst:

1. Du hast basic Skills im Umgang mit dem Terminal
2. Du hast NodeJS bereits auf deinem Betriebssystem installiert – Geht easy über einen Installer.
3. Dir ist npmjs.org ein Begriff und du verstehst grob wie die Magie hinter den npm Packages funktioniert

Falls ja, nice! Lets rock 🪨 – wenn nein, auch nicht schlimm. In diesem Terminal-Tutorial erfährst du mehr über die wichtigsten Befehle. Außerdem bekommst du eine Hands-On-Anleitung wie du npm-Packages installierst.

Projekt einrichten 🚀

Als erstes initialisiert du dein Projekt. Dazu navigierst du im Terminal in einen Ordner deiner Wahl und gibst folgenden Befehl ein:

npm init -y

Jetzt solltest du ein neue Datei in deinem Verzeichnis sehen – die package.json. Sie enthält einige Infos zu deinem Projekt. Dort kannst du z.B. den Projektnamen anpassen oder eine individuelle Versionsnummer vergeben.

In der der Datei erweiterst du nun bei scripts: das Skript um folgende Zeile

"start": "node index.js"

Deine package.json sollte jetzt so aussehen:

{
  "name": "howto_webserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Achte auf das Komma in Zeile 7, wenn du die Zeile einfügst. Außerdem speichern nicht vergessen! 😉

Du hast ab jetzt die Macht mit dem Befehl npm start den Webserver zu starten. Alternativ ginge das auch mit node index.js. Wenn du genau aufgepasst hast, dann wirst du feststellen, dass der npm-start-Befehl im Grunde nur ein Alias für node index.js ist. Mit anderen Worten gesagt, kannst du mit beiden Befehlen den Webserver starten. Es ist dir überlassen welche Variante du bevorzugst.

Lege als nächstes eine Datei index.js auf der gleichen Ebene wie die package.json an.

Tipp

Wenn du einen schlanken und flexiblen Code-Editor suchst, dann empfehle ich dir Visual Studio Code von Microsoft. Er ist kostenlos und für alle gängigen Betriebssysteme verfügbar. Außerdem wird er von einer großen Community unterstützt. Außerdem lassen sich über den Markplatz Plugins installieren. Damit kannst du deine Entwicklungsumgebung individuell gestalten und durch nützliche Erweiterungen deinen Workflow verbessern.

Webserver einrichten 🧑‍💻

Bevor es mit dem Coding losgehen kann, musst du noch Express installieren.  

npm install --save express

In der index.js importierst du jetzt das eben installierte Express-Framework.

const express = require('express')

Du hast jetzt Zugriff auf Express und erstellet eine neue Instanz:

const app = express()

Über die Variable app, hast du jetzt Zugriff auf Funktionen mit denen du deinen Webserver konfigurieren kannst.

Für den ersten Schritt deiner Webserver-Config, musst du der Variable port eine Portnummer zuweisen. Ports sind wichtig für die Kommunikation zwischen Client und Server. Die Portnummer ist danei willkürlich gewählt. Als Best Practice unter Developern haben sich jedoch Nummernkreise rund um 300x, 800x oder 900x etabliert.

const port = 3001

Im zweiten Schritt konfigurieret du den Port über welchen dein Webserver erreichbar sein soll:

app.listen(port, (err) => {
    if (err) {
        console.log('Error: ', err)
    } else {
        console.log('Server is up on port: ', port)
    }
})

Ok, soweit so gut. Aber was genau macht der Code?

Mit app.listen(port, (err) => {} ) wird der Webserver angewiesen über den Port 3001 ein Kommunikationkanal zu öffnen. Über diesen können Clients, wie z.B. Browser, ihre Anfragen stellen. Sollte etwas schief gehen sorgt die Error-Funktion (err) für eine Fehlerausgabe. Für den Fall dass alles klappt, gibt die Konsole die entsprechende Nachricht samt der Portnummer aus.

Weberserver testen 🧪

Eingangs hast du folgende Zeile in der package.json ergänzt:

"start": "node index.js"

An dieser Stelle schließt sich der Kreis. Du kannst nun folgenden Befehl in deinem Terminal eingeben um den Webserver zu starten 🚀

npm start

Damit wird node index.js ausgeführt. Wenn du alles richtig gemacht hast, dann solltest du die Bestätigung im Terminal bekommen, dass dein Server läuft.

Herzlichen Glückwunsch, du hast deinen Webserver erfolgreich programmiert und gestartet! 🥳

Jetzt gibt es allerdings nur einen Haken. Wenn du in deinem Browser folgende URL öffnest http://localhost:3001, wirst du einen Fehler zurückbekommen. Keine Sorge, das ist normal.

Das Problem: Zwar ist dein Webserver theoretisch über den Port 3001 erreichbar, aber es ist nicht definiert mit was er konkret antworten soll sobald eine Anfrage von einem Browser kommt. Das schauen wir im nächsten Schritt an.

Webserver Response konfigurieren

Um den Response (Antwort) des Webserver zu konfigurieren, muss erst mal festgelegt werden mit was konkret geantwortet werden soll. In diesem Fall handelt es sich um einen Webserver, also macht es Sinn mit Webinhalten zu antworten. Diese bestehen in der Regel aus HTML, CSS und Javascript. Für dieses Beispiel werden wir ausschließlich HTML Inhalte verwenden. Du kannst aber gerne CSS und Javascript Dateien ergänzen.

Bevor du eine HTML Datei erstellst, lege zunächst einen neuen Ordner mit dem Namen public im Projekt an. In den Ordner kannst du jetzt eine neue Datei index.html erstellen. Das sollte dann so aussehen:

Die HTML Datei belommt einen einfachen Inhalt:

<!DOCTYPE html>
<html>
	<div>Hello World</div>
</html>

Cool, nachdem der Server jetzt weiß was er antworten soll, musst du ihm jetzt nur noch sagen wie er antworten soll. Dafür gibst du ein öffentliches Verzeichnis frei. Wechsle erneut in die index.js.

Um einen spezifischen Ordner für die Öffentlichkeit (keine Angst, alles spielt sich noch lokal bei uns auf dem Rechner ab. Du gibst nichts frei was über das Internet erreichbar wäre) freizugeben, brauchst du zunächst seinen gesamten Pfad, ausgehend von dem Ursprungsverzeichnis (Root). NodeJS hilft dir mit der Umgebungsvariable  __dirname. Sie gibt dir den gesamten Verzeichnispfad, bis zu der Datei in der du sie auferufen hast, aus.

In meinem Fall also:

/Users/kermin/k_tuts/howto_webserver

Du kannst das selbst testen. Gebe dir mit der Konsole deinen Pfad aus.

console.log(__dirname)

Es gibt nur einen Haken: Du willst nicht dass das gesamte Verzeichnis des Projektes freigegeben, sondern lediglich den public Ordner. Dafür musst du den korrekten Pfad mit dem path Modul zusammenfügen.

An den Anfang deiner index.js importierst du das Modul:

const path = require('path')

Nice, jetzt hast du alles was du brauchst, um Express sagen zu können, wo dein öffentlicher Ordner liegt. Springe dazu einfach in eine Zeile nach der app Deklaration.

app.use(express.static(path.join(__dirname, 'public')))

Ok, ich gebe es zu: Das sieht kompliziert aus. Aber schauen wir genauer hin. Das sind nämlich lediglich drei Funktionen ineinander verschachtelt:

1. app.use() ist eine sogenannte Middleware Funktion. Sie sorgt dafür, dass die Funktion im Parameter, ausgeführt wird, bevor der Webserver gestartet wird.
2. express.static() sorgt für die Bereitstellung deiner statischen Dateien, sobald der Webserver erfolgreich läuft
3. path.join(__dirname, 'public')) liefert den vollständigen Pfad zum öffentlichen Verzeichnis. In meinem Fall ist das z.B. /Users/kermin/k_tuts/howto_webserver/public

Das wars! Nicht mehr und nicht weniger. Bist du bereit deinen Webserver erneut zu testen? Lets go 👇

✅ Webserver Neustart

Bevor es losgeht, solltest du deinen NodeJS Webserver erst neu starten. Das ist wichtig, da sonst deine Änderungen (die du hoffentlich vorher gespeichert hast) nicht übernommen werden. Um den laufenden Server zu beenden kannst du die Tastenkombination CTRL+C auf Mac, bzw. STRG+C auf Windows benutzen. Wenn das geklappt hat, solltest du wieder im Terminal Befehle eingeben können.

Jetzt noch ein letztes mal den Server starten mit:

npm start

Der Server läuft.

Jetzt kannst du checken ob deine HTML via http://localhost:3001 erreichbar ist. Wenn du alles richtig gemacht hast, solltest dein Browserfenster so aussehen:

Großartig, du. hast es geschafft – dein Webserver läuft! 🎉 🎊 👏

const express = require('express')
const path = require('path')

const app = express()

app.use(express.static(path.join(__dirname, 'public')))

const port = 3001

app.listen(port, (err) => {
    if (err) {
        console.log('Error: ', err)
    } else {
        console.log('Server is up on port: ', port)
    }
})

Fazit & Ausblick

Einen Webserver mit NodeJS und Express zu erstellen ist super einfach und geht schnell. In wenigen Zeilen Code lässt sich der Server konfigurieren um HTML, CSS, Javascript oder Medien Dateien bereitzustellen. Diese sind anschließend über den Webbrowser erreichbar und können nach belieben angepasst werden.

Wie geht es weiter? Du kannst dein HTML erweitern und eine Website daraus machen. Falls du schon Fortgeschritten bist, wäre auch eine kleine Web Applikation denkbar wie z.B. eine To-Do-Liste.

Hast du mal deine Website oder Web App fertiggestellt, dann bring sie ins Netz! Falls du hierfür einen einfachen Weg suchst, könnte dir dieses Tutorial dabei helfen. Lerne wie du schnell und unkompliziert deine Web Apps mit Github und Heroku veröffentlichst.

Abschließend wünsche ich dir viel Spaß mit deinem Webserver! 🚀 🙂