web-dev-qa-db-de.com

node Express so konfigurieren, dass statische Komponenten von Bower verwendet werden?

Ich habe eine Verzeichnisstruktur

projectName
    | - bower_components/
    | - public/
        | - css
        | - js
        | - index.html
    | - Gruntfile.js
    | - package.json
    | - bower.json
    | - app.js

Ich möchte meine App starten und index.html mit node bereitstellen. Also in app.js habe ich:

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

Am Ende von index.html habe ich:

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

Wenn ich den Server starte, wird index.html angezeigt, aber keine der oben genannten Bibliotheken wird geladen. Ich erhalte die Fehlermeldung (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)

Wie kann ich die Dateien von bower_components bereitstellen?

javascriptnode.jsexpressbower
70
Connor Leech

Ich benutze dieses Setup:

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

So werden alle Bower-Komponenten folgendermaßen aus HTML geladen:

<script src="/bower_components/..."></script>

Alle anderen clientseitigen JS/CSS (in public/) werden wie folgt geladen:

<script src="/js/..."></script>
192
robertklep

Du solltest benutzen 

app.use(express.static(path.join(__dirname, '/public')));
app.use('/bower_components',  express.static( path.join(__dirname, '/bower_components')));

Beachten Sie die Verwendung von (path.join), die sich von der Antwort von @robertklep unterscheidet

Hier ist ein Hinweis aus anderen SO Fragen der meiner Meinung nach sehr gut erfasst wird

path.join kümmert sich um nicht benötigte Trennzeichen, die auftreten können, wenn Die angegebenen Pfade stammen aus unbekannten Quellen (z. B. Benutzereingaben, Drittanbieter-APIs usw.).

Also path.join ('a /', 'b') path.join ('a /', '/ b'), path.join ('a', 'b') und path.join ('a', '/ b') gibt a/b.

Ohne es zu benutzen, würden Sie normalerweise Erwartungen an den Start haben und Ende der Pfade vereinten sich, wissend, dass sie nur keinen oder einen Schrägstrich haben.

8
Abhijit Mazumder

Bower kann mit JSON in einer .bowerrc-Datei konfiguriert werden.

Fügen Sie eine .bowerrc-Datei mit dem folgenden Inhalt im Stammverzeichnis Ihres Projekts mit dem Inhalt hinzu.

{
  "directory": "public/bower_components"
}

Dadurch werden die Bower-Komponenten, auf die Sie sich beziehen, in der richtigen Bibliothek abgelegt, und Sie benötigen das statische Extraktverzeichnis nicht in express.

5
Arthur Anderson

Ändern Sie Ihre Verzeichnisstruktur in:

projectName

    | - public/
        | - bower_components/
        | - css
        | - js
        | - index.html
    | - Gruntfile.js
    | - package.json
    | - bower.json
    | - app.js

Und in index.html nehmen Sie folgende Änderungen vor:

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

Oder Sie können Ihren bower_components-Ordner als statischen Inhalt trennen. (Sie können static middleware mehrmals für express einspritzen)
Fügen Sie Folgendes in der App-Konfiguration hinzu. Dann sieht Ihr Konfigurationscode folgendermaßen aus:

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

Und in diesem Fall bleibt Ihre Verzeichnisstruktur gleich. Hoffe das hilft.
Glückliche Kodierung .. :)

1
Amol M Kulkarni

Ich benutze:

$ npm -version && node -v
2.11.3
v0.12.7

Und mein app.js hat bower_components als statischen Pfad definiert:

app.use(express.static(path.join(__dirname, 'bower_components')));

In meiner Jade-Vorlage verweise ich auf jquery und bootstrap wie folgt:

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

Ich verwende Windows 7 (x64).

Hoffe das hilft jemandem.

0
FilmiHero

Hatte dasselbe Problem, nachdem ich bower_components in einen anderen Ordner verschoben hatte .. Das hat mir geholfen zu verstehen, was los war .. Die Dokumentation war nützlich: https://github.com/expressjs/serve-static

und Ich habe diesen Code in meine Node/express app.js-Datei eingefügt:

console.log('DIRNAME:', __dirname, 'JOINED:', path.join(__dirname, '../../bower_components'));

Dies ist von index.html

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>

und in app.js

app.use('/bower_components', express.static(path.join(__dirname, '../../bower_components')))

das ist in meinem Fall ein richtiger Weg.

0
ICospac

Das funktioniert auch für mich: 

app.use('/bower_components',  express.static(__dirname + '/bower_components'));

Stellen Sie sicher, dass Sie Ihren lokalen Server zurückgesetzt haben, oder stellen Sie sicher, dass Sie nodemon ausführen, um Ihre Änderungen zu sehen!

0
Javier Armero Ciudad