2016-05-15 5 views
0

私はExpress/Reactアプリケーションを構築しています。私のサーバは正常に動作しますが、Webpackはjsファイルを作成しても問題ありませんが、何らかの理由で私のアプリケーションがレンダリングされません。ここでExpressが私のReactアプリケーションをレンダリングしないのはなぜですか?

は私のテストのアプリです:ここで

import React from 'react'; 
import { render } from 'react-dom'; 
import Application from './Application'; 

console.log('works!'); 


function TestApp({}) { 
    return (
    <div className="TestApp">Does this work?</div> 
); 
} 


render(<TestApp />, document.getElementById('root')); 

は私のhtmlです:

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    context: path.resolve(__dirname, './app/assets/js/'), 
    entry: './bundle', 
    output: { 
    path: path.resolve(__dirname, './public/assets/js/'), 
    filename: 'bundle.js', 
    publicPath: "/js/", 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'] 
    }, 
    plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false 
     } 
    }), 
    ], 
    module: { 
    preLoaders: [{ 
     test: /\.(js|jsx)$/, 
     loader: 'eslint-loader', 
     exclude: /node_modules/, 
    }], 
    loaders: [{ 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
    }, { 
     test: /\.css$/, 
     loader: 'style!css', 
    }, ] 
    }, 
    watch: true 
}; 

、ここでは私のミドルウェアです:

ここ

<!DOCTYPE html> 
<html> 
    <head> 
    <title>React Test App</title> 
    </head> 
    <body> 
    <div id="root" /> 
    <script src="js/bundle.js" async /> 
    </body> 
</html> 

は私webpack.config.jsファイルです

var express = require('express.io'); 
var app = express(); 
var bodyParser = require('body-parser'); 
var cookieParser = require('cookie-parser'); 
var path = require('path'); 

app.use(bodyParser.urlencoded({ 
    extended: true 
})); 
app.use(bodyParser.json()); 

var port = process.env.PORT || 8080; 

app.set('view engine', 'ejs'); 

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

app.set('views', path.join(__dirname, './app/views')); 

router = express.Router(); 

    router.get("*", (req, res) => { 
    res.render("index.ejs"); 
    }); 

    app.use("/", router); 

app.listen(port, function (error) { 
    return error 
    ? console.error(error) 
    : console.info("Listening on port %s", port); 
}); 

何か私が間違っている可能性がありますか?

+0

res.render( "index.ejs");私はそれが "index.js"である必要があると仮定します – fayzaan

+0

それはあなたがあなたのindex.ejsファイルの内部で提供したHTMLですか? –

+0

実際の1337 h4xx0rsのみ反応することができます。 – r3wt

答えて

0

あなたはres.sendfile("index.html");

編集でres.render("index.ejs");を変更したいと思うようになっています考え直しで、 webpack.config.jsのentryフィールドが正しく表示されません。 javascriptファイルをベースにする必要があります。あなたのバンドルには現在の設定のものが含まれていますか?

+0

"あなたのバンドルには現在の設定で何かが含まれていますか?"私はあなたが何を意味するのか分かりませんが、私の端末コンソールにエラーはなく、jsファイルはうまくコンパイルされているようです。 – Wilhelm

+0

@Wilhelmは、正しいファイルがバンドルされているかどうかを確認するために、実際のファイルとバンドルの両方の場所で同じコードを見つけることができるかどうかを確認できます。また、メインのjavascriptファイルが 'bundle'と呼ばれている場合は、.js拡張子がないはずですので、入力フィールドをメインのjavascriptファイルに変更して何が起こるかを見てください。 – hansn

+0

これらのことすべてを成功せずに試みました。また、 '.js'ファイルの名前は' bundle.js'です。Webpackは、 '.js'が拡張子であると仮定しているため、' entry'オプションに '.js'拡張を必要としません。 – Wilhelm

関連する問題