freeCodeCamp/curriculum/challenges/german/05-back-end-development-and.../basic-node-and-express/serve-static-assets.md

2.0 KiB
Raw Blame History

id title challengeType forumTopicId dashedName
587d7fb0367417b2b2512bf0 Bereitstellen von statischen Assets 2 301518 serve-static-assets

--description--

Ein HTML-Server verfügt normalerweise über ein oder mehr Verzeichnisse, die vom Nutzer zugänglich sind. Hier kannst du jene Assets platzieren, die von deiner Anwendung benötigt werden (Stylesheets, Skripte, Bilder).

Mit Express kannst du von dieser Funktion mit der Middleware express.static(path) Gebrauch machen der path-Parameter ist hier der absolute Pfad, in dem sich die Assets befinden.

Wenn du nicht weißt, was Middleware ist... keine Sorge, wir werden das noch im Detail besprechen. Ganz allgemein sind Middleware Funktionen, die sich in Route-Handler zwischenschalten und Informationen hinzufügen. Eine Middleware wird mit der Methode app.use(path, middlewareFunction) aufgesetzt. Hierbei ist das erste path-Argument optional. Übergibst du dieses nicht, wird die Middleware für alle Anfragen ausgeführt.

--instructions--

Setze eine express.static()-Middleware für den Pfad /public mit app.use() auf. Der absolute Pfad zum Assets-Ordner ist __dirname + /public.

Jetzt sollte deine Anwendung ein CSS-Stylesheet liefern können. Beachte, dass die /public/style.css-Datei in der /views/index.html in der Projekt-Boilerplate verwendet wird. Nun sollte deine Startseite bereits ein wenig besser aussehen!

--hints--

Deine Anwendung sollte Asset-Dateien des /public-Verzeichnisses an den /public-Pfad liefern

(getUserInput) =>
  $.get(getUserInput('url') + '/public/style.css').then(
    (data) => {
      assert.match(
        data,
        /body\s*\{[^\}]*\}/,
        'Your app does not serve static assets'
      );
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

--solutions--

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/