Developing code locally on your computer has some major benefits over using a web server. For one, it’s usually faster as you don’t have to wait for your file changes to upload to the web.
I’ll be using WampServer, a program that lets you run a local web environment (Apache, PHP & MySQL)
You’ll need to download & install WampServer before continuing with this tutorial.
This tutorial assumes WAMP is installed under C:\wamp. You may change this path to reflect your own installation if it differs.
Step 1: Create the folder which will hold your subdomains
For example. Create the following folder:C:\wamp\www\subdomains
Each folder contained within the subdomains folder will essentially become a subdomain. For example:
example.localhost.com will point to C:\wamp\www\subdomains\example\
Step 2: Make sure httpd-vhosts.conf file is included.
1) Open C:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf (or choose Wampserver > Apache > httpd.conf)
2) Find the lines:
# Virtual hosts # Include conf/extra/httpd-vhosts.conf
3) Change to:
# Virtual hosts Include conf/extra/httpd-vhosts.conf
Step 3: Configuring Apache VirtualHosts
1) Enable the alias_module and vhost_alias_module for apache.
2) Open C:\wamp\bin\apache\Apache2.2.21\conf\extra\httpd-vhosts.conf
3) In the httpd-vhosts.conf file, you’ll most likely see some example data. Replace everything with the following:
NameVirtualHost *:80 <VirtualHost *:80> ServerName localhost.com ServerAlias www.localhost.com DocumentRoot "C:\wamp\www" ErrorLog "logs\errors.log" <directory "C:\wamp\www"> Options Indexes FollowSymLinks AllowOverride all Order Deny,Allow Deny from all Allow from all </directory> </VirtualHost> <VirtualHost *:80> ServerName localhost.com ServerAlias *.localhost.com VirtualDocumentRoot C:\wamp\www\subdomains\%1 ErrorLog "logs\errors.log" <directory "C:\wamp\www\subdomains\%1"> Options Indexes FollowSymLinks AllowOverride all Order Deny,Allow Deny from all Allow from all </directory> </VirtualHost>
So what’s going on with the code above? Each <VirtualHost> tag contains a host definition. The asterisk in
<VirtualHost *:80>
tells apache that any IP address can be used to access this host
definition. If you wanted to restrict it to just your computer, you
could do <VirtualHost 127.0.0.1:80>ServerName
ServerName localhost.comThe domain. I use localhost.com. Just remember that whatever you choose to use will essential replace any real domains (EX: using google.com will not let you access the real google.com later)
ServerAlias
ServerAlias *.localhost.comAn alternate domain alias (usually www.localhost.com)
DocumentRoot
DocumentRoot "C:\wamp\www"The absolute directory to your domain’s root (accessed by going to localhost.com)
ErrorLog Path to your error log. This is optional.
ErrorLog "logs\errors.log"VirtualDocumentRoot
VirtualDocumentRoot C:\wamp\www\subdomains\%1The absolute directory for your subdomain, with a wildcard to define the subdomain’s name. I use a wildcard %1 to get the name of the subdomain. example.localhost.com will point to C:\wamp\www\subdomains\example
<directory ________>
<directory "C:\wamp\www"><directory "C:\wamp\www\subdomains\%1">The directory permission definitions. Defined twice for both localhost.com and it’s virtual subdomains.
4) After making the changes to your httpd-vhosts.conf file, you must restart apache for the changes to take effect. Just click the WAMPSERVER icon in your Notification Area and choose “Restart All Services”.
Step 3: Updating Windows Host File
In order for you to access your localhost.com or example.localhost.com, you must first point these domains to your local IP address. Windows unfortunately does not allow you to use a wildcard in the hosts file. You will have to input each new subdomain into your hosts file for it to work in your browser.1) Open C:\Windows\System32\drivers\etc\hosts using Notepad
2) Add a the following line to the bottom of your hosts file.
127.0.0.1 example.localhost.com
You have to do this for each domain & subdomain you wish to use. For example:
127.0.0.1 localhost.com 127.0.0.1 www.localhost.com 127.0.0.1 example.localhost.com 127.0.0.1 example2.localhost.com 127.0.0.1 mysubdomain.localhost.com
Test! Check if your subdomains work.
Open your browser and go to your local subdomain: example.localhost.comApache should now be serving files for that subdomain from C:\wamp\www\subdomains\example
Additionally: Custom Domain Definitions
If you ever wanted to create a custom domain definition that pointed to a folder outside of your “subdomains” folder, you can do that! Just open your httpd-vhosts.conf file (See step 2.2), and paste the following directly afterNameVirtualHost *:80 and before the first instance of <VirtualHost *:80>.This custom definition MUST be before your wildcard VirtualHost definition to work.
And how the httpd-vhosts.conf should finally look with this custom definition:<VirtualHost *:80> ServerName mycustomlocaldomain.com ServerAlias www.mycustomlocaldomain.com DocumentRoot "C:\Documents\mycustomlocaldomain.com" ErrorLog "logs\errors.log" <directory "C:\Documents\mycustomlocaldomain.com"> Options Indexes FollowSymLinks AllowOverride all Order Deny,Allow Deny from all Allow from all </directory> </VirtualHost>
NameVirtualHost *:80 <VirtualHost *:80> ServerName mycustomlocaldomain.com ServerAlias www.mycustomlocaldomain.com DocumentRoot "C:\Documents\mycustomlocaldomain.com" ErrorLog "logs\errors.log" <directory "C:\Documents\mycustomlocaldomain.com"> Options Indexes FollowSymLinks AllowOverride all Order Deny,Allow Deny from all Allow from all </directory> </VirtualHost> <VirtualHost *:80> ServerName localhost.com ServerAlias www.localhost.com DocumentRoot "C:\wamp\www" ErrorLog "logs\errors.log" <directory "C:\wamp\www"> Options Indexes FollowSymLinks AllowOverride all Order Deny,Allow Deny from all Allow from all </directory> </VirtualHost> <VirtualHost *:80> ServerName localhost.com ServerAlias *.localhost.com VirtualDocumentRoot C:\wamp\www\subdomains\%1 ErrorLog "logs\errors.log" <directory "C:\wamp\www\subdomains\%1"> Options Indexes FollowSymLinks AllowOverride all Order Deny,Allow Deny from all Allow from all </directory> </VirtualHost>
