Podręcznik

Express

Pliki statyczne

W typowej sytuacji, oprócz plików z kodem JavaScript, które implementują podstawowe funkcje aplikacji serwerowej, oraz plików HTML, wysyłanych w odpowiedzi na żądania, potrzebne są również inne pliki: obrazki, arkusze stylów CSS itp., zwane często plikami „statycznymi” (ang. static files). Odwołania do tych plików mogą znajdować się w wysyłanych plikach HTML, jednak trzeba dodatkowo zadbać o to, by faktycznie trafiły one do klienta. Służy do tego tzw. middleware express.static. Aby go użyć, należy wywołać metodę app.use, przed definicjami tras, w następujący sposób:

    const express = require('express');

    const app = express();

    app.use(express.static([ścieżka_folderu_z_publicznymi_plikami_statycznymi]));

    // definicje tras: app.get(...), app.post(...) itd.

        // ...

Express będzie wówczas poszukiwał plików w ścieżkach określonych względem podanego folderu z publicznymi plikami statycznymi. Typowo takie pliki zapisuje się w folderze public (i jego podfolderach). Zakładając, że pliki aplikacji serwerowej zorganizowane są w następujący sposób:

    ├── app.js

    ├── package.json

    ├── public

    │   └── stylesheets

    │       └── style.css

    └── views

        ├── index.html

        └── not_found.html

a plik index.html ma zawierać odwołanie do pliku style.css, należy to zrealizować w następujący sposób:

Plik app.js

    const path = require('path')

    ...

    app.use(express.static(path.join(__dirname, 'public')));

    ...

Plik index.html

    ...

    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />

    ...

Mimo że w powyższym przykładzie ścieżka z pliku index.html do pliku style.css wydaje się wyglądać następująco:

"../public/stylesheets/style.css"

to należy w pliku index.html podać ścieżkę względem folderu public:

"stylesheets/style.css"

ponieważ w pliku app.js Express został poinstruowany, by tam właśnie szukać plików statycznych.

Więcej informacji:

Dokumentacja Express – Static files