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:

Comments

admin's picture

Woooh this is a great addon and also explanation!! thank you

Regards from Spain

admin's picture

Hi friend I want to design my personal website,please anyone can help me or suggest some resources.

admin's picture

hi
i am author of hostadmin
would you mind if i put this article's link on hostamdmin site (googlecode)

hswong3i's picture

Yes please it is my pleasure ;-)
ARAGORN's picture

Hello,
I do not understand English and I'm having trouble knowing what to do to change my hosts
Who could not show me what I should not do.
I'm on linux xubuntu
thank you for your help
to soon

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • HTML tags will be transformed to conform to HTML standards.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.