Localhost and Mobile Devices
What are your options, and how do you do them?
Web development is fun. Building a layout that is responsive to any device is a great thing. Unfortunately, testing it in your desktop web browser is not always good enough, and you don’t want to “push to prod” without testing it properly on your phone. What can be done? Well, you’ve got a couple choices, depending on what your requirements are:
Say you’re starting a Node.js (or whatever) server, and your app is listening on port 5000. It’s really listening at 0.0.0.0:5000, which means “if the network comes to me on that port, whatever they’re asking for, serve this”.
As long as your mobile device is on the same wifi network, you can run
from your Mac which returns a bunch of information. Look for your IPv4 address in there. It’s probably 10.x.x.x or 192.x.x.x. Then in your mobile browser, you’re just going to hit your IP address + your port number:
Well, what if you can’t just have any old domain name. e.g. What if you have are using oAuth2, for authentication, and you have to manually configure your callbacks. Then there’s going to be the problem that you have to set up your OAuth callbacks every time your IP changes, and no one wants to do that:
http://localhost:5000/auth/callback http://192.168.0.5:5000/auth/callback http://192.168.0.7:5000/auth/callback http://192.168.0.15:5000/auth/callback
What you can do instead is grab yourself an HTTP proxy and use that to handle this for you. I personally have a Charles license, so I’ll show you that. I’m using Charles v3.9.2:
From Charles -> Proxy -> Proxy Settings
Here are the defaults. We’ll stick with that.
Now we will use the IP address for our computer as a proxy for our mobile device:
$ ifconfig # It doesn't really look like this, but find it 192.168.0.5
Here’s what the setting looks like on an iPhone:
Now we need to define a domain name we’d like to use for our local development that we will be happy using for our secondary oauth callback. Don’t forget your port number:
Now we just have to set that up in our system. I’ll use
nano because it’s easy:
$ sudo nano /etc/hosts Password:
Now you’ll see something like this:
## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost
and we’re going to add a line to the end:
Save and exit.
Now we’ll use that url from our mobile device:
and Voila! You know have a set domain for use in your mobile device.
(hopefully it was easy enough to justify the “voila”)
blog comments powered by Disqus