Hey @donnietheg – I can imagine how this pickle came to be – let’s see if we can get you taken care of!
For starters, I think that you will always have two “sites” when working on things.
Depending on what the “Router Mode” is set to in Local, the Local site will always be either the Site Domain ( example.local ) or the actual port that Local creates the site on (ei, localhost:10005).
This is what you want so that you can verify the “server” part is working. To be more specific, being able to access this will ensure that the Local part of things is working.
The second port – localhost:3000 is likely npm spinning up a BrowserSync (or similar tool) process to proxy the site. Think of this as something that sits between your browser, and the Local site. The reason that this is good to have in a dev environment is that this process can watch for file changes, and often times will sync various JS events across connected devices (scroll, click, etc).
So how to get things working?
When I’ve tinkered with this sort of thing, it usually boils down to one of a couple of things:
-
The Proxy (
localhost:3000) isn’t able to “see” the upstream site (localhost:10005). That could be something like it’s using the wrong url, or the wrong port, or any other sort of thing in that family of issues. -
HTTPS. If the proxy is over HTTP, but the source site is running HTTPS, that could cause issues with the initial connection. In general, if I don’t need HTTPS, I’ll get rid of it Locally, to reduce complexity, especially when working on something like styling changes.
I know that this isn’t the exact same issue you are mentioning, but you might work through some of the questions I asked in this topic to help zero in on what config options need to be adjusted:
Finally, there might be more info within the package.json file since that’s ultimately what VS Code will be looking at when running npm run watch. Pay close attention to what’s in the scripts property, and see if it’s linking to config files that you might need to update to use Local’s url.
Let us know what you find out or if you have other questions!