A guide to accessing local websites from other computers and mobile devices
Disclaimer: This guide is intended for web designers running a local web server on a Mac, but the general concept should be very similar on other systems.
Based on web designer’s typical needs:
- we don’t feel comfortable inside the command line interface.
- we design and develop websites or web apps on our local machine or on a local server with mysite.dev domain or any other local domain format.
- we need to access the local websites from other devices connected to the local network, in the same way as we access them from the local machine.
Assuming that you already configured multiple websites with unique local domains on your development machine (if not, check out MAMP Pro), the next step is setting-up the access to all those domains from other computers and various testing devices, such as smartphones, tablets or game consoles.
Here’s a quick summary of what we need in order to setup the environment:
- A computer running a web server with a website or multiple websites.
- Permanent local IP for the computer running the local web server, for instance 192.168.1.100.
- Squidman.app installed on that computer.
- A proxy.pac file copied to each machine (or placed in a shared folder).
- A mobile device or another computer to test the setup.
- Happy thoughts!
Permanent local IP for the computer that runs the web server
If you are in a corporate network environment, you can probably ask the network administrator to assign a permanent IP to the computer that runs the local web server. That’s the easier path. For the rest of us, we must configure the ID on our own.
Home office and small office routers can be usually administered via web browser by accessing the http://192.168.0.1 or a similar web address or with a specialised software. For the exact router IP address and username / password check the user manual that came with the router.
After logging in into the router, find an interface that pairs MAC addresses with IP addresses. It’s probably located somewhere under “advanced options” or under “local network”. In case of being lost, re-read the router manual.
A MAC address format is aa:bb:cc:dd:ee:ff and it is unique for each and every machine out there. On a Mac, it is located in “System Preferences” ➞ “Network”. Select your active connection from the list on the left and click the “Advanced” button. The last tab should read either “Ethernet” (Snow Leopard) or “Hardware” (Lion, Mavericks). The MAC address is a string of numbers, letters and colons next to the “Ethernet ID” or the “MAC Address” label respectively. Select and copy the MAC address into your router configuration screen and assign a permanent IP address. Save and reboot the router.
Configuring Squid
Download and install Squidman.app. It might prompt you to download some helper software. In that case, confirm the prompt and finish the installation. Squidman is simply a human friendly interface for the Squid (a proxy server), more or less like MAMP.app is for Apache, PHP and MySQL.
Open Squidman and access the application preferences by clicking on the Apple logo in the menu bar and selecting “Preferences”. In the “General” tab under “HTTP port” enter “8080”. Don’t worry if you are running the web server on some other port, this is not the same port as Apache’s.
Since Squidman is just a user-friendly interface for Squid, you might want to dismiss it after it launches Squid. Check the box next to “Start Squid on launch after” and also next to “then quit”. You probably won’t need it anytime soon. If you do need to use the interface later at some point, say for changing some preferences, hold the alt key while Squidman is launched and it will not quite upon starting Squid. Save changes.
Next, in the “Clients” tab enter a range of allowed devices. This will make sure no party crashers can access the local websites. Save changes.
Finally, in the “Template” tab, locate the following option and comment out the second line with the hash symbol. Save changes.
# protect web apps running on the proxy host from external users
# http_access deny to_localhost
Reboot, launch your web server and Squidman.app. Your local web sites are now open to visitors.
Automatic proxy configuration
Create a new text file and rename it to proxy.pac. Open the file in a text editor and enter the following JavaScript snippet:
function FindProxyForURL(url, host){
if (shExpMatch(host, "*.dev")) {
return "PROXY 192.168.1.100:8080; DIRECT";
}
return "DIRECT";
}
Change the above IP address (192.168.1.100) to whichever you have chosen as your permanent web server machine IP address.
Save the file somewhere accessible from guest computers. If multiple computers should be able to access local websites, the proxy.pac can be stored in a shared folder and accessed directly from that location. This way you can changes the web server IP address in this single file, without the need to update all the computers.
Configuring other computers
Launch “System Preferences” ➞ “Network” ➞ “Advanced” ➞ “Proxies” and check the box next to “Automatic Proxy Configuration”. Leave everything else unchecked. On the right hand side click “Choose File” and locate the proxy.pac file. Click “OK”, then “Apply”. Close System Preferences.
Switch to the browser and enter a local domain, e.g. http://test.dev and the website should appear. If not double-check if it’s running on the web server machine. The proxy.pac file passes through all non .dev domains and redirects .dev domains to the local IP. This makes it convenient to visit development websites without disrupting your normal Internet use.
Should you have any performance issues and still want this kind of functionality, you can uncheck the “Automatic Proxy Configuration” in the (global) System Preferences and enter the web server IP and port for each browser separately, in their respective preferences.
For instance, in Firefox open “Preferences” ➞ “Advanced” ➞ “Network” ➞ “Settings” (“Configure how Firefox connects to the Internet”). Select “Manual Proxy Configuration” and enter your permanent web server IP under “HTTP Proxy”, and 8080 under “Port”. The logic is more or less the same in other browsers, too.
Since I don’t know how to configure Windows OS to use auto-proxy across the system, I set up each browser. If you know how to do this on the OS level, please share!
Configuring iOS devices
Go to “Settings” ➞ “Wi-Fi” ➞ tap the arrow (iOS 5) or the info circle (iOS 7) next to the network you are connected to. Scroll all the way down, and find “HTTP Proxy” options.
By default it’s set to “Off”, so tap “Manual”, and enter your permanent web server IP under “Server” and enter 8080 under “Port”.
You can turn the proxy on and off as needed, because the device will remember the IP and the port. If that’s too much of a hassle, just upload proxy.pac to a publicly accessible web server and enter the URL in the “Auto” tab. This way you will have the same experience as on the computer with “Automatic Proxy Configuration” set-up.
Configuring Android devices
Depending on your Android version and your mobile phone, open “Settings” ➞ “Wireless & Network settings”. Then select the network you are connected to, tap the menu button and tap “Advanced”. The Proxy settings panel should be located there.
On Android tablets (I’ve used Samsung Galaxy Tab for this article), you might need to tap and hold the name of the Wi-Fi network you are connected to in order to bring up a pop-up with an option to “Modify network config”. (Ed’s note: There’s no better way to divert a regular consumer than sporting the word “config” in an application pop-up.) Next, tick “Show advanced options”, change IP settings to “Static” and then enter the web server IP in the DNS field. In case you can’t see the field, that’s because in some Android modal boxes there’s no obvious cue that you need to scroll down to access more options.
On devices with Android 2.2. and older, proxy can’t be set without rooting the device, so either download Opera Mobile and enter the proxy details via http://opera:config ➞ “Proxy”, or simply test websites form the public server.
Improve!
I’m a complete n00b on this, so please suggest better ways to create a setup like this.