7-express.static

 

 Servir Archivos Estáticos en Express 

   5- EXPRESS
           |
          V
           |
          V
7-express.static

1. Estructura de proyecto

mi-app/
├── public/          # Carpeta de archivos estáticos
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── app.js
│   └── images/
│       └── logo.png
├── app.js
└── package.json

🔍 ¿Qué es express.static?

Es un middleware incorporado en Express que sirve para entregar archivos estáticos (HTML, CSS, JS, imágenes) desde un directorio específico en tu servidor.

javascript
Copy
Download
app.use(express.static('ruta/al/directorio'));

Cómo funciona express.static


🛠️ Configuración Básica

1. Estructura de proyecto típica

Copy
Download
mi-app/
├── public/          # Carpeta de archivos estáticos
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── app.js
│   └── images/
│       └── logo.png
├── app.js
└── package.json

2. Implementación mínima

javascript
Copy
Download
const express = require('express');
const app = express();

// Servir archivos estáticos desde la carpeta 'public'
app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Servidor en http://localhost:3000');
});

3. Cómo acceder a los archivos

ArchivoURL de acceso
public/css/style.csshttp://localhost:3000/css/style.css
public/images/logo.pnghttp://localhost:3000/images/logo.png

💡 Características Clave

1. Prefijos virtuales

Puedes agregar una ruta virtual diferente a la ruta física:

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

Ahora los archivos se acceden mediante:

Copy
Download
http://localhost:3000/static/css/style.css

2. Múltiples directorios estáticos

javascript
Copy
Download
app.use(express.static('public'));
app.use(express.static('uploads')); // Segundo directorio

3. Opciones de configuración

javascript
Copy
Download
app.use(express.static('public', {
  index: 'home.html',       // Cambia el archivo índice
  extensions: ['html'],     // Extensiones a buscar
  setHeaders: (res, path) => { // Headers personalizados
    if (path.endsWith('.css')) {
      res.set('Content-Type', 'text/css');
    }
  }
}));

🚀 Casos de Uso Comunes

1. Aplicación web tradicional

javascript
Copy
Download
app.use(express.static('public'));
app.use(express.static('node_modules/bootstrap/dist')); // Servir Bootstrap

2. SPA (Single Page Application)

javascript
Copy
Download
// Servir el frontend (React/Vue/Angular build)
app.use(express.static('client/dist'));

// Redirigir todas las rutas al index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/dist', 'index.html'));
});

3. Archivos de descarga

javascript
Copy
Download
app.use('/descargas', express.static('archivos-secretos'));

Acceso: http://localhost:3000/descargas/informe.pdf


⚠️ Consideraciones de Seguridad

  1. No uses esto para contenido sensible:

    javascript
    Copy
    Download
    // ¡PELIGROSO!
    app.use(express.static('/')); // Expone todo el sistema de archivos
  2. Protege directorios con middleware:

    javascript
    Copy
    Download
    const auth = (req, res, next) => {
      if (req.query.key === 'mi-clave') next();
      else res.status(403).send('Acceso denegado');
    };
    
    app.use('/privado', auth, express.static('archivos-privados'));

🔥 Trucos Avanzados

1. Cache-Control para producción

javascript
Copy
Download
app.use(express.static('public', {
  maxAge: '1d' // Cache de 1 día
}));

2. Compresión con gzip

javascript
Copy
Download
const compression = require('compression');
app.use(compression());
app.use(express.static('public'));

3. Servir desde múltiples proyectos

javascript
Copy
Download
// Frontend y backend en el mismo servidor
app.use('/app', express.static('frontend/dist'));
app.use('/api', apiRouter); // Tus rutas API

📌 Mejores Prácticas

  1. Organiza bien tus archivos: Separa assets por tipo (CSS, JS, imágenes).

  2. Usa subdirectorios lógicos/public/assets/css en lugar de /public/css.

  3. Configura cache en producción: Mejora el rendimiento.

  4. Combina con un CDN para archivos estáticos en producción.


💻 Ejemplo Completo

javascript
Copy
Download
const express = require('express');
const path = require('path');
const app = express();

// Configuración de archivos estáticos
app.use('/static', express.static(path.join(__dirname, 'public'), {
  index: false,
  extensions: ['html', 'css', 'js'],
  setHeaders: (res, filePath) => {
    if (filePath.endsWith('.js')) {
      res.set('Content-Type', 'application/javascript');
    }
  }
}));

// Ruta principal que usa archivos estáticos
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Servidor listo en http://localhost:3000');
});

🔗 Recursos Adicionales

Comentarios

Entradas más populares de este blog

Lista de Tareas

9-Nuestra Primera Plantilla con EJS

6-Middleware?