How to Manage Multiple Web Projects With Subdomains — November 22, 2008 (5 Comments)
Most web projects are initially done locally. When doing multiple web projects on the local computer (the ‘localhost’) you run in to the problem of managing them. This is because only one web server can run at a time on the standard web port. Well… you can run multiple instances of the same web server on different ports. But that’s not the way forward if you are serious about testing, etc. An alternative is to make directories and use folder names as part of the URL. This however results ugly URL names like localhost/project_name and framework-based projects render issues on production environments.
The best approach I have come across to manage multiple web projects is to use subdomains. Subdomains are pretty, clean and easy to manage. This how-to article is about my simple and effective method of hosting multiple web projects on localhost using subdomains. We will create two projects ‘foo’ and ‘bar’ with http://foo.localhost/ and http://bar.localhost/ as their URLs to explain the whole process. Please note that the technique described here is based on the Microsoft Windows platform. However, it is possible to do the same on other platforms with minor adjustments.
Prerequisites
- XAMPP or a compatible web server software
More info: What is XAMPP, XAMPP FAQ - Notepad or compatible text editor
Hint: drag-and-drop a file onto a Notepad window to open the file.
Step 1 – create folders
Create the folder structure as shown below.
It doesn’t have to be the C: drive. But for simplicity it is always recommended that you create the Webroot folder in a drive root. Refrain from using path names with spaces like C:\Program Files\Webroot.
A short description on each folder is given below.
Webroot\projects
This folder contains individual project folders. In our case the two sub folders foo and bar reside here.
Webroot\public
This is where you put all the default stuff. For example, you can copy the Apache htdocs folder content here. This folder hosts the main site (http://localhost) content.
Webroot\xampp
Contains XAMPP files – Apache, PHP, MySql, phpMyAdmin, perl and other server related components are stored here.
Step 2 – install XAMPP
Install XAMPP on Webroot\xampp folder. I recommend you use the self-extracting 7-ZIP archive. Run the setup and chose C:\Webroot as the Extract to folder as it will anyway extract the content to a folder by the name xampp.
Run setup_xampp.bat to finish the setup process. You will get a console output similar to the following screenshot.
Press any key to finish the setup. To run the XAMPP Control Panel Application, double click xampp-control.exe. Click the start button in front of both Apache and MySql modules to start the server. Since we haven’t done any modifications yet, XAMPP runs on its default settings. See screenshot below.
Step 3 – configure Apache
Now we need to change the default Apache configuration to match the directory structure. Apache configuration is distributed among several text files. All of these files reside in the xampp\apache\conf folder. We need to edit two files: conf\httpd.conf and conf\extra\httpd-vhosts.conf.
Step 3.1 – edit httpd.conf
Go to xampp\apache\conf and open the httpd.conf file. Locate <Directory “C:/Webroot/xampp/htdocs”> and change it to <Directory “C:/Webroot/public”> . Scroll down a few lines and locate the closing directive </Directory> and add the following at a new line.
<Directory "C:/Webroot/projects"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory>
Step 3.2 – edit httpd-vhosts.conf
Go to xampp\apache\conf\extra and open the httpd-vhosts.conf file. Uncomment NameVirtualHost *:80 by removing all hash signs (#) at the beginning of the line. (By now you would have noticed that any line starting with a hash sign is indeed a comment.)
Add the following text at the end of the file on a new line.
# Default site: http://localhost <VirtualHost *:80> DocumentRoot "C:/Webroot/public" ServerName localhost ServerAlias localhost </VirtualHost> # Foo sub domain: http://foo.localhost <VirtualHost *:80> ServerName foo.localhost DocumentRoot "C:/Webroot/projects/foo" DirectoryIndex index.php index.html index.html index.htm index.shtml </VirtualHost> # Bar sub domain: http://bar.localhost <VirtualHost *:80> ServerName bar.localhost DocumentRoot "C:/Webroot/projects/bar" DirectoryIndex index.php index.html index.html index.htm index.shtml </VirtualHost>
Step 4 – edit the hosts file
The host file is the system file that matches hostnames to IPs. This file resides in the system folder %SystemRoot%\system32\drivers\etc and on most computers this would be C:\WINDOWS\system32\drivers\etc. Open the hosts file (yes, the file doesn’t have an extension) and add the following two lines to the end of the file at a new line.
127.0.0.1 foo.localhost 127.0.0.1 bar.localhost
This tells the system to direct requests for foo.localhost and bar.localhost to the IP address 127.0.0.1.
Step 5 – test the setup
Restart Apache and MySql by stopping and starting them using the XAMPP Control Panel. If you did not run these in step 2, just start both modules to see whether our configuration is in effect. If everything went accordingly, you should get the green Running status on both Apache and MySql.
Point your web browser to http://localhost to see the content served on Webroot\public folder. If you have nothing to start with, I suggest you copy everything in xampp\apache\htdocs folder to this location. You should get the XAMPP default web site with all the bells and whistles.
Put your Foo project files to Webroot\projects\foo folder and Bar project files to Webroot\projects\bar folders respectively. Point your browser to http://foo.localhost and http://bar.localhost to see them in action. Put the following code in an index.php file and save the file in both locations if you have nothing to start with.
<h1>Hello World</h1> <p><?php echo "My location: " . dirname(__FILE__); ?></p>
You should get different location details depending on the URL.
Add more projects (optional)
Follow step 3.2 and step 4 to add more projects to your setup. Given below are the skeletons that can be used for this task.
Step 3.2 – httpd-vhosts.conf file entry
# vhost entry for new_project sub domain: http://new_project.localhost <VirtualHost *:80> ServerName new_project.localhost DocumentRoot "C:/Webroot/projects/new_project" DirectoryIndex index.php index.html index.html index.htm index.shtml </VirtualHost>
Step 4 – hosts file entry
127.0.0.1 new_project.localhost
Done
That’s it. It’s easier than you would’ve imagined it to be. Hope this article helps and makes your web development experience a fun.
Hi James,
Thanks for your comments.
The include_once function and others alike look for the php.ini setting include_path when referring to files. On your system (unless you have manually done changes), the ini directive must be:
include_path = ".;C:\users\maki\docs\xampplite\php\pear\"
To fix the include_once() issue, append the folder paths you want to this line or simply use relative file paths.
More on this can be found at: http://www.php.net/manual/en/ini.core.php#ini.include-path
THANK YOU!!!
Thank u!
It’s nice to see an example here
This is resolve my learning to setup wordpressmu on my own home computer as host.
Wow, very nice. Thanks for this tutorial. It saved me a lot of time. One extra thing I did was create a xampp.localhost that takes me to the c:\webroot\xampp\htdocs and I put an html doc in public that links to the different subdomains.
Again, thanks. This was very helpful.
hey, thanks for this guide! I got the subdomain working by following your directions exactly, however whenever I reference paths to start at the root “\includes\header.php” as opposed to just relative “includes\header.php”, I keep getting php include errors — any suggestions?:
Warning: include_once(\header.php) [function.include-once]: failed to open stream: No such file or directory in C:\users\maki\docs\xampplite\htdocs\mysite\index.php on line 2
Warning: include_once() [function.include]: Failed opening ‘\header.php’ for inclusion (include_path=’.;C:\users\maki\docs\xampplite\php\pear\’) in C:\users\maki\docs\xampplite\htdocs\mysite\index.php on line 2