Einen Webserver einrichten (2): Express.js für eine statische Website installieren

2019/06/18

In diesem Tutorial geht es darum, einen einfachen Webserver auf Express.js-Basis zu installieren und zu testen. Dieses Tutorial ist im Rahmen der Bremer SummerSchool "Informatica Feminale" für den Kurs "Einführung in die modere Webentwicklung" (2019) entstanden.

Für eine Anleitung zur Installation von Node.js und npm in Vorbereitung auf das Setup des Express.js-Servers, gibt es [hier]/2019/06/18/node-js-und-npm-installieren/) das entsprechende Tutorial.

Den Webserver einrichten / Express.js installieren

  • Lege auf deinem Computer einen Ordner an, in dem du während des Kurses arbeiten möchtest (z. B. "Neues-Projekt1"). Den Ort kannst du beliebig festlegen.
  • Innerhalb dieses Ordners lege eine neue Datei an (in Windows z. B. per Rechtsklick: "Neues Textdokument") mit dem Namen "server.js".
  • Innerhalb des gleichen Ordners lege einen neuen Unterordner an mit dem Namen "public". Darin erzeugst du eine neue Datei "index.html".
  • (In Windows solltest du sicher gehen, dass sich die Dateiendung mitändert, und nicht etwa eine Datei nach dem Schema "server.js.txt" und "index.html.txt" entstanden ist!)
  • Navigiere im Terminal zum neu angelegten Ordner (z. B. "Neues-Projekt1"). Der Befehl dazu lautet "cd" gefolgt vom entsprechenden Pfad. Den Dateipfad kannst du in Windows mit einem Rechtsklick auf den Ordner unter "Eigenschaften" herausfinden. Für ein Windows-System könnte der Befehl so lauten:
    cd C:\Users\Ulrike\Projekte\Neues-Projekt1
    Für ein macOS-System wäre dies ein Beispiel-Befehl:
    cd /Volumes/PROJECTS/Neues-Projekt1
    Wenn du erfolgreich warst, wird der Pfad, in dem du dich nun befindest, der neuen Kommandozeile voran gestellt.
  • Installiere in diesem Ordner das npm-Paket "Express.js", den de-Facto-Standard für Webanwendungen unter Node.js mit dem Terminal-Befehl

    npm install express

  • Während des Installationsprozesses könnten gelb markierte "Warnings" erscheinen; diese kannst du ignorieren.
  • Öffne die Datei "server.js" in einem Texteditor (z. B. "Sublime"), füge diesen Quellcode ein und speichere die Datei:

    const express = require("express");
    const app = express();
    app.use(express.static('public'));
    app.listen(3000);
    console.log("Server started on port 3000");

  • Öffne die Datei "index.html" im Unterordner "public" im Editor, füge einen beliebigen Text ein, z. B. "Hello World!" und speichere die Datei.
  • Jetzt müssen wir unseren Webserver nur noch starten. Im Quellcode haben wir ihn bereits angewiesen, die Datei index.html auszugeben.

Den Webserver starten

Prüfe noch einmal, ob du dich in deinem Terminal im richtigen Dateipfad (im Beispiel "..\Neues-Projekt1") befindest. Wenn ja, gib ins Terminal den folgenden Befehl ein:

node server.js
Navigiere in deinem Browser zur URL http://127.0.0.1:3000/ oder http://localhost:3000/. Wenn alles geklappt hat, wird dort nun der Inhalt des von dir angelegten HTML-Dokuments angezeigt, also z. B. "Hello World".

Den Webserver stoppen

Den gestarteten Webserver kannst du jederzeit wieder stoppen. Dann ist er nicht mehr unter der URL http://127.0.0.1:3000/ erreichbar. Im Terminal musst du dazu lediglich [Strg] + [C] bzw. [Ctrl] + [C] drücken.