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

comments 3
German / Deutsch / Tutorials

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 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.

3 Comments

  1. Sonja says

    Eine wirklich tolle Anleitung!

    Im Codebeispiel muß in der ersten Zeile jedoch statt
    const express = require(“express”);
    const express = require(‘express’); stehen.

    Dann klappt es 🙂

  2. I am really inspired with your writing skills and also with the layout for your weblog.
    Is that this a paid theme or did you modify it your self?
    Anyway keep up the excellent quality writing, it is uncommon to peer
    a great blog like this one today..

Leave a Reply

Your email address will not be published. Required fields are marked *