问题描述
当我使用带有C#Web Api后端的TypeScript开发我的React Application时,我想使用热重载.我使用.Net框架而不是Core,所以我需要使用IIS或IIS Express.我可以使用webpack dev server
进行前端的热重装,而不会出现问题,但是我无法访问API资源.我能做到吗?
I would like to use hot reloading when developing my React Application in TypeScript with a C# Web Api backend. I use .Net framework and not Core so I need to use IIS or IIS Express. I can have hot reloading for the front end using webpack dev server
without a problem but then I can't access the API resources. Can I achieve this?
推荐答案
使用webpack dev server
作为反向代理到IIS.
NPM:
npm install --save react-hot-loader@next
npm install webpack-dev-server --save-dev
webpack.config.js,运行IIS的是代理:
webpack.config.js, proxy is where the IIS is running:
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,
},
}
然后我可以通过使用项目根文件夹node_modules\.bin\webpack-dev-server
中的以下命令来启动Web服务器.如果随后访问http://localhost:8080/
,我将进行热重载,并且仍然可以使用C#Web API,因为它将在" http:"处代理IIS Express. //localhost:61299/"
I can then start the web server by using this command from the project root folder: node_modules\.bin\webpack-dev-server
. If I then access http://localhost:8080/
I have hot reloading and I can still use the C# web api since it will proxy IIS Express at "http://localhost:61299/"
这篇关于使用Typescript进行热重载IIS Web服务器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!