web-dev-qa-db-fra.com

configurez le nœud express pour servir des composants statiques de bower?

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?

javascriptnode.jsexpressbower
70
Connor Leech

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>
192
robertklep

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.

8
Abhijit Mazumder

Bower peut être configuré à l'aide de JSON dans un fichier .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.

5
Arthur Anderson

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>

Sinon, vous pouvez transformer votre dossier bower_components en un contenu statique. (vous pouvez injecter static middleware plusieurs fois pour l'express)
Ajoutez ce qui suit dans l'application congfig pour exprimer. Ensuite, votre code de configuration ressemble à:

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 .. :)

1
Amol M Kulkarni

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.

0
FilmiHero

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.

0
ICospac

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!

0
Javier Armero Ciudad