reactjs - 在 ASP.NET Core 应用程序中配置 React Dev Server

Question

我有一个现有的 ASP.NET Core 应用程序(使用 razor 页面)，我正在尝试将它(一次一个组件)转换为 React，直到我可以将它完全变成一个 SPA。我的想法是为我的每个 Razor 页面创建一个入口点，直到我可以将它们全部组合成一个 SPA。除了使用 webpack-dev-server 来服务我的包之外，我已经完成了大部分工作。我遇到的问题是 ASP.NET 应用程序在端口 44321 上运行，而开发服务器在端口 8080 上运行，因此我的 .cshtml 文件中的脚本标记无法看到从 webpack 托管的包。

我可以临时更改它们:

<script src="./dist/[name].bundle.js"></script>

类似于:

<script src="http://localhost:8080/[name].bundle.js"></script>

为了解决这个问题，但这不是长期解决方案。

我创建了一个示例应用程序来展示我在这里尝试完成的工作:https://github.com/jkruse24/AspNetReact .

有没有办法让我的 ASP.Net 应用程序监听 webpack-dev-server 服务的端口(不改变我的脚本标签)或者让我的 webpack-dev-server 服务于我的 ASP.Net 应用程序正在运行吗？

我曾尝试使用 .NET CORE SPA 中间件 (Microsoft.AspNetCore.SpaProxy)，但要么我没有正确配置它，要么我误解了它的用途。添加以下代码(在我的 github 示例中被注释掉)后，我的应用程序仍然会查看我的包的 .\dist 目录(运行实际构建时它们仍然存在)。

    if (env.IsDevelopment())
    {
        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "./ClientApp";
            spa.UseReactDevelopmentServer(npmScript: "start");
            spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
        });
    }

Answer 1

我最终使用 .NET Core SPA 中间件完成了这项工作。当我最初尝试使用中间件时，它工作正常，但我没有将我的 webpack 开发服务器配置为将我的包提供到正确的位置。

正如你在上面看到的，我正在为他们服务

http://localhost:8080/[name].bundle.js

当他们需要服务时

http://localhost:8080/dist/[name].bundle.js

我的问题是我的 webpack publicPath 设置不正确。我在我的存储库上进行了更新提交 here .更具体地说，this was the file diff这解决了我的问题。