[Remote] Will remote window of VS Code listen to the Node.js program I currently start and override the port it is listening on?

[inlann]

Does this issue occur when all extensions are disabled?: Not sure

• VS Code Version: Version: 1.90.0 (Universal) Commit: 89de5a8d4d6205e5b11647eb6a74844ca23d2573 Date: 2024-06-04T19:34:44.157Z Electron: 29.4.0 ElectronBuildId: 9593362 Chromium: 122.0.6261.156 Node.js: 20.9.0 V8: 12.2.281.27-electron.0 OS: Darwin x64 22.6.0
• OS Version: Darwin x64 22.6.0

When I run yarn start in the terminal on MacOS to start my React application, it defaults to listening on port 3000. At this point, I can normally access the application by visiting localhost:3000 in my browser. However, if I open VS Code and start a remote window, my local localhost:3000 becomes inaccessible, and I get the following error:

I can only restore access by closing the remote window in VS Code. Additionally, the terminal running the yarn start command is not necessarily the default terminal application on macOS; the same issue occurs when using the terminal within VS Code. Another clear scenario is when I have a remote terminal open in VS Code. If I stop the yarn start command using ctrl + c and then restart it, I am notified that port 3000 is already in use. Even if I choose "yes" at this point, repeatedly using ctrl + c and running yarn start does not release the port. Instead, the available port number in the notification keeps increasing.

(PS: I changed the default port to 5000 by running: export PORT=5000 && yarn start

Steps to Reproduce:

1. Open a terminal application and run a React application: yarn start
2. Open a remote window in VS Code
3. Kill the React application with ctrl + c and restart it
4. You will be notified that the default port 3000 is in use

[inlann]

Compiled successfully!

You can now view board-farm-spa in the browser.

  Local:            http://localhost:5000
  On Your Network:  http://192.168.2.21:5000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully
No issues found.
^C
(base) mac@Titans-iMac board-farm-spa % 
(base) mac@Titans-iMac board-farm-spa % 
(base) mac@Titans-iMac board-farm-spa % lsos -i:5000                  
zsh: command not found: lsos
(base) mac@Titans-iMac board-farm-spa % lsof -i:5000
COMMAND    PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Google     538  mac   25u  IPv4 0xad51869483d3d6d5      0t0  TCP localhost:49709->localhost:commplex-main (ESTABLISHED)
Google     538  mac   28u  IPv4 0xad518694860ff095      0t0  TCP localhost:49711->localhost:commplex-main (ESTABLISHED)
Google     538  mac   34u  IPv4 0xad51869483d41995      0t0  TCP localhost:49716->localhost:commplex-main (ESTABLISHED)
Code\x20H 1519  mac   42u  IPv4 0xad5186948611f6d5      0t0  TCP localhost:commplex-main (LISTEN)
Code\x20H 1519  mac   43u  IPv4 0xad51869483d461f5      0t0  TCP localhost:commplex-main->localhost:49709 (ESTABLISHED)
Code\x20H 1519  mac   44u  IPv4 0xad51869483d60e75      0t0  TCP localhost:commplex-main->localhost:49711 (ESTABLISHED)
Code\x20H 1519  mac   45u  IPv4 0xad5186948612a355      0t0  TCP localhost:commplex-main->localhost:49716 (ESTABLISHED)
(base) mac@Titans-iMac board-farm-spa % export PORT=5000 && yarn start
? Something is already running on port 5000. Probably:
  /Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Plugin).app/Contents/MacOS/Code Helper (Plugin) --type=utility --utility-sub-type=node.mojom.NodeService --lang=en-US --service-sandbox-type=none --dns-result-order=ipv4first --inspect-port=0 --user-data-dir=/Users/mac/Library/Application Support/Code --standard-schemes=vscode-webview,vscode-file --enable-sandbox --secure-schemes=vscode-webview,vscode-file --cors-schemes=vscode-webview,vscode-file --fetch-schemes=vscode-webview,vscode-file --service-worker-schemes=vscode-webview --code-cache-schemes=vscode-webview,vscode-file --shared-files --field-trial-handle=1718379636,r,16204158124117285196,13303416832093179665,262144 --enable-features=kWebSQLAccess --disable-features=CalculateNativeWinOcclusion,SpareRendererForSitePerProcess --variations-seed-version (pid 1519)
  in /

Would you like to run the app on another port instead? › (Y/n)

[alexr00]

@inlann it sounds like the VS Code remote window in forwarding a port. Can you open your remote window again, make sure you can reproduce the issue, then from the remote window open the Ports view? Can you share a screenshot of the Ports view?

[inlann]

@alexr00 Hello, Thanks for your reply.

When attempting to open the Ports view in the remote window, it gets stuck in the loading state:

[alexr00]

That "Exposed Ports" view isn't something I'm familiar with. It's probably coming from an extension. The "Ports" view is the one I'm interested in. It's to the left of "Exposed Ports" in your screen shot.

[inlann]

@alexr00 Sry, There is the "Ports" view:

Does VS Code add the port automatically or I did something?

Perhaps I executed export FLASK_APP=wsgi.py && flask run --port=5000 in the terminal of the remote window in VS Code, and then it was recognized by VS Code?

[alexr00]

Perhaps I executed export FLASK_APP=wsgi.py && flask run --port=5000 in the terminal of the remote window in VS Code, and then it was recognized by VS Code?

Yes, that's probably what happened. If you want to use port 5000 for something locally you can un-forward the port by using the "x" action in the Ports view. If you never want automatic port forwarding you can disable it with the setting remote.autoForwardPorts.

[inlann]

@alexr00 Really appreciate!

[inlann]

@alexr00 It seems that whenever I refresh my Chrome window, VS Code automatically adds port forwarding in the remote window. How can I disable this feature?

[alexr00]

The setting remote.autoForwardPorts should be. Are you saying all your settings get deleted when you refresh?

[inlann]

Are you saying all your settings get deleted when you refresh?

No, the setting works fine.

Another question, what does new running processes mean? Does VS Code detecte new processes started in the terminal of the remote window or all new processes of the remove machine? Since my service (a flask server) on the remote machine is started via the Terminal application of MacOS and detected by VS Code.

[alexr00]

For that, check out the setting remote.autoForwardPortsSource. If it's set to process, then it will watch the proc file system for new running processes. Otherwise, it will watch terminal and debug output.

[inlann]

The remote.autoForwardPortsSource is set to output(default).