DEV Community

loading...

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

ricardochl profile image Ricardo Chavarria ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

  "start": "node index.js"
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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í:

image

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}`),
);
Enter fullscreen mode Exit fullscreen mode

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

Server listening on port: 3000
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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')))
Enter fullscreen mode Exit fullscreen mode

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}`),
);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Ahora ejecutemos

npm start
Enter fullscreen mode Exit fullscreen mode

Vayamos a http://localhost:3000/public/

Deberíamos de ver lo siguiente:

image

También podemos servir imágenes

image

Con esto hemos finalizado.

El repositorio de este tutorial lo puedes encontrar aquí

Déjame saber en los comentarios que te pareció este tutorial.

Gracias por leer está publicación.

Discussion (0)

Forem Open with the Forem app