Why Would I Want to do This?
Let's say inside /htdocs/ you have directories that contain files for three separate websites that you've created. The directory structure may look like this:
- htdocs/
- website1/
- website2/
- website3/
- Code: Select all
<link rel="stylesheet" href="/css/main.css" type="text/css" />
You can see that the href= is pointing to /css/main.css with the leading slash in front of the path. This will cause your browser to look in the root directory of the server for the file. However, the current root directory for your server is actually /htdocs/ which means that the browser will look for the included CSS file in the /htdocs/ when it is actually meant to search for it in the /website1/ directory. As far as your server knows, the root directory is /htdocs/ but you coded the website so that the root directory should be /website1/ instead.
This is certainly an issue, and can be widespread among your files wherever file paths are specified (in CSS files, HTML files, etc.). Luckily, Apache allows us to add virtual hosts to avoid this problem.
How do I Add a New Virtual Host Then?
It's quite simple, and only requires a few file edits.
First, open the file xampp\apache\conf\extra\httpd-vhosts.conf and find this line:
- Code: Select all
# NameVirtualHost *:80
Uncomment it, replacing it with this:
- Code: Select all
NameVirtualHost *:80
Next, add the following code at the end of the file on a new line:
- Code: Select all
<VirtualHost *:80>
ServerName localhost
DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">
IndexOptions +FancyIndexing NameWidth=*
Options Includes FollowSymLinks Indexes
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
Replace the C:/xampp/htdocs path with whatever the full path to your /htdocs/ folder is. In this case, it is C:/xampp/htdocs and it may be the same for you - just be sure to change it properly. This code will ensure that the current 'localhost' host is not overwritten when we add in our next virtual host.
Next, add this code after the previous code in the same file:
- Code: Select all
<VirtualHost *:80>
ServerName website1
DocumentRoot "C:/xampp/htdocs/website1"
<Directory "C:/xampp/htdocs/website1">
IndexOptions +FancyIndexing NameWidth=*
Options Includes FollowSymLinks Indexes
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
This sets up the virtual host for website1. The path C:/xampp/htdocs/website1 again is only hypothetical here, so be sure to change it to your proper path to the sub website. However, it is likely that the /website1/ directory would be a subdirectory of the /htdocs/ directory. Add this code multiple times for as many virtual hosts as you'd like to create.
Save and close the file.
Next, you will need to update the Windows Hosts file to reflect these changes, and make things work properly. Open the file C:\Windows\System32\drivers\etc\hosts and keep in mind the path may be slightly different for you. In this hosts file, find these lines:
- Code: Select all
# 127.0.0.1 localhost
# ::1 localhost
Uncomment them both, giving you this:
- Code: Select all
127.0.0.1 localhost
::1 localhost
Now, for each virtual host you wish to add, add this line after the previously described lines that we just uncommented:
- Code: Select all
127.0.0.1 website1
If you're adding multiple hosts, you only need to change the website1 part to the name of the host that you specified when you added the code to the httpd-vhosts.conf file. The name that will go in place of "website1" in the code above will be the value you specified for ServerName in the httpd-vhosts.conf file.
Now, save the hosts file. Restart Apache from the XAMPP control panel. You will now notice that going to http://website1/ will take you to the files in the /website1/ directory, and all of the file paths will work correctly (of course, change "website1" to whatever you named the ServerName in the .conf file). Also, notice that going to http://localhost/ shows the proper files for the 'localhost' host, and the other virtual hosts have not overwritten localhost.
That about sums it up for this tutorial. If you have any questions, please feel free to reply right to this topic.
Special Thanks
Thank you to the users in the following forum topic who helped to sort out a similar problem for another user; information attained from the following topic certainly helped me write this tutorial: http://forums.whirlpool.net.au/forum-re ... 69991.html.
