A few day's ago I published a tutorial on how to install both WordPress and XAMPP on your Windows PC. That article is here.
Anyway, if you’re familiar with working with XAMPP you know that the URLs to your various web projects look something like this … http://localhost/yoursite
Did you know that you can set up custom domains on your PC so that those URLs will look something like this … http://yoursite.dev
The process is very easy and includes modifying just 2 files: the Windows Hosts file and an Apache configuration file.
Windows Hosts File
The Windows Hosts file is simply a plain text file that maps hostnames to IP addresses. In Windows 8.1 it is located at
C:\Windows\System32\Drivers\etc By modifying this file we can tell our PC not to go out on to the internet to look for a particular domain but to look for it on the computer itself.
Here is what an untouched Windows Hosts file looks like …
# Copyright (c) 1993-2006 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windows. # # This file contains the mappings of IP addresses to host names. Each # entry should be kept on an individual line. The IP address should # be placed in the first column followed by the corresponding host name. # The IP address and the host name should be separated by at least one # space. # # Additionally, comments (such as these) may be inserted on individual # lines or following the machine name denoted by a '#' symbol. # # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host # localhost name resolution is handle within DNS itself. # 127.0.0.1 localhost # ::1 localhost
What we are going to do is add an entry to this file so that we can map our custom domain to the IP address 127.0.0.1 which is each computer’s loopback address. This is a special IP address reserved for use on each PC.
Important note: please make a backup of your Hosts file first.
Windows 8.1 and Windows 7 includes something called User Account Control (UAC) which prevents certain changes to your PC if the source of that change lacks administrator-level permission. In other words, in order to modify the Hosts file you’ll need to grant yourself administrator-level permission.
But we’re not going to mess around with the UAC settings – just leave them be. We’ll grant ourselves temporary permission.
To modify the Hosts file we’ll use Notepad. Right-click on Notepad and from the pop up menu select Run as administrator. It is now running with the necessary administrator-level permission.
Click on File > Open. Navigate to
C:\Windows\System32\Drivers\etc and select the hosts file. Make sure the All Files option is active otherwise the hosts file may be hidden. See the screen shot below.
At the bottom of that file add the following …
127.0.0.1 yoursite.dev
Save and close the file. We’re now done with it.
Your hosts file now should look something like this …
# Copyright (c) 1993-2006 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
# localhost name resolution is handle within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 yoursite.dev
This of course assumes you have a folder named yoursite.dev within XAMPP’s htdocs folder.
Now when you point your browser to http://yoursite.dev your PC will look for that site on your computer and not the internet because we have mapped it to 127.0.0.1. Cool, yes?
Add as many entries as needed. Here is an example of a few of mine …
127.0.0.1 wpcanada.dev 127.0.0.1 wpcanada2.dev 127.0.0.1 wpcanada3.dev 127.0.0.1 wordpress.dev 127.0.0.1 wordpress2.dev 127.0.0.1 wordpress3.dev
Okay, now that we’ve instructed our PC to look for these sites internally we have to tell the Apache webserver included with XAMPP how to handle these requests. We do so by utilizing Apache’s virtual hosts feature.
Virtual Hosts
By using the Apache’s virtual hosts feature we can create as many local sites as we want and have them served with our custom domains.
Navigate to
C:\xampp\apache\conf\extra and look for the file named httpd-vhosts.conf Open httpd-vhosts.conf in a plain text editor such as Notepad or Notepad++ etc and at the end of the file add the following …<VirtualHost *> DocumentRoot "C:\xampp\htdocs" ServerName localhost </VirtualHost>
The above is important so that we don’t lose access to the htdocs folder. Now we’re ready to start adding our virtual hosts.
Again, assuming our dev site is located at http://yoursite.dev add the following to the
httpd-vhosts.conffile. (it will go directly beneath the bit I posted above)<VirtualHost *> DocumentRoot "C:\xampp\htdocs\yoursite.dev" ServerName yoursite.dev <Directory "C:\xampp\htdocs\yoursite.dev"> Order allow,deny Allow from all </Directory> </VirtualHost>
The end of that file should now look like this …
<VirtualHost *> DocumentRoot "C:\xampp\htdocs" ServerName localhost </VirtualHost> <VirtualHost *> DocumentRoot "C:\xampp\htdocs\yoursite.dev" ServerName yoursite.dev <Directory "C:\xampp\htdocs\yoursite.dev"> Order allow,deny Allow from all </Directory> </VirtualHost>
Any additional sites you want to include would be added underneath. Let’s say you have 3 local sites you want to create virtual hosts for. This is what the end of the file would look like …
<VirtualHost *> DocumentRoot "C:\xampp\htdocs" ServerName localhost </VirtualHost> <VirtualHost *> DocumentRoot "C:\xampp\htdocs\yoursite.dev" ServerName yoursite.dev <Directory "C:\xampp\htdocs\yoursite.dev"> Order allow,deny Allow from all </Directory> </VirtualHost> <VirtualHost *> DocumentRoot "C:\xampp\htdocs\yoursite2.dev" ServerName yoursite2.dev <Directory "C:\xampp\htdocs\yoursite2.dev"> Order allow,deny Allow from all </Directory> </VirtualHost> <VirtualHost *> DocumentRoot "C:\xampp\htdocs\yoursite3.dev" ServerName yoursite3.dev <Directory "C:\xampp\htdocs\yoursite3.dev"> Order allow,deny Allow from all </Directory> </VirtualHost>
You get the idea. Just keep adding them by following the above format.
When you’re done save the
httpd-vhosts.conf file and close it. If Apache is running you will need to stop and restart it for the changes to take effect.
Now fire up XAMPP and visit your local dev site with its shiny new custom URL.
No comments: