I’ve inherited a very cool project that has a vue.js front end and ASP.NET Core Web API back end.

There is something special about it causing me an issue:

• The vue front end code is not it’s own project, instead living in an /ClientApp folder inside the API project
• The API project uses the spa.UseProxyToSpaDevelopmentServer("http://localhost:8080") in the Startup.cs to proxy requests to the Vue side of things. The vue app runs at port 8080.

The problem this causes me is that I can’t debug the Vue.js code. My breakpoints aren’t being hit.

I can hit my breakpoints in the C# API code, just not Vue.js.

Here is what I do to run the application:

1. Open Visual Studio Code to the /ClientApp folder and run the Vue.js app on a terminal using npm run serve. The url it uses is http://localhost:8080/
2. Open Visual Studio and open the whole solution. Run the ASP.NET Core Web API project.

At this point, the ASP.NET Core Web API project shows the vue front end as expected. I just can’t get the breakpoints to work.

I think I am either not running the application in the most optimal way, or don’t fully understand what this spa.UseProxyToSpaDevelopmentServer("http://localhost:8080") does. (My initial thought was that I could just run the API and have the Vue.js run in the same instance, but I’ve had to run one in VS Code and the other in Visual Studio).

Would anyone know how I can hit Vue breakpoints in a development build like this?