在 ASP.NET 核心应用程序中配置 React Dev Server

Question

我有一个现有的 ASP.NET 核心应用程序（使用 razor 页面），我正在尝试将它（一次一个组件）转换为 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");
        });
    }

Answer 1

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

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

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

当他们需要服务时

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

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

在 ASP.NET 核心应用程序中配置 React Dev Server

Configure React Dev Server within an ASP.NET Core Application

reactjs

asp.net-core

webpack

asp.net-core-mvc

webpack-dev-server