Ad-hoc-Webserver absolut simpel

Ein Handvoll HTML-Dateien im eigenen lokalen Webserver zu präsentieren ist einfacher als es klingt. Der Paketmanager NPM für das Web-Framework Node.js kommt mit einem HTTP-Server daher, der keinerlei Konfiguration benötigt.

NPM und Node.JS installieren

Alles, was man benötigt ist Node.JS und NPM.

Mac OS X

Am einfachsten geht es mit dem offiziellen Installer für Node.JS. Der Paketmanager NPM wird dabei gleich mit installiert.

Wer Mac Ports installiert hat, installiert besser den Port mit

sudo port install npm

Mit Homebrew geht es so:

sudo brew install node

Microsoft Windows

Der offizielle Installer für Node.JS führt am schnellsten zum Ziel.

Linux

Entweder npm oder Node.JS sind als Paket in jeder gängigen Distribution verfügbar. Entweder gibt es ein separates Paket für NPM, das Node.JS als Abhängigkeit enthält, oder die Installation von Node.JS enthält NPM schon. Node.JS ist normalerweise als "nodejs" oder einfach "node" verfügbar.

Den Ad-hoc-Webserver starten

Installieren des HTTP-Servers

Der HTTP-Server ist ein Node.JS-Paket und wird über die Kommandozeile (cmd.exe unter Windows) installiert:

$ sudo npm install -g http-server
/opt/local/bin/http-server -> /opt/local/lib/node_modules/http-server/bin/http-server
/opt/local/bin/hs -> /opt/local/lib/node_modules/http-server/bin/http-server
http-server@0.9.0 /opt/local/lib/node_modules/http-server
├── opener@1.4.1
├── corser@2.0.0
├── colors@1.0.3
├── http-proxy@1.13.3 (eventemitter3@1.2.0, requires-port@1.0.0)
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
├── ecstatic@1.4.1 (url-join@1.1.0, he@0.5.0, mime@1.3.4, minimist@1.2.0)
├── union@0.4.4 (qs@2.3.3)
└── portfinder@0.4.0 (async@0.9.0, mkdirp@0.5.1)

Windows-User lassen das "sudo" weg.

Starten des HTTP-Servers

Den Server startet man am einfachsten in dem Verzeichnis, das die anzuzeigenden Dateien enthält:

$ cd /pfad/zu/den/dateien
$ http-server -o

Die zusätzliche Option -o sorgt dafür, dass der Defaultbrowser gestartet wird. Dort sieht man jetzt entweder ein Listing des aktuellen Verzeichnisses oder eine Webseite, falls es nämlich die Datei index.html bzw. index.htm gibt.

Man kann natürlich auch einen anderen Browser starten. Dort muss man dann die Adresse http://127.0.0.1:8080/ eingeben.

Stoppen des Servers

Dazu schließt man einfach das Terminalfenster oder drückt CTRL-C.

Mehrere Server parallel starten

Das funktioniert nicht ohne weiteres, weil die Standardadress http://127.0.0.1:8080 schon benutzt wird. Man kann aber einen anderen Port als 8080 angeben, zum Beispiel 8081:

$ http-server -o -p 8081

Falls Port 8081 auch besetzt ist, wählt man einen anderen zufälligen Port zwischen 1024 und 65535.

Auf Mobilgeräten browsen

Wenn die Firewall entsprechend konfiguriert ist, kann man auch mit mobilen Geräten auf dem Ad-Hoc-Server browsen. Die verfügbaren Adressen werden nach dem Start des Servers im Terminalfenster angezeigt.

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.1.2:8080
Hit CTRL-C to stop the server

Die erste IP-Adresse 127.0.0.1 ist immer exakt gleich und ist nur vom eigenen Computer aus erreichbar. Alle anderen IPs kann man aus dem lokalen Netzwerk erreichen.

Das Eintippen der Adresse auf den Mobilgeräten kann man sich mit QR-Codes ersparen. Dazu kopiert man die Adresse mit Strg-C in die Zwischenablage, geht zu einem der zahllosen Online-QR-Code-Generatoren, kopiert die Adresse mit Strg-V und scannt dann den QR-Code mit einer Scanner-App ein.

Änderungen mit Browserync in Echtzeit verfolgen

Es ist sogar möglich, dass der Browser die Seite automatisch neu lädt, sobald sich eine Datei geändert hat:

1. Browsersync mit sudo npm install -g browser-sync bzw. npm install -g browser-sync installieren.

2. Webserver mit browser-sync start -s -w --open index.html starten.

Mit der Option -s wird ein Server gestartet. Die Option -w bewirkt, dass der Bropwser die Seite neu lädt, wenn sie sich geändert hat (w wie Watch-Modus). Und --open index.html öffnet die Datei index.html im Default-Browser.

Sobald sich die gerade angezeigte Datei ändert, wird die Seite automatisch neu geladen. Das passiert normalerweise in Bruchteilen von Sekunden, so schnell, dass es praktisch nicht sichtbar ist. Falls sich eine Ressource auf der Seite ändert, beispielsweise ein Bild oder ein Stylesheet, wird der DOM des Dokuments ohne Reload aktualisiert.

Listings von Verzeichnissen können mit --directory aktiviert werden.
Browsersync lässt sich übrigens (fast) beliebig oft starten, weil es automatisch einen freien Port sucht, wenn der Standardport 3000 besetzt ist.

Der Spaß mit Browsersync geht aber erst richtig los, wenn man die Seite in einen zweiten oder dritten Browser, zum Beispiel auf dem Handy oder einem Tablet betrachtet. Alle Browser sind nämlich synchronisiert. Alle Mausklicks, Eingaben oder andere Interaktionen mit der Seite werden über alle Geräte hinweg gespiegelt.

Synchronisieren von Browsern mit Browsersync

Wäre es nicht cool, wenn man statt lokaler Dateien auch die neue Firmenwebsite präsentieren könnte, und alle im Publikum dabei die eigenen Aktionen auf ihren Mobiltelefonen verfolgen könnten? Kein Problem mit Browsersync: browser-sync start --proxy http://www.yoursite.com. Auf dem eigenen lokalen Server wird jetzt stattdessen die Seite http://www.yoursite.com gespiegelt. Aber, Vorsicht, die Synchronisierung funktioniert in alle Richtungen. Jeder, der mit dem Server verbunden ist, kann den Browser aller anderen kontrollieren.

Browsersync hat übrigens noch eine Menge weiterer netter Features, die man unter der Adresse http://127.0.0.1:3001 erkunden kann, nachdem man Browsersync lokal gestartet hat.