7-express.static
Servir Archivos Estáticos en Express
|
V
7-express.static1. 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.
app.use(express.static('ruta/al/directorio'));
🛠️ Configuración Básica
1. Estructura de proyecto típica
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
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
Archivo | URL de acceso |
---|---|
public/css/style.css | http://localhost:3000/css/style.css |
public/images/logo.png | http://localhost:3000/images/logo.png |
💡 Características Clave
1. Prefijos virtuales
Puedes agregar una ruta virtual diferente a la ruta física:
app.use('/static', express.static('public'));
Ahora los archivos se acceden mediante:
http://localhost:3000/static/css/style.css
2. Múltiples directorios estáticos
app.use(express.static('public'));
app.use(express.static('uploads')); // Segundo directorio
3. Opciones de configuración
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
app.use(express.static('public'));
app.use(express.static('node_modules/bootstrap/dist')); // Servir Bootstrap
2. SPA (Single Page Application)
// 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
app.use('/descargas', express.static('archivos-secretos'));
Acceso: http://localhost:3000/descargas/informe.pdf
⚠️ Consideraciones de Seguridad
No uses esto para contenido sensible:
// ¡PELIGROSO! app.use(express.static('/')); // Expone todo el sistema de archivos
Protege directorios con middleware:
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
app.use(express.static('public', {
maxAge: '1d' // Cache de 1 día
}));
2. Compresión con gzip
const compression = require('compression');
app.use(compression());
app.use(express.static('public'));
3. Servir desde múltiples proyectos
// Frontend y backend en el mismo servidor
app.use('/app', express.static('frontend/dist'));
app.use('/api', apiRouter); // Tus rutas API
📌 Mejores Prácticas
Organiza bien tus archivos: Separa assets por tipo (CSS, JS, imágenes).
Usa subdirectorios lógicos:
/public/assets/css
en lugar de/public/css
.Configura cache en producción: Mejora el rendimiento.
Combina con un CDN para archivos estáticos en producción.
💻 Ejemplo Completo
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');
});
Comentarios
Publicar un comentario