Browsersync not working on external device

[Bhanu_Kumar_Singh]

I’m using Local by Flywheel for my local setup and have installed sage starter theme using composer. I have setup everything as said in the installation documentation.

The address of my local setup is : https://theme.local/

The following is the content of my config.json file

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/cfi",
  "devUrl": "https://theme.local",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

I have only changed publicPath and devUrl which I believe is set correctly.

But I am still unable to load page on external device.
I visit 192.168.1.103:3000 from my mobile I get ERR_EMPTY_RESPONSE

When I visit 192.168.1.103:3001 I get the following:

I would really love this to work as it would immensely improve the development workflow.

Thanks

[strarsis]

Apparently the flywheel setup routes by HTTP host. Just the IP address alone doesn’t match anything, hence the empty HTTP response.
The easiest way would be configuring your local router to resolve to the localhost IP., so the smartphone also uses it.

[Bhanu_Kumar_Singh]

How can I go about it ? Can you share any link ?

Thanks

[strarsis]

The smartphone and your workstation are probably in the same network that is managed by a router device, right? So you log into your router device and a new DNS A record that points from theme.local to 192.168.1.103. Then it should work when you visit theme.local with your smartphone. Even better if you can set up a static workstation IP so you don’t have to update it all the time.

[Bhanu_Kumar_Singh]

Thanks for the reply.

It just asks for IP ? Nowehere to add A record.

Should I consider switching to laragon instead ?

[strarsis]

Hm, Flywheel offers a “Live Link” feature, can your smartphone access the local site using that Live link?

[Bhanu_Kumar_Singh]

Yes it does.

But sadly using it gets exhausted too soon.

This was triggered just after one click.

[strarsis]

So when your router doesn’t support custom DNS records, set up a local DNS router with passthrough (dnsmasq for example) and let the router use it instead.

[Bhanu_Kumar_Singh]

I tried installing multiple software in my windows system.

1. YogaDNS - The Most Advanced DNS Client for Windows
2. Technitium DNS Server | An Open Source Tool For Privacy & Security

But it all looked too intmidating for me and I couldn’t set it up correctly.

Thats why I switched to laragon local server.

Now I have set up my projetct and it loads on my phone. But with other issues.

1. CSS is not loading
2. JS is not Loading
3. and there is a an error message (node:2116) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

I am trying to get this working because I don’t mind usign laragon and http setup for my development.

My new Config file looks like.

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/[theme folder name]/dist",
  "devUrl": "http://theme.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

[Bhanu_Kumar_Singh]

I fixed this by using bedrock with Laragon.

I followed this article to set up my local environment on laragon.

Then I cloned my old theme repository.
Ran
yarn
yarn build
composer install

I updated the devUrl and then

yarn start