混合はExpressと反応しますか？

Question

NodeJSベースのサーバーを実行しているReactベースのアプリケーションがあり、xhrを使用せずに非静的ファイルをダウンロードできるようにしたいと考えています。

私はExpressを使用することを考えていますが、同じコンテナにReactと共存させる方法がわかりません。誰も私がこれについてどのように行くかを提案することはできますか？私はまだwebpackとReactを学んでいて、これの例を見つけるのが難しいですか？次のように見て、

node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --port 8081 --hot --inline 

のWebPACK-DEV-server.js付：

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

」./src/index.js'を

リアクトサーバーはWebPACKの経由で開始されます反応型コードです。

Answer 1

免責事項：私は一度も自分でwebpack-dev-serverを使用したことはありませんが（少なくとも直接的ではありません）、私は2つの解決策を考えることができます。

webpack-dev-server構成では、setupを使用します。 stated hereとして：私は自分自身を使用する方法であり、また

setup: function(app) { 
    // Here you can access the Express app object and add your own custom middleware to it. 
    // For example, to define custom handlers for some paths: 
    // app.get('/some/path', function(req, res) { 
    // res.json({ custom: 'response' }); 
    // }); 
} 

、Expressのミドルウェアですwebpack-dev-middlewareを、使用することです。したがって、基本的には、webpack-dev-serverと同じ機能を持つ独自のExpressサーバーを作成します。ここで

は（appエクスプレスアプリのインスタンスです）私のプロジェクトの1からの抜粋です：

// Webpack (only when not running in `production` mode): 
if (process.env.NODE_ENV !== 'production') { 
    debug('setting up webpack middleware'); 
    const webpackDevMiddleware = require('webpack-dev-middleware'); 
    const webpackHotMiddleware = require('webpack-hot-middleware'); 
    const webpackConfig  = require('./webpack.dev'); 
    const compiler    = require('webpack')(webpackConfig); 

    app.use(webpackDevMiddleware(compiler, { 
    noInfo  : true, 
    publicPath : webpackConfig.output.publicPath 
    })); 
    app.use(webpackHotMiddleware(compiler)); 
} 

Answer 2

@のrobertklepの回答に加えて、さらにいくつかの研究をもとに、あなたは「コンパイル」することができ、あなたのプロジェクトに反応しますnodejを使わずにこれらのリソースを利用するだけです。

node node_modules/.bin/webpack 

これは、コンパイル済みのプロジェクトが含まれているbundle.jsファイルが作成されます：プロジェクトを「コンパイル」に

利用ノード&のWebPACK。そして、従来のWebサーバーを経由して提供することができますdistのフォルダ内

cp bundle.js dist/ 
cp index.html dist/ 
cp -rf img css frameworks dist/ 

すべて：画像などの他のファイルは、外部のJavaScriptとスタイルシートは、例えば（distのフォルダがあることを仮定して）、コピーする必要があります。 NginxやApacheなど、NodeJSを使用します。