정적 bower_components를 제공하도록 노드 익스프레스를 구성 하시겠습니까?

정적 bower_components를 제공하도록 노드 익스프레스를 구성 하시겠습니까?

---

디렉토리 구조가 있습니다

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

내 앱을 시작 index.html하고 노드와 함께 제공 하고 싶습니다 . 그래서 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에서 파일을 어떻게 제공 할 수 있습니까?

---

이 설정을 사용합니다.

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>

---

당신은 사용해야합니다

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

@robertklep 답변과 다른 (path.join)의 사용법에 유의하십시오.

여기에 다른 SO 질문 의 메모가 있습니다.

path.join은 지정된 경로가 알 수없는 소스 (예 : 사용자 입력, 타사 API 등)에서 온 경우 발생할 수있는 불필요한 구분 기호를 처리합니다.

따라서 path.join ( 'a /', 'b') path.join ( 'a /', '/ b'), path.join ( 'a', 'b') 및 path.join ( 'a', '/ b')는 모두 a / b를 제공합니다.

그것을 사용하지 않으면 일반적으로 슬래시가 없거나 하나만 있다는 것을 알면서 결합 된 경로의 시작과 끝에 대해 ​​기대할 수 있습니다.

---

Bower는 .bowerrc파일 에서 JSON을 사용하여 구성 할 수 있습니다 .

.bowerrc콘텐츠가있는 프로젝트의 루트에 다음 콘텐츠 가 포함 된 파일을 추가합니다 .

{
  "directory": "public/bower_components"
}

이렇게하면 참조하는 bower 구성 요소가 올바른 라이브러리에 배치되고 express에서 추출 정적 디렉토리가 필요하지 않습니다.

---

디렉토리 구조를 다음으로 변경하십시오.

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익스프레스를 위해 여러 번 주입 할 수 있습니다
.) 표현할 앱 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);
});

이 경우 디렉토리 구조는 동일하게 유지됩니다. 도움이 되었기를 바랍니다.
행복한 코딩 .. :)

---

나는 사용하고있다 :

$ 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)을 실행하고 있습니다.

이것이 누군가를 돕기를 바랍니다.

---

bower_components를 다른 폴더로 이동 한 후에도 동일한 문제가 발생했습니다. 이것은 무슨 일이 일어나고 있는지 이해하는 데 도움이되었습니다. 문서는 유용했습니다 : https://github.com/expressjs/serve-static

and I put this code into my node/express app.js file:

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

This is from index.html

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

and in app.js

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

which is a correct path in my case.

---

This also works for me:

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

Make sure you have reset your local server or make sure you are running nodemon for seeing your changes!

참고URL : https://stackoverflow.com/questions/21821773/configure-node-express-to-serve-static-bower-components