archivos estáticos con express.js


213

Quiero servir index.htmly /mediasubdirectorio como archivos estáticos. El archivo de índice se debe servir tanto a /index.htmly/ direcciones URL.

yo tengo

web_server.use("/media", express.static(__dirname + '/media'));
web_server.use("/", express.static(__dirname));

pero la segunda línea aparentemente sirve la totalidad __dirname, incluidos todos los archivos (no solo index.htmly media), que no quiero.

También intenté

web_server.use("/", express.static(__dirname + '/index.html'));

pero acceder a la URL base /lleva a una solicitud de web_server/index.html/index.html(dobleindex.html componente), que por supuesto falla.

¿Algunas ideas?


Por cierto, no pude encontrar absolutamente ninguna documentación en Express sobre este tema ( static()+ sus parámetros) ... frustrante. Un enlace de documento también es bienvenido.


2
A partir de express 4.x, express.static()se maneja mediante el serve-staticpaquete de middleware. puede encontrar sus documentos en npmjs.com/package/serve-static o github.com/expressjs/serve-static .
Anm

¿Alguien puede explicar qué significa "servidor como archivos estáticos"?
Abhi

@iLiveInAPineappleUnderTheSea En una aplicación web dinámica, como cuando se usa Express, la aplicación crea o genera el contenido de la página. Por otro lado, los archivos estáticos se sirven (principalmente) sin modificar desde una jerarquía de directorio estático. Por ejemplo, si bien las páginas pueden cambiar, los archivos de imagen, los archivos CSS y los archivos Javascript no.
Philip Callender

consulte el siguiente enlace only4ututorials.blogspot.com/2017/05/…
Dexter

Respuestas:


100

express.static()espera que el primer parámetro sea una ruta de un directorio, no un nombre de archivo. Sugeriría crear otro subdirectorio para contener suindex.html y usar eso.

Sirviendo archivos estáticos in exprés documentación , o más detallada serve-staticdocumentación , incluyendo el comportamiento predeterminado de servirindex.html :

Por defecto, este módulo enviará archivos "index.html" en respuesta a una solicitud en un directorio. Para deshabilitar este conjunto falso o para proporcionar un nuevo índice, pase una cadena o una matriz en el orden preferido.


66
Y solo para información, servirá index.html por defecto en ese otro directorio
TheSteve0

Si solo hay UN parámetro, entonces express.staticespera que ese parámetro sea la ruta ...
Seti

188

Si tienes esta configuración

/app
   /public/index.html
   /media

Entonces esto debería obtener lo que querías

var express = require('express');
//var server = express.createServer();
// express.createServer()  is deprecated. 
var server = express(); // better instead
server.configure(function(){
  server.use('/media', express.static(__dirname + '/media'));
  server.use(express.static(__dirname + '/public'));
});

server.listen(3000);

El truco es dejar esta línea como último recurso

  server.use(express.static(__dirname + '/public'));

En cuanto a la documentación, dado que Express usa el middleware de conexión, me resultó más fácil mirar directamente el código fuente de conexión.

Por ejemplo, esta línea muestra que index.html es compatible https://github.com/senchalabs/connect/blob/2.3.3/lib/middleware/static.js#L140


15
Application.configure()fue documentado como legado en 3.xy eliminado en 4.x. Vea la respuesta de ChrisCantrell para un ejemplo actualizado.
Anm

Gracias, esto ayudó mucho
mdegges

¿cuál es el __dirname? ¿Cuál es su valor?
Abhi

1
desactualizado para el último expreso.
John Heeter

133

En la versión más nueva de express, el "createServer" está en desuso. Este ejemplo me funciona:

var express = require('express');
var app = express();
var path = require('path');

//app.use(express.static(__dirname)); // Current directory is root
app.use(express.static(path.join(__dirname, 'public'))); //  "public" off of current is root

app.listen(80);
console.log('Listening on port 80');

__dirname es palabra clave?
Mohammad Faizan khan


77
__dirname no es realmente global sino más bien local para cada módulo.
Mohammad Faizan khan

2
este es el equivalente en python con el __file__que se usaos.path.dirname(os.path.realpath(__file__))
Abdelouahab

@ChrisCantrell ¿Cómo puedo agregar a la carpeta estática si tengo un archivo public/teams/logo.png?
michal

37

res.sendFiley express.staticambos trabajarán para esto

var express = require('express');
var app = express();
var path = require('path');
var public = path.join(__dirname, 'public');

// viewed at http://localhost:8080
app.get('/', function(req, res) {
    res.sendFile(path.join(public, 'index.html'));
});

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

app.listen(8080);

¿Dónde publicestá la carpeta en la que está el código del lado del cliente?

Según lo sugerido por @ATOzTOA y aclarado por @Vozzie , path.jointoma los caminos para unirse como argumentos, +pasa un solo argumento al camino.


2
path.jointoma las rutas para unirse como argumentos, +pasa un solo argumento a la ruta.
ATOzTOA

@ATOzTOA, ¿puedes explicar más, por favor?
Mohammed Zameer

Lo que @ATOzTOA dice es que deberías cambiarte path.join(public + 'index.html')a path.join(public, 'index.html')Y mientras lo __dirname + "/public/"path.join(__dirname, 'public')
haces

Esto me ayudó a combinar un sitio estático con una API todo en uno
Jeff Beagley

5
const path = require('path');

const express = require('express');

const app = new express();
app.use(express.static('/media'));

app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'media/page/', 'index.html'));
});

app.listen(4000, () => {
    console.log('App listening on port 4000')
})

2

npm install serve-index

var express    = require('express')
var serveIndex = require('serve-index')
var path = require('path')
var serveStatic = require('serve-static')
var app = express()
var port = process.env.PORT || 3000;
/**for files */
app.use(serveStatic(path.join(__dirname, 'public')));
/**for directory */
app.use('/', express.static('public'), serveIndex('public', {'icons': true}))

// Listen
app.listen(port,  function () {
  console.log('listening on port:',+ port );
})

2

use a continuación dentro de su app.js

app.use(express.static('folderName'));

(folderName es la carpeta que tiene archivos): recuerde que se accede a estos activos directamente a través de la ruta del servidor (es decir, http: // localhost: 3000 / abc.png (donde abc.png está dentro de la carpeta folderName)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.