Starten Sie einen lokalen Live-Reload-Webserver mit einem Befehl

Als Entwickler benötigen wir oft einen lokalen Webserver, um etwas zu testen, an dem wir arbeiten, und haben oft keine Zeit, ein komplexes System für einen schnellen Test einzurichten. Wir brauchen etwas sofort einsatzbereites und einfach zu verwendendes, um unsere neuesten Codeänderungen jetzt zu überprüfen!

Hier ist ein kurzer Tipp zum Starten eines lokalen Webservers mit einem Befehl!

Der von uns verwendete Server verfügt über Live-Reload, was bedeutet, dass Ihr Browser automatisch aktualisiert wird, wenn Sie eine Änderung an Ihrem Code vornehmen!

Oh, Sie müssen auch auf Mobilgeräten, Tablets und/oder Ihrer Spielekonsole testen? Kein Problem! Verbinden Sie jedes Ihrer Geräte mit Ihrem lokalen Server und beobachten Sie, wie sie alle in Echtzeit aktualisiert, verlinkt und gescrollt werden! 😱

Lass uns gehen! 🚀

Lassen Sie uns zuerst einige Dinge installieren

Node.js und npm

Stellen Sie wie bei den meisten Dingen heutzutage sicher, dass Sie Node.js und npm installiert haben. Sie können dies tun, indem Sie das offizielle Installationsprogramm für Ihre Plattform von NodeJS.org herunterladen .

Öffnen Sie nach der Installation von Node.js Ihre Terminalanwendung, um zu überprüfen, ob npm installiert und betriebsbereit ist, indem Sie den folgenden Befehl ausführen:

 npm -v

Dies sollte die aktuelle Versionsnummer zurückgeben.

Browsersync

Als nächstes verwenden wir npm , um unsere Serveranwendung Browsersync zu installieren! Dies ist die App, die all die schweren Aufgaben erledigt, wie z. B. das Bereitstellen Ihrer Dateien, das Neuladen aller verbundenen Browser beim Speichern von Dateien und vieles mehr!

Geben Sie den folgenden Befehl ein und führen Sie ihn aus:

 npm install -g browser- sync

Dadurch wird browser-sync "global" installiert, sodass Sie es zum Bereitstellen und Testen Ihrer Arbeit in jedem Verzeichnis auf Ihrem Computer verwenden können.

Nachdem wir nun alles installiert haben, richten wir den Befehl zum Starten des Servers in Ihrem Terminal ein!

Erstellen des Befehls

Eines der coolsten Dinge bei der Verwendung des Terminals und der Arbeit mit der Befehlszeilenschnittstelle ist, dass Sie Ihre eigenen benutzerdefinierten Befehle erstellen können, die dann eine Reihe anderer Befehle für Sie ausführen!

Wir werden genau dies tun, um unseren Server mit einem einfachen Befehl auszuführen: serve .

Öffnen Sie die Shell-Konfiguration

Ein benutzerdefinierter Befehl wird als "Alias" bezeichnet, der in Ihrer Terminal-Shell-Konfigurationsdatei erstellt wird.

Standardmäßig führt das macOS -Terminal die Bash -Shell aus. Öffnen Sie in Ihrem Home-Verzeichnis ( ~/ ) entweder die Datei .bash_profile oder, falls diese nicht vorhanden ist, die Datei .bashrc . Falls auch eines nicht existiert, erstellen Sie es einfach und wir nehmen die Änderungen dort vor.

Mein bevorzugter Texteditor ist Atom . Wenn Sie diesen also installiert haben, führen Sie Folgendes in Ihrem Terminal aus, um Ihre Shell-Konfigurationsdatei zu bearbeiten:

 atom ~/.bashrc

Scrollen Sie zum Ende dieser Datei, da wir unsere Ergänzungen ganz am Ende einfügen werden.

Holen Sie sich Ihre lokale IP-Adresse

Die erste hinzuzufügende Zeile wird verwendet, um die aktuelle lokale IP-Adresse Ihres Computers abzurufen. Dies ist praktisch, wenn Sie etwas anderes als Ihr Heimnetzwerk testen.

Fügen Sie dies Ihrer Datei hinzu:

 export LOCAL_IP=`ipconfig getifaddr en0`

Diese Zeile erstellt eine neue Variable namens $LOCAL_IP und speichert Ihre lokale Netzwerk-IP-Adresse. Warum brauchen wir diese Informationen? Du wirst es bald herausfinden!

Richten Sie den Serve-Befehlsalias ein

Die andere Zeile, die wir hinzufügen müssen, ist der eigentliche Befehlsalias, der den Browsersync-Server startet.

Fügen Sie diese Zeile zu Ihrer Shell-Konfigurationsdatei hinzu:

 alias serve= "browser-sync start -s -f . --no-notify --host $LOCAL_IP --port 9000"

Lassen Sie uns aufschlüsseln, was in dieser Zeile steht.

• Der erste Teil, alias , teilt unserer Shell-Umgebung mit, dass wir einen neuen, benutzerdefinierten Befehl erstellen möchten.
• Was nach alias kommt, ist der Befehl, den wir eingeben. In diesem Fall lautet unser Befehl „ serve “. Die Zeichenfolge, die für diesen Befehl festgelegt ist, wird tatsächlich im Hintergrund ausgeführt.
• Der browser-sync start startet den Browsersync-Server.
• Die Option -s führt den lokalen Server aus.
• Die Option -f teilt Browsersync mit, welche Dateien überwacht werden sollen. In diesem Fall verwenden wir den Punkt . Zeichen, um das aktuelle Terminal-Verzeichnis anzugeben.
• Normalerweise gibt es beim Verbinden mit einem Browsersync-Server eine kleine Meldung, die eine Verbindung anzeigt. Wir verwenden die Option --no-verify , um diese Funktion zu entfernen.
• Die Option --host legt die IP-Adresse des Host-Computers fest. Hier verwenden wir die zuvor erstellte Variable $LOCAL_IP .
• Schließlich gibt die Option --port an, auf welchem ​​Port unser Server laufen soll.

Hinweis: Probieren Sie alle anderen verfügbaren Browsersync-Befehlszeilenoptionen aus , um Ihren Server anzupassen!

Jetzt speichern wir die Datei und probieren den neuen serve -Befehl aus!

Führen Sie den Befehl aus

Wechseln Sie in Ihrem Terminal zu einem Verzeichnis mit Projektdateien, an denen Sie gerade arbeiten. Ich überprüfe beispielsweise eine Änderung, die ich auf der Website des A11Y-Projekts vorgenommen habe, und möchte sie lokal testen.

Da sich meine Kopie der Site in ~/Sites/a11yproject.com/_site , würde ich den folgenden Befehl eingeben, um in dieses Verzeichnis zu wechseln:

 cd ~/Sites/a11yproject. com /_site

In diesem Verzeichnis befindet sich eine index``.html -Datei mit Inhalten und Stylesheets, die aus einem Unterverzeichnis verlinkt sind, zusammen mit allen anderen Dateien, aus denen die Site besteht.

Ich werde den Serve-Befehl von hier aus ausführen:

 serve

Ihr Terminal sollte Informationen wie die folgenden ausgeben, Ihren Standardbrowser öffnen und die Seite index.html automatisch laden:

Wie in der Terminalausgabe angezeigt, ist der IP-Wert „Local:“ der Ihres eigenen Computers, http://localhost:9000 . Interessant ist hier jedoch die „External:“ IP. Dies ist ein weiterer Vorteil und die Verwendung der $LOCAL_IP Variablen in der Shell-Konfigurationsdatei.

Die Variable $LOCAL_IP fügt eine kurze Notiz Ihrer aktuellen IP-Adresse des lokalen Netzwerks hinzu, wenn Sie Ihren Server starten.

Verwenden Sie diesen Wert, wenn Sie auf einem Mobilgerät, Tablet oder einem anderen Computergerät mit einem Browser testen möchten!

Sehen Sie sich den serve -Befehl in Aktion an! 👇

---

Ich hoffe, dieser Tipp war hilfreich, um einen lokalen Live-Reload-Server schnell zum Laufen zu bringen!

Gibt es andere Browsersync-Konfigurationen, die Sie empfehlen würden? Verwenden Sie eine andere Methode zum Starten eines lokalen Servers für Schnelltests? Lass es mich in den Kommentaren wissen! 🙌

Fröhliches Hacken! 💻😄💖