Can't start frontend and backend projects at the same time

Question

Can't start frontend and backend projects at the same time

Maribel Díaz Galiano 31

Hi!

I have a problem with the tutorial Create an ASP.NET Core app with Angular - Visual Studio (Windows). It's my first time using Visual Studio 2022 (not Visual Studio Code) to create a solution consisting of a .NET backend and an Angular frontend.

I've followed all the steps until "Start the project" (including it). When you hit the Start button, two command prompts (one for the backend and the other for the frontend) should open but this is what happens to me:

I hit the Start button in VS
Only one command prompt, for the frontend, appears. Inside, it executes npm prestart, and npm start and at the end it shows the message Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/.
I open the frontend correctly in the browser but there is no backend connection.
I close the command prompt for the frontend.
I get a dialog window saying "There were deployment errors. Continue?".
a. If I click "No", all processes that might be running terminate and nothing happens. But I notice a new message in the Output box in VS saying An exception happened at deploy, the port 4200 configured on launch.json is unavailable.. Then I ask myself: "But... I only want to build and start the project, not deploying it...". Is this message telling me something?
b. If I click "Yes" the command prompt for the backend starts correctly, and two URL's open in the browser: https://localhost:7237/swagger/index.html and https://localhost:4200/ (the URL for the frontend, but the frontend is down at this point!).

What can I be doing wrong?

Edit:
I tried starting backend and frontend manually and it works perfect. That makes me think that the problem seems to be related to VS and how it starts the projects when I hit the Start button.

Xinran Shen - MSFT 2,091 Reputation points

2022-11-30T06:35:58.52+00:00

Hi @Anonymous , Have you changed anything in your project, I follow the Docs and the program works well. Do you select the backend project and move it above the frontend?
Maribel Díaz Galiano 31 Reputation points

2022-11-30T13:19:23.597+00:00

No, AFAIK. I followed all the steps. Something interesting is the multi-project Start configuration. It happens that it doesn't matter what project (if backend or frontend) is placed first. The command prompt for the FRONTEND ALWAYS appears first.

The proxy settings are also correct because if I launch each project separately and manually (right-click on the project > Debug > Start New Instance, instead of just clicking Visual Studio "Play" button), the system works perfect.

Strange (for me) things happen when I close the frontend command prompt (as detailed in the original post). What if I need to launch the frontend as a process in the background so, if I close the command prompt, the process isn't killed? That way, I don't get the message about deployment (why deployment if I'm not deploying anything?) in the VS Output box (see step 5 in the original post).

What do you have in your package.json in the frontend? I have the following (image):
Xinran Shen - MSFT 2,091 Reputation points

2022-12-01T08:54:56.44+00:00

what's the version of your visual studio? You can upload a simple project to Github and I will test it in my visual studio.
Maribel Díaz Galiano 31 Reputation points

2022-12-01T12:49:38.05+00:00

Visual Studio Community 2022 64-bit (v17.4.2)

Ok! I'll try to do that (upload a test project)!
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator

2022-12-01T17:41:50.947+00:00

the frontend command box appears first because the build is so quick (typically no steps defined). the backend needs to build and publish before it can start the app.

I typically use the single project react template, but created a two project like your example. the build window

Build started...
1>------ Build started: Project: frontend, Configuration: Debug Any CPU ------
2>------ Deploy started: Project: frontend, Configuration: Debug Any CPU ------

==========
Build: 1 succeeded, 0 failed, 1 up-to-date, 0 skipped ==========

==========
Elapsed 00:13.812 ==========

==========
Deploy: 1 succeeded, 0 failed, 0 skipped ==========

==========
Elapsed 00:13.812 ==========

in my react app, there are no build steps (only for release build), but I could add some, so the build is always done. the deploy starts the node app via npm.

vs sets the flag for the node app to not start the browser, and starts one itself so it can run its browser setup scripts.

before starting the apps via VS, check that there are no node instances running the app.
Maribel Díaz Galiano 31 Reputation points

2022-12-01T18:45:14.163+00:00

Thank you. May I ask you some questions?

Question 1: Are you saying that it doesn't matter how you configure the precedence of the projects in the Solution properties, because if the second in the list is faster than the first, it will run before? And... if that second project leaves a process open (like a frontend server listening) it won't allow the first project in the list to be executed (the backend process)?

By the way, If in the same configuration window I UNCHECK de deploy box for the frontend (originally, it was checked):

I get the backend running perfect, but the frontend doesn't start. I get localhost:4200 connection refused in the browser.

Question 2: What do you mean by "vs sets the flag for the node app". What flag and where? Is it possible to tell VS to not flag anything and not start any browser?

About other Node instances, I checked and there are any before starting the app.

Note: the tutorial docs say "Visual Studio 2022 Preview 2 or later" is required. First, I don't understand why the tutorial would work only with a beta version of the IDE... Anyway, just in case I installed "Microsoft Visual Studio Community 2022 (64-bit) - Preview
Version 17.5.0 Preview 1.0". I don't find Preview 2. No success with any version.
Maribel Díaz Galiano 31 Reputation points

2022-12-01T18:55:41.853+00:00

I even set the backend as a dependency for the frontend with no success:

At the end, it's like if frontend is up, backend can't start and if backend is up, frontend can't start.

I check the Resource Monitor and there are different processes for backend and frontend, so I guess it has nothing to do with VS somehow trying to "reuse" a single process for both projects...
Xinran Shen - MSFT 2,091 Reputation points

2022-12-02T06:54:41.597+00:00

I have updated my visual studio to 17.4.2 and it works fine, I think may be something wrong in your visual studio, you can try to modify or reinstall visual studio and try again.
Maribel Díaz Galiano 31 Reputation points

2022-12-02T13:37:16.317+00:00

Thank you for your time. Yes, I guess it's something related to Visual Studio but that's my problem: I can't wonder where the error can be or what I need to modify. Another guess is that perhaps I need to activate/deactivate something in Windows at an OS level. Please, if not, consider reading my other comments in the thread.

PD: my OS is Windows 11 Home (build 22621.819).

Bruce (SqlWork.com) 77,926 Volunteer Moderator

I tested with visual studio 2022 17.4.0 (stable channel)

the frontend project needs the deploy, because this is what runs the node project to host your angular code. unless you modified the frontend build step, it is probably empty in the msbuild file. just look at your msbuild file for the frontend. mine looks like:

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.62-alpha">  
  <PropertyGroup>  
    <StartupCommand>set BROWSER=none&amp;&amp;npm start</StartupCommand>  
    <JavaScriptTestRoot>src\</JavaScriptTestRoot>  
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>  
    <!-- Command to run on project build -->  
    <BuildCommand>  
    </BuildCommand>  
    <!-- Command to create an optimized build of the project that's ready for publishing -->  
    <ProductionBuildCommand>npm run build</ProductionBuildCommand>  
    <!-- Folder where production build objects will be placed -->  
    <BuildOutputFolder>$(MSBuildProjectDirectory)\build</BuildOutputFolder>  
  </PropertyGroup>  
  <ItemGroup>  
    <None Include=".vscode\launch.json" />  
  </ItemGroup>  
</Project>

note the startup command (see deploy config section) used by javascript project deploy. the BROWSER=none tells the npm script to not open a browser as VS wants to do this step.

Maribel Díaz Galiano 31 Reputation points

2022-12-02T18:04:26.513+00:00

Is that msbuild file the one created by default? Mine is diferent (untouched):

I don't have either the <StartupCommand> nor the <ItemGroup> at the bottom elements.

I tried copying those values from your file to mine, but the results are the same... The frontend command prompt appears first and the execution of the VS solution hangs there, this is, the backend doesn't start. Below is a screenshot of VS Output box in that "hanging" state:

It seems that the build starts for both projects (backend and frontend). In fact, there is a line containing TestBackend6.dll (I painted a red arrow) which I don't know what it means. But after that, no more lines related to the backend are printed. Only NPM stuff and a message saying that the deploy of the frontend started. The only thing I get to see is the command prompt on the right, which ends with the frontend server listening on localhost:4200.

Accepted answer

3 additional answers

Your answer

Xinran Shen - MSFT 2,091 Reputation points

2022-11-30T06:35:58.52+00:00

Hi @Anonymous , Have you changed anything in your project, I follow the Docs and the program works well. Do you select the backend project and move it above the frontend?
Maribel Díaz Galiano 31 Reputation points

2022-11-30T13:19:23.597+00:00

No, AFAIK. I followed all the steps. Something interesting is the multi-project Start configuration. It happens that it doesn't matter what project (if backend or frontend) is placed first. The command prompt for the FRONTEND ALWAYS appears first.

The proxy settings are also correct because if I launch each project separately and manually (right-click on the project > Debug > Start New Instance, instead of just clicking Visual Studio "Play" button), the system works perfect.

Strange (for me) things happen when I close the frontend command prompt (as detailed in the original post). What if I need to launch the frontend as a process in the background so, if I close the command prompt, the process isn't killed? That way, I don't get the message about deployment (why deployment if I'm not deploying anything?) in the VS Output box (see step 5 in the original post).

What do you have in your package.json in the frontend? I have the following (image):
Xinran Shen - MSFT 2,091 Reputation points

2022-12-01T08:54:56.44+00:00

what's the version of your visual studio? You can upload a simple project to Github and I will test it in my visual studio.
Maribel Díaz Galiano 31 Reputation points

2022-12-01T12:49:38.05+00:00

Visual Studio Community 2022 64-bit (v17.4.2)

Ok! I'll try to do that (upload a test project)!
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator

2022-12-01T17:41:50.947+00:00

the frontend command box appears first because the build is so quick (typically no steps defined). the backend needs to build and publish before it can start the app.

I typically use the single project react template, but created a two project like your example. the build window

Build started...
1>------ Build started: Project: frontend, Configuration: Debug Any CPU ------
2>------ Deploy started: Project: frontend, Configuration: Debug Any CPU ------

==========
Build: 1 succeeded, 0 failed, 1 up-to-date, 0 skipped ==========

==========
Elapsed 00:13.812 ==========

==========
Deploy: 1 succeeded, 0 failed, 0 skipped ==========

==========
Elapsed 00:13.812 ==========

in my react app, there are no build steps (only for release build), but I could add some, so the build is always done. the deploy starts the node app via npm.

vs sets the flag for the node app to not start the browser, and starts one itself so it can run its browser setup scripts.

before starting the apps via VS, check that there are no node instances running the app.
Maribel Díaz Galiano 31 Reputation points

2022-12-01T18:45:14.163+00:00

Thank you. May I ask you some questions?

Question 1: Are you saying that it doesn't matter how you configure the precedence of the projects in the Solution properties, because if the second in the list is faster than the first, it will run before? And... if that second project leaves a process open (like a frontend server listening) it won't allow the first project in the list to be executed (the backend process)?

By the way, If in the same configuration window I UNCHECK de deploy box for the frontend (originally, it was checked):

I get the backend running perfect, but the frontend doesn't start. I get localhost:4200 connection refused in the browser.

Question 2: What do you mean by "vs sets the flag for the node app". What flag and where? Is it possible to tell VS to not flag anything and not start any browser?

About other Node instances, I checked and there are any before starting the app.

Note: the tutorial docs say "Visual Studio 2022 Preview 2 or later" is required. First, I don't understand why the tutorial would work only with a beta version of the IDE... Anyway, just in case I installed "Microsoft Visual Studio Community 2022 (64-bit) - Preview
Version 17.5.0 Preview 1.0". I don't find Preview 2. No success with any version.
Maribel Díaz Galiano 31 Reputation points

2022-12-01T18:55:41.853+00:00

I even set the backend as a dependency for the frontend with no success:

At the end, it's like if frontend is up, backend can't start and if backend is up, frontend can't start.

I check the Resource Monitor and there are different processes for backend and frontend, so I guess it has nothing to do with VS somehow trying to "reuse" a single process for both projects...
Xinran Shen - MSFT 2,091 Reputation points

2022-12-02T06:54:41.597+00:00

I have updated my visual studio to 17.4.2 and it works fine, I think may be something wrong in your visual studio, you can try to modify or reinstall visual studio and try again.
Maribel Díaz Galiano 31 Reputation points

2022-12-02T13:37:16.317+00:00

Thank you for your time. Yes, I guess it's something related to Visual Studio but that's my problem: I can't wonder where the error can be or what I need to modify. Another guess is that perhaps I need to activate/deactivate something in Windows at an OS level. Please, if not, consider reading my other comments in the thread.

PD: my OS is Windows 11 Home (build 22621.819).
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator

2022-12-02T17:08:13.077+00:00

I tested with visual studio 2022 17.4.0 (stable channel)

the frontend project needs the deploy, because this is what runs the node project to host your angular code. unless you modified the frontend build step, it is probably empty in the msbuild file. just look at your msbuild file for the frontend. mine looks like:

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.62-alpha"> <PropertyGroup> <StartupCommand>set BROWSER=none&&npm start</StartupCommand> <JavaScriptTestRoot>src\</JavaScriptTestRoot> <JavaScriptTestFramework>Jest</JavaScriptTestFramework>  <BuildCommand> </BuildCommand>  <ProductionBuildCommand>npm run build</ProductionBuildCommand>  <BuildOutputFolder>$(MSBuildProjectDirectory)\build</BuildOutputFolder> </PropertyGroup> <ItemGroup> <None Include=".vscode\launch.json" /> </ItemGroup> </Project>

note the startup command (see deploy config section) used by javascript project deploy. the BROWSER=none tells the npm script to not open a browser as VS wants to do this step.
Maribel Díaz Galiano 31 Reputation points

2022-12-02T18:04:26.513+00:00

Is that msbuild file the one created by default? Mine is diferent (untouched):

I don't have either the <StartupCommand> nor the <ItemGroup> at the bottom elements.

I tried copying those values from your file to mine, but the results are the same... The frontend command prompt appears first and the execution of the VS solution hangs there, this is, the backend doesn't start. Below is a screenshot of VS Output box in that "hanging" state:

It seems that the build starts for both projects (backend and frontend). In fact, there is a line containing TestBackend6.dll (I painted a red arrow) which I don't know what it means. But after that, no more lines related to the backend are printed. Only NPM stuff and a message saying that the deploy of the frontend started. The only thing I get to see is the command prompt on the right, which ends with the frontend server listening on localhost:4200.

Answer 1

Kreis Roland 96

Hi

I had the same behavior: Frontend App was started, and blocked to start the Backend App...

I used Node.js version 18.12.1 (node-v18.12.1-x64.msi). After a downgrade to version 16.18.1 (node-v16.18.1-x64.msi), everything worked fine, both apps were started in Visual Studio 2022.

https://nodejs.org/download/release/v16.18.1/

Greetings,
Roli

Maribel Díaz Galiano 31 Reputation points

2022-12-04T17:25:22.787+00:00

That was it!!

Wow... the good old "node version".

Just to add more info about my case and complete the thread:
I was also using Node v18.12.1 (LTS at the time). I had installed it with nvm for Windows and I used this tool again to switch to Node v16.18.1. In both cases for 64-bit architecture.

With this change, effectively the frontend and backend run perfect as expected from the tutorial.

Thank you!
Papp Attila 0 Reputation points

2023-01-21T13:36:38.49+00:00

Also works fine with node-v16.19.0-x64.

I see that version 16 already starts both browser instances during bundle generation. The 17+ version doesn't do anything in the same place.

Answer 2

Bruce (SqlWork.com) 77,926 Volunteer Moderator

it looks like you are using the new two project template (rather than embedded template)

it looks like the frontend is the angular default:

https://localhost:4200 (s/b in the frontend launch settings)

it looks like the backend is

https://localhost:7237 (s/b in the backend launch settings)

I use react, but angular must be similar. in the reverse proxy setting for the frontend must match the backend (probably set to https://localhost:5001)

https://angular.io/guide/build

be sure you have multi project startup. right click on solution -> properties, select multi-project, start both.

you might change the backend to the default 5001 to match the proxy settings

Maribel Díaz Galiano 31 Reputation points

2022-11-30T13:11:56.477+00:00

Hi Bruce-SqlWork:

Yes, I did all those steps, I followed the tutorial until the "Start the project" step (including it).

I configured the multi-project Start. The interesting part is that it doesn't matter what project (if backend or frontend) is placed first. The command prompt for the FRONTEND ALWAYS appears first.

The proxy settings are also correct because if I launch each project separately and manually (right-click on the project > Debug > Start New Instance, instead of just clicking Visual Studio "Play" button), the system works perfect.

For me, it must be something about how Visual Studio manages the multi-project start, but I can't figure it!

Answer 3

Portscher, Ed 21

So how do you get this to work without downgrading node version. I don't see that as a viable solution. You cant run on node 16 forever. Anyone have a solution?

Kreis Roland 96 Reputation points

2022-12-21T06:31:41.443+00:00

If you don't want to downgrade, the solution is probably as always: Waiting for an upgrade? A fix in VS or Node...
Portscher, Ed 21 Reputation points

2022-12-21T15:17:30.14+00:00

I found a fix. I added --host 0.0.0.0 to start in package.json

"start": "ng serve --host 0.0.0.0 --ssl ........
Maribel Díaz Galiano 31 Reputation points

2022-12-21T17:01:54.427+00:00

I just tried and it also works for me (VS 17.4.2 Community Edition, Node.js v18.12.1).

Just a note: when I hit the VS play button and the command prompt for the frontend appears, a Windows dialog pops up showing a warning about the firewall which I accepted.

Do you know why this change to the package.json fixes the problem?
Maribel Díaz Galiano 31 Reputation points

2022-12-21T17:11:04.11+00:00

It's true, downgrading might not be a viable solution for everyone. However, I'm not able to even intuit where the problem is: VS, Node.js, Angular, Windows? Is the issue at an application level, OS, networking? I'm very curious if someone finds out.
Portscher, Ed 21 Reputation points

2022-12-21T17:28:13.14+00:00

so i was able to fix it by adding --host 0.0.0.0 to the package.json

"start": "ng serve --host 0.0.0.0 --ssl --ssl-cert ......
Maribel Díaz Galiano 31 Reputation points

2022-12-21T17:31:57.653+00:00

Yes, but why does that specific solution work?
Scott Fraley 21 Reputation points

2023-01-04T22:22:16.25+00:00

Whoot! This worked for me too!
Eric Nielsen 0 Reputation points

2023-03-17T01:00:13.7933333+00:00

@Portscher, Ed So, here I am on March 16, 2023, following Tutorial: Create an ASP.NET Core app with Angular in Visual Studio which has a date of 02/28/2023 and has a 'troubleshooting' section, and I needed your fix, Ed, to actually make it work and keep moving forwards. Based on re-reading the top part of this where it was confirmed the tutorial works as written if a workstation has the older version 16 of Node installed, rather than the newer version 18, it would appear that the Tutorial was probably crafted back when version 16 was the latest version and no one empowered to update the Tutorial has tried it with version 18 and therefore there's no update covering that.

Answer 4

Just tried updating to node 18.16.0 LTS and VS 2022 17.5.4 hangs as described above:

Selected two projects as startup: an esproj project with an Angular 15 app and a csproj project with a .NET Core 7 API app
Get the "Deploy Started" message in the Output/Build window
A cmd window is spawned and npm start is successfully launched and the Angular app begins listening on the expected port
The csproj project never starts Tried the following things which did not work:
Checked to be sure node --version reported the correct version both from CMD window and from Open Terminal window in VS
Checked to be sure npm --version reported the correct version in same Terminal window. It reported 8.x, so I ran npm install -g npm which installed 9.x
In VS/Tools/Options/Projects and Solutions/Web Package Management/External Web Tools added the path to node (C:\Program Files\nodejs) to the top of the list. Uninstalled node 18.16.0, then installed node 16.16.0 from https://nodejs.org/en/blog/release/v16.16.0.
Now, it works. (sigh)

Share via

Can't start frontend and backend projects at the same time

3 additional answers

Your answer