在 ASP.NET Core 应用程序中配置 React Dev Server答案

【问题标题】：Configure React Dev Server within an ASP.NET Core Application在 ASP.NET Core 应用程序中配置 React Dev Server
【发布时间】：2021-12-17 08:18:34
【问题描述】：

我有一个现有的 ASP.NET Core 应用程序（使用剃须刀页面），我正在尝试将它一次一个组件转换为 React，直到我可以完全将它变成一个 SPA。这个想法是为我的每个剃须刀页面创建一个入口点，直到我可以将它们全部组合到一个 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");
        });
    }

【问题讨论】：

标签： reactjs asp.net-core webpack asp.net-core-mvc webpack-dev-server

【解决方案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 解决了我的问题。

【讨论】：