Express.jsにJavascriptとCSSファイルを含めるには

Question

設定しようとしているシステムのテストと同じように、単純なノードサーバーをpage.jsというファイルで実行しています。このファイルには、私は次があります。

var express = require('express'); 
var app = express(); 

app.get('/', function(req, res) { 
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html'); 
}); 

app.get('/*', function(req, res) { 
    res.send("404 –– Page not found"); 
}); 

var server = app.listen(8080, function() { 
    var host = server.address().address 
    var port = server.address().port 
}); 

インデックスファイルへのパスが保存されている.jsファイルと同じディレクトリ（SublimeFolder）につながる。また、そのディレクトリに私のJavaScriptとCSSファイルです。 index.htmlの中で、私は次の行があります

<script language="javascript" type="text/javascript" src="myScript.js"></script> 
<link rel="stylesheet" type="text/css" href="myStyleSheet.css"> 

を私は自分のコンピュータ上のフルパスにindex.htmlの中にそれらのパスを変更しようとしたが、それは私の問題を解決していませんでした。 Finderでindex.htmlファイルを見つけてダブルクリックすると、Chromeでfile:///Users/JohnFarkerson/Documents/SublimeFolder/index.htmlが開き、完璧に見えます。しかし、私はノードでサーバーを実行してhttp://localhost:8080/に行くと、ページは非常に私のjavascriptやCSSのいずれかなしの骨なしのバージョンを読み込みます。私はここで間違って何をしていますか？

編集：

これで機能します。その後、app.jsでこのコードをコピーしてjsのフォルダ内のJavaScriptファイル

var express = require('express'); 
var app = express(); 
app.use('/js', express.static(__dirname + '/js')); 
app.use('/css', express.static(__dirname + '/css')); 

app.get('/', function(req, res) { 
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html'); 
}); 

app.get('/*', function(req, res) { 
    res.send("404 –– Page not found"); 
}); 

var server = app.listen(8080, function() { 
    var host = server.address().address 
    var port = server.address().port 
}); 

Answer 1

まず場所（メインNode.jsのファイル）：

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

Answer 2

あなたがChromeでfile:///Users/JohnFarkerson/Documents/SublimeFolder/index.htmlを開いた場合、index.htmlには次のようになりますプロトコルはファイルプロトコルです。しかし、​​を開くと、httpプロトコルになります。 expressはhttpサーバを作成します。 .html.cssおよび.jsファイルは、httpサーバーの静的ファイルです。

たぶん、あなたのディレクトリには、次のようになります。ファイルプロトコルでは

SublimeFolder 
|--- index.html 
|--- myScript.js 
|--- myStyleSheet.css 

を、あなたのディスクに絶対パスを使用して、ルート・パスは/あるので、それが正常に動作します。

しかし、httpプロトコルでは、ルート・パスは、HTTPサーバーのルートである、それはのような、あなたのコードで定義されますがあります。httpサーバーのルートがyour_project_path/publicある

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

、そしてあなたがあなたのJSを置く必要がありますし、 CSSファイルをyour_project_path/publicディレクトリにコピーし、ルートパスを使用してテーマをリンクします。

your_project_path/public 
|--- myScript.js 
|--- myStyleSheet.css 

そしてscriptタグが<script src="/myScript.js"></script>です：たとえば、公共のディレクトリ構造があります。

Express application generatorを使用すると、エクスプレスプロジェクトを作成し、プロジェクト構造を確認して理解することができます。