{"id":2569,"date":"2014-05-06T08:26:47","date_gmt":"2014-05-06T07:26:47","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=2569"},"modified":"2014-05-06T08:27:10","modified_gmt":"2014-05-06T07:27:10","slug":"a-guide-to-accessing-local-websites-from-other-computers-and-mobile-devices","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2014\/05\/06\/a-guide-to-accessing-local-websites-from-other-computers-and-mobile-devices\/","title":{"rendered":"A guide to accessing local websites from other computers and mobile devices"},"content":{"rendered":"<p>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.<\/p>\n<p>Based on web designer\u2019s typical needs:<\/p>\n<ol>\n<li>we don\u2019t feel comfortable inside the command line interface.<\/li>\n<li>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.<\/li>\n<li>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.<\/li>\n<\/ol>\n<p><!--more--><\/p>\n<p>Assuming that you already configured multiple websites with unique local domains on your development machine (if not, check out <a href=\"http:\/\/mamp.info\/\">MAMP Pro<\/a>), 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.<\/p>\n<p>Here\u2019s a quick summary of what we need in order to setup the environment:<\/p>\n<ul>\n<li>A computer running a web server with a website or multiple websites.<\/li>\n<li>Permanent local IP for the computer running the local web server, for instance 192.168.1.100.<\/li>\n<li>Squidman.app installed on that computer.<\/li>\n<li>A proxy.pac file copied to each machine (or placed in a shared folder).<\/li>\n<li>A mobile device or another computer to test the setup.<\/li>\n<li>Happy thoughts!<\/li>\n<\/ul>\n<h2>Permanent local IP for the computer that runs the web server<\/h2>\n<p>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\u2019s the easier path. For the rest of us, we must configure the ID on our own.<\/p>\n<p>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.<\/p>\n<p>After logging in into the router, find an interface that pairs MAC addresses with IP addresses. It\u2019s probably located somewhere under \u201cadvanced options\u201d or under \u201clocal network\u201d. In case of being lost, re-read the router manual.<\/p>\n<p>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 \u201cSystem Preferences\u201d \u279e \u201cNetwork\u201d. Select your active connection from the list on the left and click the \u201cAdvanced\u201d button. The last tab should read either \u201cEthernet\u201d (Snow Leopard) or \u201cHardware\u201d (Lion, Mavericks). The MAC address is a string of numbers, letters and colons next to the \u201cEthernet ID\u201d or the \u201cMAC Address\u201d label respectively. Select and copy the MAC address into your router configuration screen and assign a permanent IP address. Save and reboot the router.<\/p>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/mac-address-SL.png\" alt=\"Ethernet ID in Snow Leopard\"><figcaption>Ethernet ID in Snow Leopard<\/figcaption><\/figure>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/mac-address-mavericks-02.png\" alt=\"MAC Address in Mavericks\"><figcaption>MAC Address in Mavericks<\/figcaption><\/figure>\n<h2>Configuring Squid<\/h2>\n<p>Download and install <a href=\"http:\/\/squidman.net\/squidman\/\">Squidman.app<\/a>. 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.<\/p>\n<p>Open Squidman and access the application preferences by clicking on the Apple logo in the menu bar and selecting \u201cPreferences\u201d. In the \u201cGeneral\u201d tab under \u201cHTTP port\u201d enter \u201c8080\u201d. Don\u2019t worry if you are running the web server on some other port, this is not the same port as Apache\u2019s.<\/p>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/squid-config-01.png\" alt=\"Squid\u2019s General preferences\"><figcaption>Squid\u2019s General preferences<\/figcaption><\/figure>\n<p>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 \u201cStart Squid on launch after\u201d and also next to \u201cthen quit\u201d. You probably won\u2019t 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.<\/p>\n<p>Next, in the \u201cClients\u201d tab enter a range of allowed devices. This will make sure no party crashers can access the local websites. Save changes.<\/p>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/squid-config-02.png\" alt=\"Squid\u2019s Clients preferences\"><figcaption>Squid\u2019s Clients preferences<\/figcaption><\/figure>\n<p>Finally, in the \u201cTemplate\u201d tab, locate the following option and comment out the second line with the hash symbol. Save changes.<\/p>\n<pre><code># protect web apps running on the proxy host from external users\r\n# http_access deny to_localhost\r\n<\/code><\/pre>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/squid-config-03.png\" alt=\"Squid\u2019s Template preferences\"><figcaption>Squid\u2019s Template preferences<\/figcaption><\/figure>\n<p>Reboot, launch your web server and Squidman.app. Your local web sites are now open to visitors.<\/p>\n<h2>Automatic proxy configuration<\/h2>\n<p>Create a new text file and rename it to proxy.pac. Open the file in a text editor and enter the following JavaScript snippet:<\/p>\n<pre><code>function FindProxyForURL(url, host){\r\n    if (shExpMatch(host, \"*.dev\")) {\r\n        return \"PROXY 192.168.1.100:8080; DIRECT\";\r\n    }\r\n    return \"DIRECT\";\r\n}\r\n<\/code><\/pre>\n<p>Change the above IP address (192.168.1.100) to whichever you have chosen as your permanent web server machine IP address.<\/p>\n<p>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.<\/p>\n<h2>Configuring other computers<\/h2>\n<p>Launch \u201cSystem Preferences\u201d \u279e \u201cNetwork\u201d \u279e \u201cAdvanced\u201d \u279e \u201cProxies\u201d and check the box next to \u201cAutomatic Proxy Configuration\u201d. Leave everything else unchecked. On the right hand side click \u201cChoose File\u201d and locate the proxy.pac file. Click \u201cOK\u201d, then \u201cApply\u201d. Close System Preferences.<\/p>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/automatic-proxy-configuration.png\" alt=\"Automatic Proxy Configuration\"><figcaption>Automatic Proxy Configuration<\/figcaption><\/figure>\n<p>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\u2019s 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.<\/p>\n<p>Should you have any performance issues and still want this kind of functionality, you can uncheck the \u201cAutomatic Proxy Configuration\u201d in the (global) System Preferences and enter the web server IP and port for each browser separately, in their respective preferences.<\/p>\n<p>For instance, in <a href=\"http:\/\/getfirefox.com\/\">Firefox<\/a> open \u201cPreferences\u201d \u279e \u201cAdvanced\u201d \u279e \u201cNetwork\u201d \u279e \u201cSettings\u201d (\u201cConfigure how Firefox connects to the Internet\u201d). Select \u201cManual Proxy Configuration\u201d and enter your permanent web server IP under \u201cHTTP Proxy\u201d, and 8080 under \u201cPort\u201d. The logic is more or less the same in other browsers, too.<\/p>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/firefox-proxy-02.png\" alt=\"Proxy Configuration in Firefox\"><figcaption>Proxy Configuration in Firefox<\/figcaption><\/figure>\n<p>Since I don\u2019t 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!<\/p>\n<h2>Configuring iOS devices<\/h2>\n<p>Go to \u201cSettings\u201d \u279e \u201cWi-Fi\u201d \u279e 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 \u201cHTTP Proxy\u201d options.<\/p>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/iphone-proxy-01.png\" alt=\"iPhone Wi-Fi settings\" style=\"width: 320px\"><figcaption>iPhone Wi-Fi settings<\/figcaption><\/figure>\n<p>By default it\u2019s set to \u201cOff\u201d, so tap \u201cManual\u201d, and enter your permanent web server IP under \u201cServer\u201d and enter 8080 under \u201cPort\u201d.<\/p>\n<figure>\n<img decoding=\"async\" src=\"\/img\/2014\/local-websites\/iphone-proxy-02.png\" alt=\"iPhone Wi-Fi Manual Proxy\" style=\"width: 320px\"><figcaption>iPhone Wi-Fi Manual Proxy<\/figcaption><\/figure>\n<p>You can turn the proxy on and off as needed, because the device will remember the IP and the port. If that\u2019s too much of a hassle, just upload proxy.pac to a publicly accessible web server and enter the URL in the \u201cAuto\u201d tab. This way you will have the same experience as on the computer with \u201cAutomatic Proxy Configuration\u201d set-up.<\/p>\n<h2>Configuring Android devices<\/h2>\n<p>Depending on your Android version and your mobile phone, open \u201cSettings\u201d \u279e \u201cWireless &amp; Network settings\u201d. Then select the network you are connected to, tap the menu button and tap \u201cAdvanced\u201d. The Proxy settings panel should be located there.<\/p>\n<p>On Android tablets (I\u2019ve used Samsung Galaxy Tab for this article), you might need to <em>tap and hold<\/em> the name of the Wi-Fi network you are connected to in order to bring up a pop-up with an option to \u201cModify network config\u201d. (Ed\u2019s note: There\u2019s no better way to divert a regular consumer than sporting the word \u201cconfig\u201d in an application pop-up.) Next, tick \u201cShow advanced options\u201d, change IP settings to \u201cStatic\u201d and then enter the web server IP in the DNS field. In case you can\u2019t see the field, that\u2019s because in some Android modal boxes there\u2019s no obvious cue that you need to scroll down to access more options.<\/p>\n<p>On devices with Android 2.2. and older, proxy can\u2019t be set without rooting the device, so either download Opera Mobile and enter the proxy details via http:\/\/opera:config \u279e \u201cProxy\u201d, or simply test websites form the public server.<\/p>\n<h2>Improve!<\/h2>\n<p>I\u2019m a complete n00b on this, so please suggest better ways to create a setup like this.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s typical needs: we don\u2019t feel comfortable inside the command line interface. we design and develop websites or web apps on our local machine or [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17],"tags":[],"class_list":["post-2569","post","type-post","status-publish","format-standard","hentry","category-codingdesign","category-tips"],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=2569"}],"version-history":[{"count":7,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2569\/revisions"}],"predecessor-version":[{"id":2576,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2569\/revisions\/2576"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=2569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=2569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=2569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}