Настроить node express для обслуживания статических параметров bower_components?

У меня есть структура каталогов

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

Я хотел бы запустить приложение и выполнить index.html с помощью node. Итак, в app.js у меня есть:

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

В нижней части index.html у меня есть:

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

Когда я запускаю сервер, появляется index.html, но ни одна из вышеперечисленных библиотек не загружается. Я получаю ошибку (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)

Как я могу обслуживать файлы из bower_components?

Ответы

Ответ 1

Я использую эту настройку:

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

Итак, любые компоненты Bower загружаются из HTML следующим образом:

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

И любые другие JS/CSS на стороне клиента (в public/) загружаются следующим образом:

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

Ответ 2

Вы должны использовать

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

Обратите внимание на использование (path.join), которое отличается от ответа @robertklep

Вот примечание от Другие вопросы SO, которые, по моему мнению, очень хорошо отражают

path.join позаботится о ненужных разделителях, которые могут возникнуть, если данные шаблоны поступают из неизвестных источников (например, пользовательский ввод, сторонний API и т.д.).

Итак, path.join('a/', 'b') path.join('a/', '/b'), path.join('a', 'b') и path.join('a', '/b') все дадут a/b.

Без использования, вы обычно делаете ожидания относительно начала и конец патчей соединился, зная, что у них нет ни одной косой черты.

Ответ 3

Bower можно настроить с помощью JSON в файле `.bowerrc`.

Добавьте файл .bowerrc со следующим содержимым в корне вашего проекта с содержимым.

{
  "directory": "public/bower_components"
}

Это приведет к тому, что компоненты балансировки, на которые вы ссылаетесь, находятся в правильной библиотеке, и вам не понадобится статический каталог extract в выражении.

Ответ 4

Измените структуру каталогов на:

projectName

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

И в index.html выполните следующие изменения:

<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 в разорванную как статический контент. (вы можете вставлять static middleware несколько раз для выражения)
Добавьте в app congfig следующее выражение. Тогда ваш код конфигурации выглядит так:

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

И в этом случае структура вашего каталога остается прежней. Надеюсь, что это поможет.
Счастливое кодирование..:)

Ответ 5

Я использую:

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

И мой app.js имеет это определение bower_components как статический путь:

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

В моем шаблоне Jade я ссылаюсь на jquery и bootstrap следующим образом:

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

Я запускаю Windows 7 (x64).

Надеюсь, это поможет кому-то.

Ответ 6

Имела ту же проблему после перемещения bower_components в другую папку. Это помогло мне понять, что происходит. Документы были полезны: https://github.com/expressjs/serve-static

и Я поместил этот код в свой файл node/express app.js:

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

Это из index.html

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

и в app.js

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

что является правильным путем в моем случае.

Ответ 7

Это также работает для меня:

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

Убедитесь, что у вас есть reset ваш локальный сервер или убедитесь, что вы используете nodemon для просмотра ваших изменений!