express 'response.sendFile（）はUncaughtを送信しますSyntaxError：予期しないトークン<

Question

私はreact-routerをbrowserHistoryと使用しています。この機能は：

app.get('*', function (request, response){ 
    response.sendFile(path.join(__dirname + "/public/index.html")) 
}) 

は、ルーティングが反応ルータでクライアント側で発生するため、Index.htmlを送信することになっています。 しかし、どういうわけか、私のindex.htmlがサーバーによって誤解し、私はこのエラーを取得します

キャッチされないでSyntaxError：予期しないトークン<

私はここでの問題が何であるかを知りません。ファイルパスが間違っていますか？ （3000：

得ることができない/何でも、ローカルホスト上では発生しませんすべてのページのリフレッシュの

：私のページは通常で応答し、上記の機能のない

/app 
/app/myJavascriptStuff.js 
/public 
/public/index.html 
/moreStuffThatsNotRelevant 
/server.js <- my express file 

：私のツリーはこのようになります例：localhost：3000/whatever）

私は事を説明するのを躊躇しているので、hereはリポジトリへのリンクです。

ヘルプは大歓迎です。 :)

Answer 1

まず。あなたがそれを提供する前に、それを最初に構築する必要があります。あなたは

"scripts": { 
    "build": "webpack --progress --color --config webpack.config.js --watch", 
    "start": "node server.js" 
    } 

にスクリプトをpackage.jsonし、サーバーを実行する前にコマンドを実行しますnpm run build

変更。

/public/build内にwebpack bundle.jsが作成されない場合は、public内にディレクトリbuildを作成し、上記のコマンドを再度実行してください。

これは問題を解決するはずです。

Answer 2

問題は、各ブラウザが（ここで、これらのファイルは、公開しましょう提供することができる場所からpublicフォルダを定義し

app.get('*', function (request, response){ 
    response.sendFile(path.join(__dirname + "/public/index.html")) 
}); 

経由でbundle.jsやstyle.cssを要求しても、あなたがindex.htmlを送信している要求するためのためにすることができgithubリポジトリにindex.htmlがあります）。そのフォルダにbundle.jsを生成するようにwebpackに指示します。 index.htmlにそのフォルダのbundle.jsを使用するように指示してください。

次にserver.jsに変更を加える必要があります。 expressに、ブラウザからの問い合わせに応じてこれらのファイルを提供するパブリックパスを使用させます。

の例では、することができます - あなたはあなたのbundle.jsがあなたのWebPACKにファイルを構築していなかったすべての

const app    = express(); 
const publicPath  = express.static(path.join(__dirname, 'public'), { redirect : false }); 

const indexPath = path.join(__dirname, 'public/index.html'); 
app.use(publicPath); 
app.get('/', function (_, res) { res.sendFile(indexPath) }); 
app.get('*', function (_, res) { res.sendFile(indexPath) });