Servir archivos estáticos con Node y Express.js

En este artículo, crearemos una aplicación simple para servir archivos estáticos como archivos HTML, archivos CSS e imágenes usando Node.js y Express.

Introducción

En este artículo, vamos a construir una aplicación simple para servir archivos estáticos como archivos HTML, archivos CSS e imágenes usando Nodo.js y [Expresar](https: //expressjs.com/).

Configuración del proyecto e instalación de Express

Para comenzar, creemos un nuevo proyecto Node.js ejecutando el comando init en una nueva carpeta:

1
$ npm init

Complete la información solicitada según sus requisitos o simplemente establezca los valores predeterminados dejando cada línea en blanco.

Ahora podemos instalar el marco Express ejecutando:

1
$ npm install --save express

Estamos listos, ¡comencemos a codificar!

Servir archivos con Express

Hay dos formas de servir archivos estáticos usando Express:

  • Servir un solo archivo configurando una ruta al recurso
  • Establecer un directorio público en el que todos los archivos sean accesibles

Repasaremos cada uno de estos métodos en las próximas dos secciones.

Sirviendo un solo archivo

Considere un escenario en el que queremos crear una página de destino simple que consta de 3 documentos HTML (home.html, contact.html y about.html), y queremos servir estos archivos al usuario.

Supongamos que el usuario visita la ruta raíz (http://localhost:3000). En ese caso, queremos servir el archivo home.html. De manera similar, si el usuario visita las rutas /contacts o /about, queremos servir los archivos contact.html y about.html, respectivamente.

Para implementar esto, creemos un archivo landing-page.js e importemos la biblioteca Express:

1
const express = require('express');

Luego, crearemos la aplicación Express:

1
const app = express();

Luego, definamos el puerto en el que se ejecutará nuestro servidor, que usaremos más adelante cuando ejecutemos el servidor:

1
const port = 3000;

Dado que enviamos un solo archivo, no incluiremos enlaces a ningún archivo CSS o script dentro de esos archivos HTML a menos que estén alojados en una ubicación diferente, como un [CDN]{hre=“https://en.wikipedia .org/wiki/Content_delivery_network” rel=“nofollow noopener” target="_blank"}, por ejemplo.

Nos encargaremos de servir estos archivos juntos en la siguiente sección, así que por ahora, sigamos con tres archivos HTML muy simples y básicos:

inicio.html:

1
2
3
<body>
    <h1>Home</h1>
</body>

contacto.html:

1
2
3
<body>
    <h1>Contact</h1>
</body>

acerca de.html:

1
2
3
<body>
    <h1>About Us</h1>
</body>

Ahora regresemos y editemos nuestro archivo landing-page.js para enviar archivos correspondientes a las rutas que visita el usuario, como enviar el archivo home.html cuando el usuario visita la ruta raíz.

Podemos usar el método res.sendFile() para servir un archivo dentro de una respuesta:

1
2
3
app.get('/', (req, res) => {
    res.sendFile('./landing-page/home.html', { root: __dirname });
});

Por razones de seguridad, es mejor usar una ruta estática para res.sendFile(), como se muestra arriba. Si alguna vez toma información del usuario que afecta la ruta del archivo, tenga mucho cuidado para evitar que el usuario pueda manipular la ruta del archivo y, por lo tanto, permitirle recuperar archivos privados.

En nuestro caso, estamos configurando la raíz de donde proviene la ruta relativa pasando el parámetro root al método. Tenga en cuenta que hemos pasado __dirname, que es una variable global de Node.js a la ruta del archivo que se está ejecutando actualmente.

También podemos usar el mismo método para servir nuestros otros archivos, contact.html y about.html:

1
2
3
4
5
6
7
app.get('/about', (req, res) => {
    res.sendFile('./landing-page/about.html', { root: __dirname });
});

app.get('/contact', (req, res) => {
    res.sendFile('./landing-page/contact.html', { root: __dirname });
});

Ahora que nuestra aplicación está lista para funcionar, iniciemos el servidor y escuchemos el puerto que configuramos anteriormente:

1
app.listen(port, () => console.log(`listening on port ${port}!`));

Y ejecute nuestra aplicación ejecutando:

1
$ node landing-page.js

Abra su navegador y visite cualquiera de las rutas asignadas y debería recibir los archivos HTML:

sirviendo archivos html estáticos con node

Configuración de un directorio público

El segundo método de servir archivos estáticos es configurar un directorio público. A diferencia de enviar un archivo a través de la respuesta HTTP, donde solo se puede servir un único archivo, todos los archivos dentro de nuestra carpeta especificada estarán disponibles para los usuarios.

Vamos a crear otro archivo, llamado server.js, y configuremos la carpeta con nuestros tres documentos HTML para que sea un directorio público:

1
2
3
4
5
6
7
8
const express = require('express');
const app = express();
const port = 3000;

// Setting up the public directory
app.use(express.static('landing-page'));

app.listen(port, () => console.log(`listening on port ${port}!`));

Hacer público un directorio es tan fácil como usar los métodos app.use() y express.static().

Ejecutemos nuestra aplicación nuevamente y verifiquemos que esté funcionando:

1
$ node server.js

Abra su navegador y visite cualquiera de las rutas asignadas y debería recibir los archivos HTML, como la última vez. Tenga en cuenta que esta vez, la ruta raíz no está asignada al archivo home.html, sino a http://localhost:3000/home.html:

serving directories with node

Además, puede establecer un prefijo en la ruta para acceder a su directorio público pasando el prefijo como primer parámetro:

1
app.use('/public', express.static('landing-page'));

Ahora, los archivos están situados en otra ruta. Por ejemplo, home.html ahora se encuentra en http://localhost:3000/public/home.html.

A diferencia del primer método en el que presiona /about y about.html se mostrará, tenga en cuenta que tiene que usar el nombre completo del archivo para recuperar el archivo aquí: /about.html, por un ejemplo.

Esto nos permite alojar otros archivos como CSS, archivos JavaScript e imágenes también.

Por ejemplo, si hay una imagen de un gato en su carpeta pública llamada cat.png, el servidor la estará sirviendo en http://localhost:3000/public/cat.png dependiendo de su configuración y puede fácilmente llámelo a través de una página HTML y muéstrelo.

Si planea alojar una página de destino como esta, lo más probable es que sea una combinación de los dos métodos que discutimos anteriormente. Puede usar una respuesta para enviar un único archivo HTML y un directorio público para alojar otros recursos estáticos, como archivos CSS, secuencias de comandos JS e imágenes.

Conclusión

El código fuente de este proyecto está disponible en GitHub como de costumbre. Use esto para comparar su código si alguna vez se quedó atascado en el tutorial.

¡Feliz codificación!