Moderne Webanwendungen mit Node.js und Express.js

Statische Inhalte

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lernen Sie, statische Inhalte wie Bildmaterial, Stylesheets und JavaScript mit Express bereitzustellen.

Transkript

(Sprecher) Viele Webseiten bestehen neben dynamischen Inhalten vor allem auch aus statischen Inhalten. Zu diesen Inhalten gehören also theoretisch JavaScript-Dateien, Bilddateien, HTML-Dateien und vieles mehr. Wie Sie diese Inhalte über Express transportieren können und welche Rolle in diesem Fall die Middleware übernimmt, präsentiere ich Ihnen in den folgenden Minuten. Zunächst nehme ich einige Aufräumarbeiten an meinem Projekt vor. Ich entferne entsprechend aktuell bestehende Routen und lege eine Datei mit dem Namen App.js im Hauptordner an. Um nun eventuelle Initialisierungen vom Webserver selbst zu trennen, starte ich den Server nun innerhalb der App.js Datei. Dafür nutze ich die Reverenz auf die www-Modul-Datei und starte den Server mit einer Methode, die ich gleich entwerfen werde. Innerhalb der www.js verschachtle ich nun den App.listen, innerhalb einer exportieren Funktion .start und so ist aus der App.js entsprechend der Server nun auch startbar. Um in Sachen Design bei einer Webpage nicht bei Null zu beginnen, rufe ich nun die Seite www.bootstrapzero.com auf, um mir ein gratis Template herunterzuladen. Ich wähle in diesem Fall google.plus und bestätige über den "Download", dass ich diese .zip-Datei nun, samt aller statischen Dateien, herunterladen möchte. In meinem Projekt lege ich nun einen Ordner PUBLIC an und füge die Dateien dort ein. Über einen simplen Rechtsklick mit "Show in Explorer", erhalte ich ein entsprechendes Explorer-Fenster, um die Dateien einzufügen. Habe ich das getan, tauchen sie auch entsprechend in meinem Projekt auf. An der Stelle empfiehlt es sich natürlich, alle Dateien zum Versionskontrollsystem hinzuzufügen. In meiner www.js muss ich nun entsprechend die Middleware für statische Dateien hinzufügen. Eine Middleware ist immer ein Teil des App.use-Befehls, das bedeutet, auch die ERROR-Funktion hier, ist auch eine Art von Middleware. Middleware heißt soviel, dass immer dann, wenn ein Browser eine Anfrage startet, Middleware-Instanzen dazu befragt werden, ob sie hier entsprechend etwas dazu beitragen wollen. Und im Normalfall spezifiziert man innerhalb einer Middleware auch die NEXT-Funktion, die die entsprechende Anfrage an die nächste Middleware weiterleiten kann. In diesem Fall nutze ich nun die express.static-Middleware, diese ist standardmäßig mit dem Express-Paket mitgeliefert. Zusätzlich zur Static-Middleware gibt es diverse andere Middleware-Pakete, die über den "No Package Manager" bezogen werden können. Durch die Reverenz vom PUBLIC-Ordner, sage ich nun entsprechend, das alle Inhalte, innerhalb des PUBLIC-Ordners, über diese Middleware dargestellt werden sollen. Ich gehe nun in meine App.js-Datei und starte entsprechend den Server. Ein kurzer Test im Browser verrät mir, dass entsprechend Express nun meine statischen Inhalte darstellt. Dazu gehören unter anderem CSS-Dateien, JavaScript-Dateien... All diese Dinge wurden nun vom Server heruntergeladen. In den letzten Minuten, habe ich also Inhalte, wie Bilder und Stylesheets, JavaScript-Dateien und auch HTML-Dateien, in meinem PUBLIC-Ordner abgelegt und über Express, auch an den Browser senden können. Die Idee dahinter war es eine Middleware zu benutzen, die Abfragen abfängt und sie bearbeitet, bevor sie diese entsprechend an andere Teile der Anwendung weiterreicht. Die hier verwendete Middleware, ist die Express.Static-Middleware, die mit dem Express-Paket selbst mitgeliefert wird.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!