J'ai une structure de répertoire
projectName
| - bower_components/
| - public/
| - css
| - js
| - index.html
| - Gruntfile.js
| - package.json
| - bower.json
| - app.js
Je voudrais démarrer mon application et servir index.html
avec noeud. Donc, dans app.js
j'ai:
var express = require('express');
var port = process.env.PORT || 3000;
var app = express();
app.configure(function(){
// Serve up content from public directory
app.use(express.static(__dirname + '/public'));
app.use(app.router);
app.use(express.logger());
});
app.listen(port, function(){
console.log('Express server listening on port ' + port);
});
Au bas de index.html
j'ai:
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/mustache/mustache.js"></script>
Lorsque je démarre le serveur, index.html
s'affiche, mais aucune des bibliothèques ci-dessus ne se charge. J'ai l'erreur (404):
GET http://localhost:3000/bower_components/jquery/jquery.js 404 (Not Found) localhost/:32
GET http://localhost:3000/bower_components/d3/d3.js 404 (Not Found) localhost/:33
GET http://localhost:3000/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found) localhost/:34
GET http://localhost:3000/bower_components/spin.js/spin.js 404 (Not Found) localhost/:35
GET http://localhost:3000/bower_components/mustache/mustache.js 404 (Not Found)
Comment puis-je servir les fichiers de bower_components?
J'utilise cette configuration:
app.use(express.static(__dirname + '/public'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
Ainsi, tous les composants Bower sont chargés à partir de HTML comme ceci:
<script src="/bower_components/..."></script>
Et tous les autres fichiers JS/CSS côté client (dans public/
) sont chargés comme suit:
<script src="/js/..."></script>
Tu devrais utiliser
app.use(express.static(path.join(__dirname, '/public')));
app.use('/bower_components', express.static( path.join(__dirname, '/bower_components')));
Notez l'utilisation de (path.join) qui est différente de @robertklep answer
Voici une note de Une autre SO question qui, selon moi, la capture très bien
path.join s’occupera des délimiteurs inutiles, ce qui peut se produire si les chemins donnés proviennent de sources inconnues (par exemple, entrée utilisateur, tierce partie API, etc.).
Donc path.join ('a /', 'b') path.join ('a /', '/ b'), path.join ('a', 'b') et path.join ('a', '/ b') donnera tous a/b.
Sans l'utiliser, vous feriez habituellement des attentes sur le début et la fin des chemins rejoint, sachant qu'ils ne ont pas ou une barre oblique.
.bowerrc
.Ajoutez un fichier .bowerrc
avec le contenu suivant à la racine de votre projet avec le contenu.
{
"directory": "public/bower_components"
}
Cela placera les composants Bower auxquels vous faites référence dans la bibliothèque correcte et vous n’aurez plus besoin du répertoire static extract dans express.
Changez la structure de votre répertoire en:
projectName
| - public/
| - bower_components/
| - css
| - js
| - index.html
| - Gruntfile.js
| - package.json
| - bower.json
| - app.js
Et dans index.html
, effectuez les modifications suivantes:
<script src="../public/bower_components/jquery/jquery.js"></script>
<script src="../public/bower_components/d3/d3.js"></script>
<script src="../public/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="public/bower_components/spin.js/spin.js"></script>
<script src="public/bower_components/mustache/mustache.js"></script>
bower_components
en un contenu statique. (vous pouvez injecter static middleware
plusieurs fois pour l'express)var express = require('express');
var port = process.env.PORT || 3000;
var app = express();
app.configure(function(){
// Serve up content from public directory
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/bower_components'));
app.use(app.router);
app.use(express.logger());
});
app.listen(port, function(){
console.log('Express server listening on port ' + port);
});
Et dans ce cas, la structure de votre répertoire reste la même. J'espère que cela t'aides.
Joyeux codage .. :)
J'utilise:
$ npm -version && node -v
2.11.3
v0.12.7
Et mon app.js
a ce bower_components
définissant comme chemin statique:
app.use(express.static(path.join(__dirname, 'bower_components')));
Dans mon modèle Jade, je fais référence à jquery
et bootstrap
comme suit:
doctype html
html
head
title= title
link(href='bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
link(href='bootstrap/dist/css/bootstrap-theme.min.css', rel='stylesheet')
body
block content
script(type='text/javascript', src='jquery/dist/jquery.js')
script(type='text/javascript', src='bootstrap/dist/js/bootstrap.js')
J'utilise Windows 7 (x64).
J'espère que ça aide quelqu'un.
Avait le même problème après avoir déplacé bower_components dans un autre dossier . Cela m'a aidé à comprendre ce qui se passait . La documentation était utile: https://github.com/expressjs/serve-static
et J'ai mis ce code dans mon fichier node/express app.js:
console.log('DIRNAME:', __dirname, 'JOINED:', path.join(__dirname, '../../bower_components'));
C'est de index.html
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
et dans app.js
app.use('/bower_components', express.static(path.join(__dirname, '../../bower_components')))
ce qui est un chemin correct dans mon cas.
Cela fonctionne aussi pour moi:
app.use('/bower_components', express.static(__dirname + '/bower_components'));
Assurez-vous que vous avez réinitialisé votre serveur local ou que vous exécutez nodemon pour voir vos modifications!