FoxyProxy for local development

Summary: For people doing web development on a local or portable drive, this page describes a method—using Firefox and the FoxyProxy extension—to develop sites on domains other than localhost. (It also describes a non-portable method—changing the /etc/hosts file—for doing this.)

Step-by-step instructions

(The reasoning behind these instructions is in the next section.)

FoxyProxy setup


Discussion

Suppose you want to develop several websites on a portable drive (or even a locally installed hard drive), each addressable at a separate subdomain. That is, you'd like to develop websites at, say:
  • localhost
  • foo.localhost
  • bar.localhost
(This capability is particularly handy for doing a multisite Drupal installation.)

To start with, you'll need to be running XAMPP (or something similar). (See my page about XAMPP.) With a generic XAMPP installation, you'll be able to develop a site at localhost without doing anything special, but you won't be able to develop foo.localhost or bar.localhost without doing some work.

Specifically, you need to do two things:
  1. Configure Apache (your web server) to know what to do with requests for foo.localhost and bar.localhost; and 
  2. Configure your computer or web browser so that requests for localhostfoo.localhost or bar.localhost get delivered to your local Apache server in the first place.
I discuss step 1 (configuring Apache) elsewhere, in connection with multisite Drupal installation. Here, I focus on step 2, and discuss two methods of ensuring that foo.localhost and bar.localhost are mapped to your local web server.

Method 1: Editing /etc/hosts

Most tutorials about using local subdomains that I have read assume that you can, and are willing to, edit your system's hosts file. (In a standard Windows XP/Vista installation, this file is in C:\Windows\system32\drivers\etc\. In a standard Unix system, the file is in /etc/.)

Whenever a web browser (or other internet-aware application) seeks a domain or subdomain, it tries to find the corresponding IP address in two ways: (1) it looks in the local machine's hosts file; if that fails, then (2) it queries a DNS server. The hosts file is thus a way of associating IP addresses with domain or subdomain names, and it works only for the machine on which the file is located. Every generic hosts file will include at least one line that maps IP address 127.0.0.1 to localhost. (This is why you can browse to localhost with a generic XAMPP installation.)

Associating subdomains with your local webserver is a simple matter of adding lines like these to the hosts file (and, if needed, restarting your machine):

127.0.0.1       foo.localhost
127.0.0.1       bar.localhost

And to create domains and subdomains within a pseudo-top-level domain—that is, one that behaves like .com—called, for instance, .local, you could add lines like these to the hosts file:

127.0.0.1       local
127.0.0.1       foo.local
127.0.0.1       bar.local
127.0.0.1       subdomain.foo.local
127.0.0.1       subdomain.bar.local

But suppose you can't edit the hosts file (because you lack sufficient privileges) or don't want to (because you want to do all of your development from a portable drive). You need another way to direct browser requests to your local machine. That way is FoxyProxy.

Method 2: Using FoxyProxy

FoxyProxy is a Firefox extension whose main purpose is to route requests for URLs through proxy servers. By routing URL requests through proxy servers, users may be able to access otherwise inaccessible content and may be able to hide their browsing activity.

But since FoxyProxy is capable of routing URL requests to any server, not just a proxy server, you can configure FoxyProxy to route domains and subdomains to IP address 127.0.0.1—that is, to your local machine, localhost. Thus, as a Drupal user said, you can use FoxyProxy to do development work on foo.localhost and bar.localhost even if you can't edit your hosts file. (You will not be able to connect to foo.localhost or bar.localhost using any program besides FireFox, however. This is the only real downside to using FoxyProxy rather than editing the hosts file.)

The slideshow embedded above provides step-by-step instructions, with screenshots, for configuring FoxyProxy for developing websites locally. Those instructions, minus the screenshots, are as follows:
  1. Install FoxyProxy from Mozilla plugin site. (You'll have to restart Firefox.)
  2. Configure FoxyProxy: Tools → FoxyProxy → Options
    1. Set Mode to "Use proxies based on their pre-defined patterns and priorities"
    2. Click Add New Proxy button
      1. In General Tab,name and enable proxy
        • Check Enabled
        • Add Proxy Name in text box (this name is arbitrary; make it informative)
        • Add Proxy Notes in text box if desired (these are also arbitrary)
      2. In Proxy Details tab, set proxy to redirect to localhost:
        • Select Manual Proxy Configuration radio button
        • In Host or IP Address box, add localhost
        • In Port box, add 80 (this may not be strictly necessary, and you may be able to use other ports)
      3. In URL Patterns tab, define redirection rules
        • Click Add New Pattern button
        • Add Pattern Name in text box (this is arbitrary; make it informative)
        • Define rule in URL pattern box (this makes the magic happen)
          • To be able to create subdomains of localhost, use:
            • *.localhost/*
        • Leave Whitelist and Wildcards radio buttons selected (the defaults)
      4. Repeat step 3 as desired to define additional redirection rules
        • In URL Patterns tab → click Add New Pattern → add Pattern Name
        • Define rule in URL pattern box
          • To use a pseudo-top-level-domain called .local, use:
            • *.local/*
          • This will allow you to use URLs like www.example.local
        • Again, leave Whitelist and Wildcards radio buttons selected
      5. Click OK button.
  3. Review settings
    • In Proxies tab, two proxies should be enabled:
      • Your new proxy
      • The Default proxy (which simply lets requests through to the internet)
    • Close the FoxyProxy Options window
  4. Check Firefox Settings
    • Back in Firefox, under Tools → FoxyProxy:
      • Menu option "Use proxies based on their pre-defined patterns and priorities" should be selected (shown by a dot in the menu's left margin)
        • (Note: Your new proxy will show up as a menu item; do not select it—unless you want to block Firefox's internet access.)
  5. Enable and test web server: start Apache through the XAMPP control panel
    1. Test .local pseudo-top-level domain: in Firefox, open http://test.local
    2. Test .localhost: in Firefox, open http://test.localhost
      • In both cases, you should get the main XAMPP page (if you have not modified it).

Notes

I had a hard time figuring out what rules to write in FoxyProxy from the FoxyProxy documentation, and the Drupal user who first gave me the idea to use FoxyProxy said nothing about how to configure it. I figured out what to do by inference from the following:

Comments