Wanting to access/test local sites in development from another computer/device on your local network? Access dev site via different devices like iOS to see how it looks pre-deployment. I noticed an error that doesn’t show on chrome but does show on safari.
Most of the testing needs to be done with iOS/Safari since this I don’t have access. There has to be an safari emulator right?
Replace you device labs and virtual machines with Browserstack.com that costs $25-$39 a month. This site looks like the authority on cross-browser testing.
I have an old ipad running ios version 9.3.5 and cannot be upgraded.
For a basic vanilla JS site this is pretty easy. In “Git a Web Developer Job” course see the video titled WebPack dev server at the 12:30 mark. Add this ability to see dev site from any device on home network by visiting 127.0.0.01 – to do this in the devServer object in your webpack.conif.js file add a host: ‘0.0.0.0’, be sure to add quotes around zeroes, and this will allow you to go to your-local-ip-address:3000 to see the site. Find the local ip address of the windows computer you are building/working on by typing ip config into cmd line and looking for ipv4 address. Mine is 192.168.1.164 so I type this in and add :3000 to access on the testing device. This works with vanilla js/webpack setup but not for flywheel and I’m sure not with next.js
Can also checkout this site to find you ip address.
With next.js this is handled out of the box with npm run dev. With that script running go to you-ip:3000 in the testing device on your local network and you will see it. For an example of the reason this is necessary, I took a look at bv.com on the ipad and the dark theme didn’t load bg color so looked terrible. Also confirmed scroll behavior of smooth doesn’t work. Also the “gotop” button doesn’t work as intended and I think this is because iOS waits until scrolling stops completely to run function.
According to this article, you need a virtual box with local by flywheel? On the official localwp.com site here it says temporary ngrok domain is your best option. Nothing is ever easy. Spending more time on their website directly I found out about live links and am wondering if this is a solution and how much it costs (Pro is $20 a month). Live links free works, but is not the best solution because you have don’t have HMR. It essentially uses ngrok to give you a fake link.
Live Links Pro: Quickly review site responsiveness across devices with our secure, persistent URLs. With longer timeouts and connection limits, your clients and coworkers can review work on their own time!
Free version of live link? To use the Live Link functionality simply:
e31f5650.ngrok.io