Sirviendo archivos estáticos en Express

Para servir archivos estáticos como imágenes, archivos CSS y archivos JavaScript, usa la función de middleware integrada express.static en Express.

La firma de la función es:

express.static(root, [options]);

El argumento root especifica el directorio raíz desde donde se sirven los recursos estáticos. Para más información sobre el argumento de options, consulta express.static.

Por ejemplo, usa el siguiente código para servir imágenes, archivos CSS y archivos JavaScript en un directorio llamado public:

app.use(express.static('public'));

Ahora, puedes cargar los archivos que están en el directorio public:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Para usar múltiples directorios de recursos estáticos, llama a la función de middleware express.static varias veces:

app.use(express.static('public'));
app.use(express.static('files'));

Express busca los archivos en el orden en que configuraste los directorios estáticos con la función de middleware express.static.

Para crear un prefijo de ruta virtual (donde la ruta no existe realmente en el sistema de archivos) para los archivos servidos por la función express.static, especifica una ruta de montaje para el directorio estático, como se muestra a continuación:

app.use('/static', express.static('public'));

Ahora, puedes cargar los archivos que están en el directorio public desde el prefijo de ruta /static.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

Sin embargo, la ruta que proporcionas a la función express.static es relativa al directorio desde donde lanzas tu proceso de node. Si ejecutas la app de Express desde otro directorio, es más seguro usar la ruta absoluta del directorio que quieres servir:

const path = require('path');
app.use('/static', express.static(path.join(__dirname, 'public')));

import path from 'path';

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

Para más detalles sobre la función serve-static y sus opciones, consulta serve-static.