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. Open an Explorer window.
2. Navigate to:
   C:\Windows\System32\drivers\etc
3. Right click on “hosts” and choose properties.
4. Click the “Security” tab at the top.
5. We’re going to change the permissions so under: “To change permissions, click Edit…” click that Edit… button.
6. If your user account is missing from the list on the top box, click the Add… button. If it’s already listed, skip this step.
   Enter your login id and click “Check Names”
   Once you’ve found it, click OK.
7. Click to highlight your account in the list.
8. Under row Full Control and the Allow column, checkmark that checkbox.
9. Click OK.
10. Click OK.
11. Right click “hosts” again and this time choose Open With
12. Choose Notepad or Wordpad or Notepad++ (if you have it installed) from the list.
    You might need to click the “More Apps” button.
13. This file uses the format below:
    IP_ADDRESS domain.com
    IP_ADDRESS www.domain.com
14. Use the arrow keys or click the mouse to get at the end of the file, then press ENTER to add a new blank line. If there’s already a blank line available, just use that one.
15. Add these new entries where your cursor is sitting. Replace the sample IP for your development IP address and use your website name (not Tech Lab’s), the 2 new lines you typed need to look similar to this:
    123.45.67.89 techlabhq.com
    123.45.67.89 www.techlabhq.com
16. File > Save
17. Exit
18. Before you close the explorer window, right click on “hosts” and choose properties again.
19. Click the “Security” tab at the top.
20. We’re going to revert the permissions back, so under: “To change permissions, click Edit…” click the Edit… button again.
21. Highlight your user account in the top area and click the Remove button.
22. OK
23. OK
24. Close the explorer window
25. Open a command prompt as an administrator.
    You can use the Search box at the bottom of Windows 10 or 11, search for cmd – that’s what you type in the search box.
26. At the top of the search results list, the actual command prompt should be listed.
    Right click it and choose “Run As Administrator”
27. Click Yes to open it.
28. In the box that opens, type the following where the white underscore _ is blinking:
    ipconfig /flushdns and press ENTER
29. 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) then revisit the website.
    The browser will now communicate with the development techlabhq.com instead of going to the normal techlabhq.com, it will use the IP you entered and visit a completely different server for you to develop your new website while the rest of the world can still get to your existing website.
30. REMEMBER!!!
    Go to back and remove those entries when you’re done developing your new site.
31. Follow the instructions above from step #1 to step #28, except in step #15 delete the entries and continue all the way through step #28. Once you finish step #28, skip down to step #32.
32. Open your browser to your website again and it will be back to the original.

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?