Update SpaProxy to work with http-proxy-middleware 2.x.

[JoshClose]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

When updating http-proxy-middleware from the default installed version of 0.19.1 to the latest version 2.0.4, the SpaProxy stops working. 0.21.0 is the last version that still works. It never detects that the proxy is ready even though the JS compilation is complete.

Describe the solution you'd like

SpaProxy to work with the latest version of http-proxy-middleware.

Additional context

AspNet output:

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7286
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5286
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\Users\narsh\Projects\AspNetCore6React\AspNetCore6React\
info: Microsoft.AspNetCore.SpaProxy.SpaProxyLaunchManager[0]
      No SPA development server running at https://localhost:44494 found.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is not ready. Returning temporary landing page.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is not ready. Returning temporary landing page.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is not ready. Returning temporary landing page.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is not ready. Returning temporary landing page.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is not ready. Returning temporary landing page.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is not ready. Returning temporary landing page.

Proxy output:

> aspnetcore6react@0.1.0 prestart
> node aspnetcore-https && node aspnetcore-react


> aspnetcore6react@0.1.0 start
> rimraf ./build && react-scripts start
Starting the development server...

(node:22244) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:22244) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(node:22244) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Compiled with warnings.

src\App.js
  Line 11:26:  'App' was used before it was defined  no-use-before-define

src\components\Counter.js
  Line 4:24:  'Counter' was used before it was defined  no-use-before-define

src\components\FetchData.js
  Line 4:24:  'FetchData' was used before it was defined  no-use-before-define

src\components\Home.js
  Line 4:24:  'Home' was used before it was defined  no-use-before-define

src\components\Layout.js
  Line 6:24:  'Layout' was used before it was defined  no-use-before-define

src\components\NavMenu.js
  Line 7:24:  'NavMenu' was used before it was defined  no-use-before-define

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

assets by path static/js/*.js 2.52 MiB
  asset static/js/bundle.js 2.52 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_es5_min_js.chunk.js 5.37 KiB [emitted] 1 related asset
asset index.html 1.62 KiB [emitted]
asset asset-manifest.json 490 bytes [emitted]
orphan modules 355 KiB [orphan] 125 modules
runtime modules 31.4 KiB 15 modules
javascript modules 2.31 MiB
  modules by path ./node_modules/ 2.27 MiB 145 modules
  modules by path ./src/ 42.6 KiB
    modules by path ./src/components/ 27 KiB 7 modules
    modules by path ./src/*.js 11.8 KiB 4 modules
    modules by path ./src/*.css 3.85 KiB 2 modules
asset modules 4.4 KiB
  data:image/svg+xml,%3csvg xmlns=%27.. 281 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 279 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 161 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 271 bytes [built] [code generated]
  data:image/svg+xml,%3csvg xmlns=%27.. 181 bytes [built] [code generated]
  + 11 modules

WARNING in src\App.js
  Line 11:26:  'App' was used before it was defined  no-use-before-define

src\components\Counter.js
  Line 4:24:  'Counter' was used before it was defined  no-use-before-define

src\components\FetchData.js
  Line 4:24:  'FetchData' was used before it was defined  no-use-before-define

src\components\Home.js
  Line 4:24:  'Home' was used before it was defined  no-use-before-define

src\components\Layout.js
  Line 6:24:  'Layout' was used before it was defined  no-use-before-define

src\components\NavMenu.js
  Line 7:24:  'NavMenu' was used before it was defined  no-use-before-define

webpack 5.70.0 compiled with 1 warning in 14524 ms

[Pilchie]

Tagging @javiercn

[javiercn]

@JoshClose thanks for contacting us.

The proxy is normally controlled by the underlying framework, I would check first if you can run the dev server through the CLI after upgrading it.

Once you have that working, the logic on the server is pretty straightforward. On your csproj file there is a property SpaStartUrl that the dev middleware polls to determine if the frontend proxy is ready. When that's the case, it redirects you there. I would check that a request to that url returns a 200 status code, and if not, find a separate url you can poll and update your csproj to use that.

Hi @JoshClose. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[JoshClose]

When someone creates a new ASP.NET Core + React project in Visual Studio, usually the first thing they do is update all the .NET packages to the latest, then update all the JavaScript packages to the latest. This gives a nice clean starting point on the latest code. With the currently template, you cannot do this.

This issue threw me for a loop after updating a project to .net6 and use the newer proxy method after installing latest proxy middleware. The latest version of http-proxy-middleware causes the spa services to never recognize the dev server. I did install using hte template and it installs ^0.19.1 so I installed that version and it works now.

[javiercn]

@JoshClose I think there is a mismatch on expectations here

When someone creates a new ASP.NET Core + React project in Visual Studio, usually the first thing they do is update all the .NET packages to the latest, then update all the JavaScript packages to the latest

Updating to latest can mean two different things:

• Updating to latest patched version: That's expected to work without issues.
• Updating to latest major version: This is not necessarily expected to work without additional changes to the application.

Dependencies like the http-proxy-middleware are brought in transitively by whatever tooling you are using for development (ng new, create-react-app) and I don't think it is expected that you can update those dependencies across major versions and expect things to work.

What we normally do when we update the dependencies in our templates is create a new version using the latest ng new and create-react-app and use the dependencies from there as that's what the framework authors (angular, react) tested things against. Updating dependencies in a different way, while it might work (and ideally should work) leaves you in a place of mismatched dependencies that is unknown/undefined.

My recommendation is that you stick to the dependencies provided by the given SPA framework (angular/react) unless you need to update for a concrete reason. The code that detects whether the proxy is up can be found here so its "straightforward" to replicate this within your app in case you want to pursue this route.