¿Cómo servir archivos estáticos en Express?

#node #express #javascript

En este pequeño articulo aprenderás como servir archivos estáticos en Express.

Express es framework de Node Js el cual nos permite crear API's y servicios web robustos de una manera más fácil.

Si tenemos nuestra API desarrollada con Express sera muy fácil agregarle la capacidad de que pueda manejar los archivos estáticos.

Llámese archivos estáticos a imágenes, videos, archivos de audio, documentos en distintos formatos, fuentes, archivos de JavaScript, html y css, etc.

Iniciemos

1. Configuración de Express

Primero vamos a crear un proyecto para de Node para este ejemplo, en este caso voy a inicializar todos los valores predeterminados utilizando la bandera "-y", esto configurará un archivo package.json para manejar las dependencias.

npm init -y

Ahora creamos un archivo de entrada con el nombre index.js, aquí es donde crearemos el servidor de Express.

Bien, ahora instalemos express como dependencia de nuestro proyecto

npm install express

En nuestro package.json agreguemos un comando que nos permitirá iniciar el servidor que crearemos en breve.

  "start": "node index.js"

El package.json deberá verse así

{
  "name": "express-static-files",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "Ricardo Chavarria",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

2. Carpeta de archivos estáticos

Para almacenar los archivos estáticos, creemos una carpeta llamada "public" en la raíz de nuestro proyecto, y podemos agregar algunos archivos en mi caso colocare una imagen y un archivo html.

La estructura de archivos se vera así:

Creación del servidor con Express

En el index.js, vamos requerir express y hacemos una instancia del mismo, luego implementamos una solicitud get y finalmente levantamos nuestro servidor para que funcione en el puerto 3000.

const express = require('express');

const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});


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

Ejecutamos "npm run start" en la terminal y veremos el siguiente mensaje.

Server listening on port: 3000

Y sí accedemos en nuestro navegador a http://localhost:3000/ debemos de ver el mensaje de 'Hello World!' que implementamos en la solicitud get.

Bien hecho, ya tenemos nuestro servidor de Express configurado correctamente, solo queda agregarle la capacidad a nuestro servidor de que pueda manejar archivos estáticos.

3. Sirviendo Archivos Estáticos

Utilizaremos el módulo path de Node Js, este modulo contiene todas las utilidades para trabajar con rutas de archivos. No necesitamos instalar nada, solo es necesario requerirlo en nuestro archivo index.js

const path = require('path');

Ahora sí, con la siguiente linea de código le decimos a express que pueda servir archivos estáticos.

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

Cuando usamos app.use(), le estamos diciendo a Express que use un Middleware, el Middleware básicamente es un bloque de código o función que se ejecuta entre la petición que hace el usuario hasta que la petición llega al servidor, funciona como una especie de proxy.

express.static() busca y devuelve los archivos estáticos solicitados por el usuario y recibe como parámetro la ruta del folder donde están esos archivos.

Utilizamos el modulo path para proporcionar una ruta absoluta de la carpeta, ya que se colocas la ruta directamente estarías proporcionando una ruta relativa y si ejecutas la aplicación desde otro directorio o similar puedes tener problemas, por ello se recomienda utilizar la ruta absoluta y módulo path nos ayuda con eso.

El index.js se veria así:

const express = require('express');
const path = require('path');

const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});


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

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

4. Probando la aplicación

Creemos un archivo index.html en la carpeta public, agreguemos lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Archivos Estáticos</title>
</head>
<body>
    <h1>Sirviendo archivos estáticos en Express</h1>
</body>
</html>