React UIとNode.js/Expressアプリケーションがwebpackでサービス/監視されています

Question

私はReactとNodeを初めて使用しています。

私は少し前にNode.js/Expressと働いていましたが、nodemonを使ってファイルの変更を監視し、アプリを再起動しました。

また、私は最近Reactで作業を開始しました。ファイルの変更を監視してUIをリロードするwebpack dev server（特にwebpack-dev-server --content-base src --inline --hot --history-api-fallback）セットアップを使用します。

問題

は今、私はそれを一緒にネクタイをしたいです。私が見つけた

まず解決されました：私のnode appは、特定のポートで起動し、3000は、その後、私のbackend appに特定のURLへwebpack dev server 8080のポートとproxy要求を開始言います。

devServer: { 
    proxy: { 
     '/backend-api/': { 
      target: { 
       "host": "localhost", 
       "protocol": 'http:', 
       "port": 3000 
      }, 
      ignorePath: false, 
      changeOrigin: true, 
      secure: false 
     } 
    } 
}, 

これはうまくいくはずですが、1回のアプリケーションで2台のサーバーを起動するのは間違いです。

両方に役立つでしょう単一サーバを起動するには（私が理解でき、簡単な例）どのような方法があります：server side appとReact UI？

もちろん、クライアント側のコードが変更された場合、サーバコードが変更されたり、UIが再読み込みされると、ファイルの変更を追跡してサーバアプリケーションを再起動する必要があります。

Answer 1

あなたは、このパッケージを使用してExpressのミドルウェアを通じてのWebPACK使用することができます。https://github.com/webpack/webpack-dev-middleware

あなたは単にアプリに追加して使用することができます提供するために、この上に構築パッケージがあります。また

var webpackMiddleware = require("webpack-dev-middleware"); 
app.use(webpackMiddleware(webpack({/* webpack options */}))); 

ホットロードと「Create React App」スタイルのターミナルディスプレイ：https://www.npmjs.com/package/webpack-express-middleware