‫Dozent: Lassen Sie
‫uns nun lernen, wie statische Dateien mit Express bereitgestellt werden.
‫Was meine ich nun eigentlich mit statischen Dateien?
‫Nun, es sind die Dateien, die sich in unserem Dateisystem befinden, auf
‫die wir derzeit nicht über alle Routen zugreifen können.
‫So haben wir zum Beispiel diese Übersicht. html-Datei hier
‫in unserem öffentlichen Ordner.
‫Aber im Moment können wir nicht mit einem
‫Browser darauf zugreifen, oder?
‫Und das gleiche für diese Bilddateien, die wir
‫hier haben, oder die CSS- oder Javascript-Dateien.
‫Lassen Sie mich Ihnen das
‫zeigen und diesmal tatsächlich den Browser verwenden.
‫Im Moment kopiere ich diese URL hierher, um
‫Ihnen zu zeigen, dass
‫es funktioniert, natürlich auch im Browser.
‫Okay, das ist also unser unformatiertes Ergebnis hier, von
‫der gleichen Route.
‫Aber sagen wir, wir wollen tatsächlich auf die HTML-Datei zugreifen, über
‫die ich gerade gesprochen habe.
‫So können wir natürlich nicht
‫nur öffentlich schreiben und dann zum
‫Beispiel Übersicht. html, oder?
‫Darauf können wir im Moment nicht zugreifen.
‫Und das liegt einfach daran, dass wir für diese
‫URL keine Route definiert haben, oder?
‫Wir haben keinen Handler, der dieser Route zugeordnet ist.
‫Wenn wir also tatsächlich auf etwas
‫von unserem Dateisystem zugreifen
‫möchten, müssen wir eine integrierte Express-Middleware verwenden.
‫Lassen Sie mich Ihnen jetzt zeigen, wie wir das tun können.
‫Zum Beispiel nach diesem.
‫In diesem Abschnitt sprechen wir eigentlich nur über eine API, sodass
‫wir eigentlich keine statischen Dateien wie Bilder oder
‫HTML bereitstellen müssen, also was ich Ihnen gerade gezeigt habe.
‫Da dieser Abschnitt jedoch eine
‫Einführung in Express im
‫Allgemeinen ist, wollte ich Ihnen diesen Inhalt trotzdem schnell zeigen.
‫Wie ich bereits sagte, müssen wir
‫nur eine einfache integrierte Middleware verwenden,
‫die so funktioniert.
‫Express dot static, weil wir statische Dateien bereitstellen möchten, daher ist
‫dies ein naheliegender Name dafür.
‫Hier übergeben wir also das Verzeichnis, aus
‫dem wir statische Dateien bereitstellen möchten.
‫Und in diesem Fall verwende ich das öffentliche Verzeichnis.
‫Also dieser Ordner hier, in dem wir diese HTML-Dateien haben, okay?
‫Und tatsächlich verwenden
‫wir hier eine Vorlagenzeichenfolge, damit ich die dirname-Variable
‫verwenden kann, dann Schrägstrich und öffentlich.
‫Speichern Sie es und kehren Sie zum Browser zurück.
‫Dann können wir diese Übersicht öffnen. html.
‫Jetzt wird es in dieser URL hier nicht funktionieren.
‫Es muss tatsächlich so sein.
‫Also ohne die Öffentlichkeit, nur /Übersicht. html.
‫Mal sehen, und es funktioniert tatsächlich.
‫Okay.
‫Nun, warum ist das so?
‫Warum brauchen wir den öffentlichen Ordner hier in der URL nicht?
‫Nun, einfach weil, wenn wir eine URL öffnen, die
‫es in keiner unserer Routen finden
‫kann, es dann in diesem öffentlichen Ordner sucht, den wir definiert haben.
‫Und es legt diesen Ordner auf das Stammverzeichnis fest.
‫Okay, nehmen wir an, das Stammverzeichnis ist
‫jetzt unser öffentlicher Ordner.
‫Also das hier, und dann ist die Übersicht drin.
‫Und deshalb haben wir darauf zugegriffen.
‫Da haben wir zum Beispiel auch Bilder.
‫Nehmen wir an, wir wollen ein Bild und dann diesen Pin hier öffnen.
‫Und das können wir.
‫Also
‫Bild, PNG anstecken und los gehts.
‫Hier ist das Bild.
‫Was wir jetzt nicht tun können, ist dies, weil dies keine Datei ist.
‫Dies sieht aus wie eine normale
‫Route, und Express versucht daher tatsächlich, einen Route-Handler für diese zu
‫finden, was jedoch nicht möglich ist,
‫da Sie nichts definiert haben.
‫Gut?
‫Es funktioniert also wirklich nur für statische Dateien.
‫In diesem Fall geht es wiederum nicht in eine neue Route, sondern stellt
‫einfach die Datei bereit, die wir aus dem
‫öffentlichen Ordner oder in
‫dem Ordner, den wir hier in dieser Middleware angegeben haben, bereitgestellt haben.
‫Werfen Sie nun einen Blick auf die Konsole hier und sehen Sie sich alle Anfragen
‫an, die tatsächlich ausgeführt wurden, als wir diese Seite öffnen.
‫Lassen Sie uns dies jetzt hier klären, damit wir alle Anfragen
‫sehen, die tatsächlich nur von dieser Übersichtsseite stammen.
‫Also schreiben wir nochmal Übersicht. html hier.
‫Und diese Bilder hier
‫sind kaputt und das liegt daran, dass dieser HTML-Code nicht
‫so bereitgestellt werden soll, in Ordnung?
‫Ich benutze es jetzt nur
‫hier, damit wir visuelles Feedback bekommen.
‫Der Inhalt hier interessiert mich überhaupt nicht.
‫Sehen Sie sich nun alle Anfragen an, die
‫für alle Assets durchgeführt wurden.
‫Wie ich gleich zu
‫Beginn sagte, erhält unser Server für jedes Stück, das
‫Teil der Website ist, tatsächlich eine separate Anfrage.
‫Und Sie sehen hier, dass die meisten von ihnen diesen 404 bekommen.
‫Deshalb werden die Links dann auf der Webseite unterbrochen, einfach weil Express
‫sie in diesem Ordner nicht finden kann.
‫Aber auch das ist hier nicht der Punkt.
‫Was ich Ihnen nur zeigen
‫wollte, ist, wie wir statische Dateien
‫aus einem Ordner und nicht aus einer Route heraus bereitstellen können.
‫Gut.
‫Damit ist die grundlegende Einführung in Express abgeschlossen.
‫In den nächsten
‫beiden Videos werden wir über sogenannte
‫Umgebungsvariablen sprechen und ESlint auch im mündlichen VS-Code einrichten.