As a web developer, we sometimes need to work on a DEVELOPMENT project on a server that’s different from the LIVE server running the current website for the rest of the world. These are the steps to tell your personal computer how to find the development site so you can preview it in your web browser (Chrome, Firefox, Edge, etc) as you work on it.

Why do we do this? Let’s say we’re working with www.techlabhq.com. As an example let’s say www.techlabhq.com is running from IP address: 987.65.43.21 in DNS.

If I start to write code that is using https://devel.techlabhq.com, hosted from the new server IP 123.45.67.89, later when I release it to the public and update the DNS, I’ll have to change a ton of links in the software to make the new site work on the real domain name https://www.techlabhq.com. That’s a pain in the neck!

What the below method does is eliminate the need to develop on a different domain name. My links will all be exactly perfect when I release. I can develop a new version of my website and test it on https://www.techlabhq.com before anyone else sees it. These are the steps to force your computer to look at 123.45.67.89 for https://www.techlabhq.com while the rest of the world still sees https://www.techlabhq.com coming from 987.65.43.21 the original IP address.

1. Launch the Terminal application.
   Finder > Go > Utilities
2. Double Click “Terminal” to launch it.
3. Type the following command in the terminal:
   sudo su then press ENTER
4. Enter your mac password at the prompt and press Enter.
5. Run the following command:
   vim /etc/hosts then press ENTER
6. Press the A key to enter Append mode. You will see a “—Insert—” show up in the bottom left corner.
7. Use the arrow keys to get to the bottom/end of the file and press ENTER to add a new blank line.
   1. Note: the tilde (~) means it’s an empty line (nothing there) you can ignore those. They will disappear as you add new lines.
8. This is the FORMAT of the hosts file (not what you are going to type). It allows us to override DNS, in the following format:
   SERVER_IP_ADDRESS domain.com
   SERVER_IP_ADDRESS www.domain.com
9. Add new entries to the bottom of the file replacing the IP address and domain name with what we provided to you. It will look similar this:
   123.45.67.89 techlabhq.com
   123.45.67.89 www.techlabhq.com
10. When you’re done typing the above two lines, you can press ESC then press :wq ENTER to save your changes.
11. The above command will exit vim and get you back to the terminal prompt.
12. Flush the DNS on your computer by typing this command:
    killall -HUP mDNSResponder
13. Close Terminal (File > Quit)
14. Open a browser and go to your domain.com that you added above, OR close and re-open your browser (if you already had it open).
    The browser will now communicate with the alternate IP address that you added to the hosts file. Instead of going to the normal techlabhq.com, it will use the IP you entered and visit a different server for development.
15. REMEMBER!!!
    Go to back and remove those entries when you’re done developing your new site.
16. Follow the instructions above from step #1 to step #9, except in step #9 delete the entries and continue all the way through step #13 then skip to step #17.
17. Open your browser to your website again and it will be back to the original address.

HINT: If you use 2 different computers for this, you can view the existing website via the computer with the non-modified hosts file, and view the development site with the computer that does have the modified hosts file.

Pretty cool huh?