arquivos estáticos com express.js


213

Quero servir index.htmle /mediasubdiretório como arquivos estáticos. O arquivo de índice deve ser servido em /index.htmle/ URLs.

eu tenho

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

mas a segunda linha aparentemente serve a totalidade __dirname, incluindo todos os arquivos nela (não apenasindex.html e media), os quais eu não quero.

Eu também tentei

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

mas acessar o URL base /leva a uma solicitação paraweb_server/index.html/index.html ( index.htmlcomponente duplo ), o que obviamente falha.

Alguma ideia?


A propósito, não encontrei absolutamente nenhuma documentação no Express sobre este tópico ( static()+ seus parâmetros) ... frustrante. Um link de documento também é bem-vindo.


2
A partir do Express 4.x, express.static()é tratado pelo serve-staticmiddleware do pacote. você pode encontrar seus documentos em npmjs.com/package/serve-static ou github.com/expressjs/serve-static .
Anm

alguém pode explicar o que significa "servidor como arquivos estáticos"?
Abhi

@iLiveInAPineappleUnderTheSea Em um aplicativo dinâmico da Web, como ao usar o Express, o conteúdo da página é criado - ou gerado - pelo aplicativo. Por outro lado, os arquivos estáticos são servidos (principalmente) sem modificação de uma hierarquia de diretórios estáticos. Por exemplo, enquanto as páginas podem mudar, os arquivos de imagem, CSS e Javascript não.
Philip Callender

Respostas:


100

express.static()espera que o primeiro parâmetro seja um caminho de um diretório, não um nome de arquivo. Eu sugeriria a criação de outro subdiretório para conter o seu index.htmle usá-lo.

Servindo arquivos estáticos na documentação do Express , ou documentação mais detalhadaserve-static , incluindo o comportamento padrão de veiculaçãoindex.html :

Por padrão, este módulo envia arquivos "index.html" em resposta a uma solicitação em um diretório. Para desativar esse conjunto false ou para fornecer um novo índice, passe uma string ou uma matriz na ordem preferida.


6
E apenas para informações, ele vai servir-se index.html por padrão nesse outro diretório
TheSteve0

Se houver apenas um parâmetro - express.staticespera que esse parâmetro seja o caminho ... #
217 Seti

188

Se você tiver esta configuração

/app
   /public/index.html
   /media

Então isso deve conseguir o que você queria

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);

O truque é deixar essa linha como último recurso

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

Quanto à documentação, como o Express usa o middleware connect, achei mais fácil olhar diretamente para o código-fonte de conexão.

Por exemplo, esta linha mostra que o index.html é suportado https://github.com/senchalabs/connect/blob/2.3.3/lib/middleware/static.js#L140


15
Application.configure()foi documentado como legado na 3.x e removido na 4.x. Veja a resposta de ChrisCantrell para um exemplo atualizado.
Anm

Obrigado, isso ajudou muito
mdegges

o que é o __dirname? Qual é o seu valor?
Abhi

1
desatualizado para o mais recente expresso.
John Heeter 30/07

133

Na versão mais recente do express, o "createServer" está obsoleto. Este exemplo funciona para mim:

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 é palavra-chave?
Mohammad Faizan khan


7
__dirname não é realmente global, mas local para cada módulo.
Mohammad Faizan khan

2
este é o equivalente em python de __file__que você usa comos.path.dirname(os.path.realpath(__file__))
Abdelouahab

@ChrisCantrell Como posso adicionar à pasta estática se tiver arquivo public/teams/logo.png?
michal 4/03

37

res.sendFilee express.staticambos trabalharão para isso

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);

Onde publicestá a pasta na qual o código do lado do cliente está

Conforme sugerido por @ATOzTOA e esclarecido por @Vozzie , path.joinpega os caminhos para ingressar como argumentos, +passa um único argumento para o caminho.


2
path.jointoma os caminhos para ingressar como argumentos, +passa um único argumento para o caminho.
ATOzTOA

@ATOzTOA você pode explicar mais, por favor
Mohammed Zameer

O que @ATOzTOA está dizendo é que você deve mudar path.join(public + 'index.html')em path.join(public, 'index.html')E, enquanto a ele, a mudança __dirname + "/public/"empath.join(__dirname, 'public')
Vozzie

Isso me ajudou a combinar um site estático com uma API tudo em um
Jeff Beagley

4
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 abaixo dentro do seu app.js

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

(folderName é a pasta que possui arquivos) - lembre-se de que esses ativos são acessados ​​diretamente pelo caminho do servidor (por exemplo, http: // localhost: 3000 / abc.png (onde abc.png está na pasta folderName)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.