HOWTO use HostAdmin Firefox addon for website development?

This mini-HOWTO will guide you though how to utilize HostAdmin (https://addons.mozilla.org/en-US/firefox/addon/hostadmin/) Firefox add-on to simplify your website development procedure. It is especially useful when you hope to keep your development progress synchronize with final deployment result, as much as possible. Here we will demonstrate the operation with Win7 + FF5 + HostAdmin 1.2.3.

What is the traditional website development procedure?

Let's say we are a website development company with domain name example_supplier.com, where working with our client with domain name example_customer.com.

Usually before final development progress deployment to client's production server, we will never change client's DNS record to our development server IP for testing. In order to development and testing the progress with client, we will need to create a fake domain name, e.g. example_customer.com.dev.example_supplier.com. Therefore both client and developers can access this development site though public WAN connection.

But what's the problem? The most important point is: during development as the fake domain name (i.e. example_customer.com.dev.example_supplier.com) is totally different from the final production domain name (i.e. example_customer.com), in case some page contents are hardcoded with "Full DNS style" (e.g. http://example_customer.com.dev.example_supplier.com/page_a) but not "Relative style" (e.g. /page_a), once we migrate to production server the link will be broken. This will not only affect hyperlink but also image, video, audio, CSS or JS linkage.

So why changing local hosts file for development?

By editing your PC's local hosts file we can "skip" the DNS lookup procedure from public WAN but go to our target development server directly. The benefit includes:

• Development site will keep domain name as like as production server, therefore above problem can be simply solved.
• You may even have multiple development server for both development, staging, UAT, migration and even more (but you will need to update your hosts record manually).
• Search engine will not able to index your development progress (since they can't lookup and locate it though public DNS services)
• Similar as above point, you may not need to protect your development site with password, too ;-)

The "changing local hosts file" idea looks great but any drawback?

Well, the drawbacks include:

• You will need to manually edit and update your DNS mapping in the hosts file, including comment/uncomment, documentation, management, and so on :S
• Once you need to switch between different development IP, the PC's DNS cache need to be flush after few minutes so you need to wait...
• You will also need to teach your client about all above logic and idea, including the skill to update their DNS mapping (!?)

How HostAdmin add-on can help in this case?

The most complicated and duplicated task for operate with local hosts file mapping is the "management and update". With HostAdmin you can switch between public DNS and local mappings in few clicks! It will also flush and update the PC's DNS cache immediately so you don't need to wait ;-)

HOWTO install HostAdmin?

First of all you will need to download and install Firefox5 (http://www.mozilla.com/en-US/firefox/all.html).

Next, install HostAdmin add-on (https://addons.mozilla.org/en-US/firefox/addon/hostadmin/).

You will also need to grant the write permission to your hosts file (http://code.google.com/p/fire-hostadmin/wiki/GAIN_HOSTS_WRITE_PERM).

In case of Win7:

• Press "Win + R" and open the "Run" dialog.
• Type "cacls %windir%/system32/drivers/etc/hosts /E /G Users:W" in command prompt (Assume you are using an user account with administration role).

BE CAREFUL!! Some virus may change your hosts file for some illegal actions. Allow everyone to have "write" permission should be very very very careful!

Finally, assume our development server with IPs 192.168.0.100, 192.168.0.101 and 192.168.0.102, we should update the hosts file as below:

• Press "Win + R" and open the "Run" dialog.
• Type "notepad %windir%/system32/drivers/etc/hosts" to open the hosts file with notepad.
• Add the following 3 lines to the file and save it:
  • #192.168.0.100        example_customer.com    #DEV
    #192.168.0.101        example_customer.com    #STG
    #192.168.0.102        example_customer.com    #UAT

Now back to your Firefox, press "ALT" in order to show the menu bar, click on "View -> Toolbars" and confirm the "Add-on Bar" is activated as below:

(Alternative) You may also enable the "Add-on Bar" by mouse right-click on blank area of your address bar as below:

And finally, you can find the "In Hosts" text button at the bottom right corner of "Add-on Bar". Simply click on it in order to switch between different DNS-to-IP mapping (P.S. in order to switch back as public DNS lookup, simply "unclick" any record for this domain):

Ok that's it ;-)

Special footnote

• Don't forget ShowIP Firefox addon (https://addons.mozilla.org/en-US/firefox/addon/showip/) so you can always get the reference IP information for whatever from public DNS or local host file.
• You may also combine the use of HostAdmin with your VPN setup so for sure that only privileged users will able to access your development server with LAN IP address.
• So what if we still hope to allow our client to access the read-only development progress with WAN? In this case I will combine the use of Varnish (https://www.varnish-cache.org/) with LAN IP address, so map client's domain name request to corresponding backend LAN IP development server. Well, this would belongs to another story so not detail in here ;-)

Bonus

Ok I know that you would like to be more lazy, don't even hope to / able to install Firefox on your OS, so here are the portable version with addon required:

• firefoxportable-win32-20120315.zip
• firefoxportable-osx-20120315.zip