fichiers statiques avec express.js


213

Je veux servir index.htmlet /mediasous - répertoire en tant que fichiers statiques. Le fichier d'index doit être diffusé à la fois sur /index.htmlet sur les /URL.

j'ai

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

mais la deuxième ligne sert apparemment l'intégralité __dirname, y compris tous les fichiers qu'elle contient (pas seulement index.htmlet media), ce que je ne veux pas.

J'ai aussi essayé

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

mais l'accès à l'URL de base /conduit alors à une demande à web_server/index.html/index.html(double index.htmlcomposant), qui bien sûr échoue.

Des idées?


Soit dit en passant, je n'ai pu trouver absolument aucune documentation dans Express sur ce sujet ( static()+ ses paramètres) ... frustrant. Un lien doc est également le bienvenu.


2
Depuis express 4.x, express.static()est géré par le serve-staticmiddleware du package. vous pouvez trouver ses documents sur npmjs.com/package/serve-static ou github.com/expressjs/serve-static .
Anm

quelqu'un peut-il expliquer ce que signifie "serveur en tant que fichiers statiques"?
Abhi

@iLiveInAPineappleUnderTheSea Dans une application Web dynamique, comme lors de l'utilisation d'Express, le contenu de la page est créé - ou généré - par l'application. D'un autre côté, les fichiers statiques sont servis (principalement) non modifiés à partir d'une hiérarchie de répertoires statiques. Par exemple, alors que les pages peuvent changer, les fichiers image, les fichiers CSS et les fichiers Javascript ne changent pas.
Philip Callender

Réponses:


100

express.static()s'attend à ce que le premier paramètre soit le chemin d'un répertoire, pas un nom de fichier. Je suggère de créer un autre sous-répertoire pour contenir votre fichier index.htmlet l'utiliser.

Servir des fichiers statiques dans la documentation Express ou une serve-staticdocumentation plus détaillée , y compris le comportement par défaut du serviceindex.html :

Par défaut, ce module enverra des fichiers «index.html» en réponse à une requête sur un répertoire. Pour désactiver cet ensemble false ou pour fournir un nouvel index, passez une chaîne ou un tableau dans l'ordre préféré.


6
Et juste pour information, il servira par défaut index.html dans cet autre répertoire
TheSteve0

S'il n'y a qu'UN paramètre - alors il express.statics'attend à ce que ce paramètre soit le chemin ....
Seti

188

Si vous avez cette configuration

/app
   /public/index.html
   /media

Ensuite, cela devrait obtenir ce que vous vouliez

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

L'astuce est de laisser cette ligne comme dernier repli

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

En ce qui concerne la documentation, étant donné qu'Express utilise le middleware connect, j'ai trouvé plus facile de regarder directement le code source de connect.

Par exemple, cette ligne montre que index.html est pris en charge https://github.com/senchalabs/connect/blob/2.3.3/lib/middleware/static.js#L140


15
Application.configure()a été documenté comme hérité dans 3.x et supprimé dans 4.x. Voir la réponse de ChrisCantrell pour un exemple mis à jour.
Anm

Merci, cela a beaucoup aidé
mdegges

quel est le __dirname? Quelle est sa valeur?
Abhi

1
obsolète pour le dernier express.
John Heeter

133

Dans la dernière version d'express, le "createServer" est déconseillé. Cet exemple fonctionne pour moi:

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 est un mot clé?
Mohammad Faizan khan

6
C'est un global dans votre module nodejs. nodejs.org/docs/latest/api/globals.html#globals_dirname
ChrisCantrell

7
__dirname n'est pas réellement un global mais plutôt local à chaque module.
Mohammad Faizan khan

2
c'est l'équivalent en python __file__que vous utilisez avecos.path.dirname(os.path.realpath(__file__))
Abdelouahab

@ChrisCantrell Comment puis-je ajouter au dossier statique si j'ai un fichier dedans public/teams/logo.png?
michal

37

res.sendFileet les express.staticdeux fonctionneront pour cela

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

Où se publictrouve le dossier dans lequel se trouve le code côté client

Comme suggéré par @ATOzTOA et clarifié par @Vozzie , path.joinprend les chemins à joindre comme arguments, +passe un seul argument à path.


2
path.joinprend les chemins à joindre comme arguments, +passe un seul argument à path.
ATOzTOA

@ATOzTOA pouvez-vous expliquer plus s'il vous plaît
Mohammed Zameer

Ce que @ATOzTOA dit, c'est que vous devriez changer path.join(public + 'index.html')en path.join(public, 'index.html')Et pendant que vous y êtes , changez __dirname + "/public/"enpath.join(__dirname, 'public')
Vozzie

Cela m'a aidé à combiner un site statique avec une API tout en un
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

utiliser ci-dessous dans votre app.js

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

(folderName est un dossier contenant des fichiers) - rappelez-vous que ces ressources sont accessibles directement via le chemin du serveur (c'est-à-dire http: // localhost: 3000 / abc.png (où abc.png se trouve dans le dossier folderName)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.