Correct way to access local site on local network with my phone?

I’m able to get my site running on desktop’s localhost:4000 but when trying to access the Browsersync external URL 192.168.0.6:4000 on my phone to work, I’m just getting the markup, not CSS nor JS.

I think the issue is because those assets are coming from localhost path and the phone is not resolving localhost correctly. I’ve tried numerous solutions with no luck so far, is there something I’m missing or could somebody point me to the correct way to achieve this? Thanks

Unfortunately, the Webpack HMR (i.e. the process that injects the updated stylesheets + scripts) only runs for the proxyUrl, which by default is localhost:3000 — or localhost:4000 in your case. This is only accessible on your host machine. It’s not ideal, but if you change the proxyUrl to your machine’s IP (with your chosen port number), it corrects the issue (i.e. 192.168.0.6:4000). (An alternate solution to Browsersync could be the Simulator app which comes with Xcode if you’re on macOS — assuming you want to test on iOS devices. localhost works on it.)

Related:

1 Like

Thanks for replying. I tried your suggestion before my original post and found that while it works, it does in fact create new issues (my server seems to choke and die).

I wanted to know if this could be accomplished right now or if it was me that was doing something wrong. It could be a really useful feature in a responsive world. I’m hoping it can be implemented on the future!

@i1100a - in my experience I can view and test the site from a mobile device via the IP address and it will load the scripts and styles correctly–it just won’t automatically update as I save those files, and loading custom font files doesn’t work.

When you open it up on the IP you don’t get the scripts and styles at all?

I can access the site locally and it does in fact load the html but no assets. I plugged in my phone to my computer and debugged via chrome dev tools. It turns out the path for the assets has a “localhost” on it, not the IP and thus, I presume the phone is unable to resolve them correctly since it tries to resolve it the phone instead of the computer? Hope I’m making sense.

Correct, to reiterate:

When Sage’s development process is running, there is no dist/styles directory. Webpack builds and injects the styles on the fly using HMR. This way the browser doesn’t need to do a full reload, which is escepcially helpful for JS since it retains its state.

I have a little bit more in-depth explanation of how this process works here:

To be honest, for now I think this is the only working solution for this issue:

Accessing localhost:4000 won’t work any more since it’s not the proxyUrl, so you’ll need to use the external URL for development both locally and on your phone.

1 Like