Aspnetcore: SPA Proxy Development Server doesn't auto refresh on .NET Core 3.0

[TempleClause]

My react app runs on localhost:3000 and is used as a proxy with the following line:
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

On .NET Core 2.2 the content was automatically refreshed whenever I changed something in a js/ts file without reloading the whole page. Now on Core 3.0 I have to manually refresh the page.

When I create a new ASP.NET Core Web Application with the React.js template on Core 2.2 and add the proxy server, the auto refresh works as expected.

Any ideas? Maybe it's just an option with a different default?

[anurse]

Can you include the specific versions of .NET Core 3.0 you are using? Use dotnet --info on the command line to get this information.

[TempleClause]

Of course:
Version: 3.0.100-preview6-012264

[dpr-dev]

@TempleClause, could you show the startup.cs file ?

[dpr-dev]

I tried to reproduce this error, but everything worked for me

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddNodeServices(); 
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app)
{
        app.UseDeveloperExceptionPage(); 
        app.UseSpa(builder =>
        { 
             builder.UseProxyToSpaDevelopmentServer("http://localhost:3000/");
        }); 


        app.UseStaticFiles();
        app.UseRouting();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapDefaultControllerRoute();
        });
}

[TempleClause]

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMemoryCache();
        services.AddMvc(options => options.EnableEndpointRouting = false);

        // In production, the React files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/build";
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            //app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
                //spa.UseReactDevelopmentServer(npmScript: "start");
            }
        });
    }

Of course, this is my Startup.cs file.

If you need further help, I can create two solutions, one and .NET Core 2.2 which is working as expected and one on .NET Core 3.0 and send you the files.

[TempleClause]

I just tried it with your Startup file but the issue still exists. When going directly to localhost:3000 the page automatically refreshes as expected as soon as I change a file but on the actual page in my case localhost:44359 it doesn't and needs to be manually refreshed.

[ryanbrandenburg]

This does not replicate for me. If I use UseProxyToSpaDevelopmentServer instead of UseReactDevelopmentServer, then launch the ClientApp independently I still get Hot Module reloading. Some things to check:

1. Make sure you don't have a "dist" folder or you might be running into https://github.com/aspnet/AspNetCore/issues/11797 (which should be fixed for templates created after Preview9).
2. Make sure that the ClientApp actually launched on the port and host you think it did.
3. Does the content change if you do a hard-reload instead of waiting for hot module replacement?

If you looked into those three things and are still having trouble please create a minimal repro app as a GitHub repo and link it in this issue.

[ryanbrandenburg]

No response here so I'm closing this out. If you're still experiencing this issue please respond with the info requested above and re-open.

[hannesaqua]

@ryanbrandenburg I'm experiencing the exact same thing.

When going directly to http://localhost:3000 the hot reloading works. But if I go to the IIS Express server at http://localhost:55364/ it doesn't.

1) I don't have a dist folder
2) ClientApp is running on the expected port
3) Hard-reloading of the page does change the content

Firefox gives the following error (Chrome gives a similar one):

Firefox can't establish a connection to the server at ws://localhost:55364/sockjs-node/223/hgys0hnf/websocket. websocket.js:7 The connection to ws://localhost:55364/sockjs-node/223/hgys0hnf/websocket was interrupted while the page was loading.

The StartUp.cs file looks like this:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace IoTCloud
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();

            // In production, the React files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/build";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();

            if (env.IsProduction())
            {
                app.UseSpaStaticFiles();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
                }
            });
        }
    }
}

My .NET info:

.NET Core SDK (reflecting any global.json):
 Version:   3.0.100
 Commit:    04339c3a26

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.17763
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.0.100\

[C1rdec]

I'm experiencing the same issue.
@ryanbrandenburg Any updates?

[dpr-dev]

@hannesaqua, can you upload a test project that reproduce this bug ?

[Cito]

Experiencing similar issues with Angular 8 and .NET Core 3.1. Live reload sometimes stops working and sometimes I see the socket error mentioned above. In .NET Core 2.2 I never noticed such problems.

Update: I found that after setting Project properties -> Debug -> Web Server Settings -> Enable SSL, it is now working again.

[ManfredLange]

@dpr-dev @ryanbrandenburg

Here is a repro repository (see link below) within minimal code base for ASP.NET Core 3.1.100, React 16.12.0 and react-scripts 3.3.0. Furthermore, I am using nodejs 12.13.1 and Visual Studio 2019 Community Edition 16.4.2.

The code base was generated using dotnet new react using current templates (as of writing), then all npm packages were updated to latest stable. Further details in README.md of the repo.

It is perfectly possible that this repo only has issues in my development environment. It appears, though, as if the development server is either not started when starting from within Visual Studio. Hot reload works when starting the app in a termimal using npm start.

https://github.com/RimuTec/react-repro

Update 06 Jan 2020: There is another issue with versino 3.1.0 of nuget package "Microsoft.AspNetCore.SpaServices.Extensions" that may be related. See https://github.com/aspnet/AspNetCore/issues/17618

[technificentConsulting]

Using VS2019 / .NET Core 3.1
This is what is working for me, if not listed in this order I've experienced npm start errors.

if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseReactDevelopmentServer("http://localhost:3000");
}