为什么我们需要在express.js服务器上安装一个代理，以便将webpack热重新加载服务器功能与react路由结合起来_Express_Reactjs_React Router_Webpack Dev Server_Martyjs

为什么我们需要在express.js服务器上安装一个代理，以便将webpack热重新加载服务器功能与react路由结合起来

express reactjs

为什么我们需要在express.js服务器上安装一个代理，以便将webpack热重新加载服务器功能与react路由结合起来,express,reactjs,react-router,webpack-dev-server,martyjs,Express,Reactjs,React Router,Webpack Dev Server,Martyjs,可选信息：我正在尝试使用生成并允许来自的入口点，以便它不仅仅在\路径中工作因此，我整天都在研究堆栈溢出答案，但我无法理解下面代码背后的逻辑以及这个答案的工作原理雷托齐回答说：我设置了一个代理来实现这一点：您有一个常规的express Web服务器，它在任何>路由上提供index.html，除非它是一个资产路由。如果它是一个资产，那么请求将被代理到web开发服务器您的react热入口点仍将直接指向webpack dev服务器，因此热重新加载仍然有效假设您在8081上运行webpack

可选信息：我正在尝试使用生成并允许来自的入口点，以便它不仅仅在\路径中工作

因此，我整天都在研究堆栈溢出答案，但我无法理解下面代码背后的逻辑以及这个答案的工作原理

雷托齐回答说：

我设置了一个代理来实现这一点：

您有一个常规的express Web服务器，它在任何>路由上提供index.html，除非它是一个资产路由。如果它是一个资产，那么请求将被代理到web开发服务器

您的react热入口点仍将直接指向webpack dev服务器，因此热重新加载仍然有效

假设您在8081上运行webpack dev server，在8080上运行代理

我的代码现在看起来是这样的，但为了使它工作，我稍后需要实现它。为了实现这一点，我必须首先理解雷顿齐的答案

express.js文件

要求

代理

马蒂快车**

我计划在理解这个示例后立即使用它，我只希望它能将react routes传递到express中**

    //app.use(require('marty-express')({
    //    routes: require('../routes'),
    //    application: require('../application').Application
    //}));

快件

2台服务器的网页包dev server和express

有没有人能像我昨天从火星上下来一样，向我解释一下这个概念

我不明白两件事：

为什么我们需要代理

如何将反应路线传递到express中，以便在询问时在每条路线上为他们提供服务。（pehaps帮助我们完成这项任务，但我猜我们可以不用它手动完成）

呸。。。帮我离开这个地狱！！！请慷慨地回答。。记住，我昨天刚从火星来

谢谢你

你不知道，但这很棘手。因此，第一个要求是您有一个可配置的资产根。如果您将来需要CDN，这也是值得的。假设这是一个envvar资产URL，在运行webpack dev服务器和express服务器时都可用

您需要通常的webpack dev服务器，以及CORS头。这样，您的主express服务器就可以在脚本/链接标记中指向webpack dev服务器

资产URL类似于：

网页包然后在你的网页配置文件中，你有大部分相同的垃圾

var port = '8081', hostname = 'localhost';

if (process.env.ASSETS_URL) {
    var assetUrlParts = url.parse(process.env.ASSETS_URL);
    port = assetUrlParts.port;
    hostname = assetUrlParts.hostname;
}

...

  entry: [
    'webpack-dev-server/client?' + url.format({port: port, hostname: hostname, protocol: 'http:'}),
    'webpack/hot/only-dev-server',
    ...

  output: {
    path: __dirname + '/public/',
    filename: 'bundle.js',
    publicPath: process.env.ASSETS_URL || '/public/'

快速服务器这里唯一特别的是，您需要以某种方式将

process.env.ASSETS\u URL

放入模板的本地部分

<head>
    <link rel="stylesheet" href="{{ assetsUrl }}/main.css">
</head>
<body>
    ...
    <script type="text/javascript" src="{{ assetsUrl }}/bundle.js"></script
</body>


...
    app.get('/*', function(req, res) {
        res.sendFile(__dirname + '/index.html');
    });//if I got this straight this line just tells express to server my index.html file to all routes. My guess is this will be removed when I implement [marty-express][4].

        //----- my-webpack-dev-server------------------
    var webpackServer = new WebpackDevServer(webpack(require('../../webpack.config')), {
        contentBase: __dirname,
        hot: true,
        quiet: false,
        noInfo: false,
        publicPath: '/assets/',
        stats: { colors: true }
    });

    //run webpack hot reload server on port 8081
    webpackServer.listen(8081, 'localhost', function() {});

    //run express server on port 8080
    app.listen(8080);

var config = require('./webpack.config');

var port = '8081', hostname = 'localhost';

if (process.env.ASSETS_URL) {
    var assetUrlParts = url.parse(process.env.ASSETS_URL);
    port = assetUrlParts.port;
    hostname = assetUrlParts.hostname;
}

new WebpackDevServer(webpack(serverConfig), {
  publicPath: serverConfig.output.publicPath,
  hot: true,
  headers: { "Access-Control-Allow-Origin": "*" }
}).listen(port, 'localhost', function (err, result) {
  if (err) {
    console.log(err);
    process.exit(1);
  }

  console.log('Listening at ' + url.format({port: port, hostname: hostname, protocol: 'http:'}));
});

var port = '8081', hostname = 'localhost';

if (process.env.ASSETS_URL) {
    var assetUrlParts = url.parse(process.env.ASSETS_URL);
    port = assetUrlParts.port;
    hostname = assetUrlParts.hostname;
}

...

  entry: [
    'webpack-dev-server/client?' + url.format({port: port, hostname: hostname, protocol: 'http:'}),
    'webpack/hot/only-dev-server',
    ...

  output: {
    path: __dirname + '/public/',
    filename: 'bundle.js',
    publicPath: process.env.ASSETS_URL || '/public/'

<head>
    <link rel="stylesheet" href="{{ assetsUrl }}/main.css">
</head>
<body>
    ...
    <script type="text/javascript" src="{{ assetsUrl }}/bundle.js"></script
</body>