Skip to main content

A Dev Workflow Story

PK_ToDo: Turn this "script" into a YT Video, see tag in Evernote

When developing I like to view the site on my actual physical phone, there is of course the dev tools view mode, but that just doesn't quite have the same effect IMO.

Dev Tools Mobile Simulated View

So to do this I just get the ip of the dev machine with the port So on the dev machine I have http://localhost:8100

and then on my phone I use (for example) http://192.168.0.5:8100

Now I'll show the setup from Linux...

PK_ToDo:Linux

but let's say I'm on a public network, like in a hotel or at a cafe, so I go ahead and try this... and I can't connect. What's going on?

Network Policies: Some public networks may have client isolation enabled, which prevents devices on the same network from communicating with each other. This is a security measure to protect users on public networks. If client isolation is active, you might not be able to connect directly via IP.

...this is a rabbit hole... It's fine if you want to dig around in the network, but for our purposes you may as well just use a tunneling service to get a public link for your dev environment

Use a Tunneling Service​

Tunneling services like ngrok, LocalTunnel, or Serveo can expose your local development server to the internet securely without the need for manual router configuration:

  • Ngrok: A popular choice that offers a secure tunnel to your localhost. You run it on your dev machine, and it assigns a public URL that you can access from anywhere.
  • Setup: Installing and running a tunneling service is usually straightforward. For ngrok, after installation, you simply start it with ngrok http 8100, and it will give you a public URL.
  • Security: These services provide a secure tunnel and temporary URLs, adding a layer of security since you don't expose your development server directly to the public internet.

https://dashboard.ngrok.com/get-started/setup/windows

VPN​

Setting up a VPN (Virtual Private Network) can also make your local development server accessible over the internet. This approach requires more setup and infrastructure knowledge but can be a secure way to access your network remotely:

  • Configuration: You'd configure a VPN server on your network. When you connect to this VPN from your phone or any external device, it's as if you're on the local network.
  • Security: A VPN can provide a secure connection to your local network, protecting your data with encryption

This is essentially the same setup as with a private network, it just takes a bit more setup.

PK_ToDo: VPN Setup