NPM Watch and Local are opening local site on two different ports

[donnietheg]

Issue Summary

I develop in Visual Studio Code on Windows 10 to develop my Wordpress sites. I am using the NPM framework by Laravel as part of my workflow. By running the “npm run watch” script, the changes made in my code update automatically in the browser. It’s great.

I also use Local http://localwp.com (previously Local by Flywheel) version 5.7.5+4909 local development environment to install Wordpress and mysql databases and run them locally.

The problem I am having is that when I execute “npm run watch” from the command line in Visual Studio Code, the site opens at http://localhost:3000 and just hangs.

When the site is started and viewed in Localwp, it opens just fine, but at http://localhost:10005/

I need them to open on the same port! Is this possible to get these two in sync?

Troubleshooting Questions

• Does this happen for all sites in Local, or just one in particular? Yes, it happens on all sites.

• Are you able to create a new, plain WordPress site in Local and access it in a Browser? Yes, no problem.

System Details

• Which version of Local is being used? – version 5.7.5+4909

• What Operating System (OS) and OS version is being used? – Windows 10 Professional

• Attach the Local Log. – not relevant

What I have done so far

I tried to change the port in the wp-config.php: from define( ‘DB_HOST’, ‘localhost:3000’ ); to define( ‘DB_HOST’, ‘localhost:3000’ );. But, when I tried to view the site in Localwp the site would not load, the same when I executed “npm run watch”.

According to posts can specify localhost port in Visual Studio Code

Where to specify localhost port in VS Code

I edited launch.json (with is found here C:\Users\User.vscode\extensions\ms-vscode.atom-keybindings-3.0.8.vscode\launch.json)

Add the “env” variable to the file. It looked like this:

{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Launch Extension”,
“type”: “extensionHost”,
“request”: “launch”,
“runtimeExecutable”: “${execPath}”,
“args”: [
“–extensionDevelopmentPath=${workspaceRoot}”
],
“sourceMaps”: true,
“stopOnEntry”: false,
“env”: {
“ASPNETCORE_ENVIRONMENT”: “Development”,
“ASPNETCORE_URLS”: “http://localhost:10005/”
}
}
]
}

But this did absolutely nothing. “Npm run watch” kept on opening on port 3000.

[ben.turner]

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:

1. 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.

2. 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:

Using Sage on Local

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!

[donnietheg]

Hi @ben.turner

Thanks for your prompt reply, the clear explanations and suggestions for possible routes to find a solution.

I updated my Yarn software on my local machine when I saw that mentioned in the posting you included and then on the command line:

• yarn add npm

I was still having the same problem when I ran “npm run watch” it was going to localhost: 3000 and not loading.

Then I thought of installing Browser-sync, as you said that might be involved: on the command line “npm install -g browser-sync” and got this feedback:

• browser-sync@2.26.12
  added 211 packages from 199 contributors in 12.605s

That was all good, but still no resolution. But I did notice at that time that when I ran “npm run watch” that at the top of the output was a line [Browsersync] Proxying: http://tofino.lambda.host. “http://tofino.lambda.host” is the my base theme. I did a search for http://tofino.lambda.host in VSC and found it in a file called /.env at the root of my wordpress theme.

In /.env there was one line: BROWSERSYNC_PROXY_URL=http://tofino.lambda.host, which I changed to BROWSERSYNC_PROXY_URL=http://localhost:10005/

To my joyous surprise, “npm run watch” worked. It is still showing localhost:3000, but this makes sense as you explained so well, the browersyc is creating something between the browser and local site.