# Correct way to access local site on local network with my phone? **URL:** https://discourse.roots.io/t/correct-way-to-access-local-site-on-local-network-with-my-phone/12663 **Category:** sage **Tags:** sage9 **Created:** 2018-06-12T01:43:39Z **Posts:** 7 ## Post 1 by @i1100a — 2018-06-12T01:43:39Z 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 --- ## Post 2 by @knowler — 2018-06-12T05:38:11Z Unfortunately, the [Webpack HMR](https://webpack.js.org/concepts/hot-module-replacement/) (i.e. the process that injects the updated stylesheets + scripts) only runs for the [`proxyUrl`](https://github.com/roots/sage/blob/093b5a65004712ae277078ec14336df67e74e9a1/resources/assets/config.json#L13), 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: > [@BrowserSync does not inject styles on external url](https://discourse.roots.io/t/browsersync-does-not-inject-styles-on-external-url/12058/3): > > In Sage 9, Browsersync isn’t injecting the styles or scripts, Webpack’s [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR) is handling that. Can you provide us with any output from the browser console? Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/app/themes/sage/dist/1d92b23a1590dc7df7ee.hot-update.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Error: Manifest request to http://localhost:3000/app/themes/sage/dist/1d92b23a1590… --- ## Post 3 by @i1100a — 2018-06-12T16:50:22Z 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! --- ## Post 4 by @mmirus — 2018-06-12T17:34:49Z @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? --- ## Post 5 by @i1100a — 2018-06-14T16:00:35Z 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. --- ## Post 6 by @knowler — 2018-06-14T16:29:56Z > [@i1100a](#): > > 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? Correct, to reiterate: > [@knowler](#): > > Unfortunately, the [Webpack HMR](https://webpack.js.org/concepts/hot-module-replacement/) (i.e. the process that injects the updated stylesheets + scripts) only runs for the [`proxyUrl`](https://github.com/roots/sage/blob/093b5a65004712ae277078ec14336df67e74e9a1/resources/assets/config.json#L13), which by default is `localhost:3000` — or `localhost:4000` in your case. This is only accessible on your host machine. 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: > [@The dir '/dist/styles' disappears after 'yarn start', but is present after 'yarn build'. Why?](https://discourse.roots.io/t/the-dir-dist-styles-disappears-after-yarn-start-but-is-present-after-yarn-build-why/12479/2): > > I gotta dash, but since I put time into this, here is my half-baked answer: So your issue is only happening during development (yarn start). Sage uses Webpack for it’s development build/watch process. A feature of Webpack is called [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/), which “exchanges, adds, or removes modules while an application is running, without a full reload.” Your styles are considered to be a module. So when it detects a change, it will get the new styles. However, it doesn’t compile a new styleshee… --- ## Post 7 by @knowler — 2018-06-14T16:43:53Z To be honest, for now I think this is the only working solution for this issue: > [@knowler](#): > > 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` ). 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.