TypescriptホットリロードIIS Webサーバーに対応

Question

C＃Web APIバックエンドを使用してReactアプリケーションをTypeScriptで開発するときにホットリロードを使用したいと思います。私は.Netフレームワークを使用し、コアではないので、IISまたはIIS Expressを使用する必要があります。 webpack dev serverを使用してフロントエンドをホットリロードすることはできますが、APIリソースにアクセスすることはできません。これを達成することはできますか？

Answer 1

webpack dev serverをreverse proxyとしてIIS用のソリューションが見つかりました。

NPM：IISが実行されている

npm install --save react-hot-loader@next 

npm install webpack-dev-server --save-dev 

webpack.config.js、プロキシがされています

var webpack = require('webpack'); 
var path = require("path"); 
var proxy = 'localhost:61299'; 

module.exports = { 
    entry: [ 
     // activate HMR for React 
     'react-hot-loader/patch', 

     // the entry point of our app 
     './Scripts/src/index.tsx', 
    ], 
    //entry: "./Scripts/src/index.tsx", 
    output: { 
     filename: "./Scripts/dist/bundle.js", 
    }, 

    // Enable sourcemaps for debugging webpack's output. 
    devtool: "source-map", 

    resolve: { 
     // Add '.ts' and '.tsx' as resolvable extensions. 
     extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"] 
    }, 

    module: { 
     loaders: [ 
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. 
      //{ test: /\.tsx?$/, loader: "ts-loader" } 
      { test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader'] } 
     ] 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     // enable HMR globally 

     new webpack.NamedModulesPlugin(), 
     // prints more readable module names in the browser console on HMR updates 
    ], 

    devServer: { 
     proxy: { 
      '*': { 
       target: 'http://' + proxy, 
      } 
     }, 
     port: 8080, 
     host: '0.0.0.0', 
     hot: true, 
    }, 
} 

私は、プロジェクトのルートフォルダからこのコマンドを使用して、Webサーバーを起動することができます：node_modules\.bin\webpack-dev-server。私が​​にアクセスした場合、私は熱いリロードをしており、IIS Expressを "http://localhost:61299/"にプロキシするので、まだC＃Web APIを使用することができます