Configuring Virtual Hosts in XAMPP on Mac OS X

C

A while back I posted about configuring virtual hosts in MAMP. More recently I noticed that MAMP hadn’t been updated in nearly a year and their support forum resembled a wilderness. Thinking that maybe the writing was on the wall for MAMP I started looking for an alternative and came across XAMPP.

XAMPP provides a similar local server environment to MAMP, but configuring virtual hosts is a little different. Unlike the Pro version of MAMP , XAMPP doesn’t have a nice GUI to allow virtual hosts to be configured easily. So, there is no alternative but to do it manually.

With XAMPP we need to edit 3 files as opposed to only the 2 with MAMP. These are /etc/hosts, /Applications/XAMPP/xamppfiles/etc/httpd.conf and /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf. I’m assuming that you’ve not already added virtual hosts to the /etc/hosts file for a previous MAMP install.

Update: A new version of MAMP (1.8) was released in September 2009.

 

1. What You’ll Need

The /etc/hosts file is hidden and a standard or admin user doesn’t normally have write access to it. To edit this file you can open TextEdit with root privileges from a Terminal window like so.

sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit /etc/hosts

An alternative is to use an editor like Smultron which has an option from the File menu to Open Hidden.. files and will ask for authentication if required. Smultron is free and whilst no longer under development works under 10.5.8.

 

2. Example

In the example I’m going to configure a virtual host for a site that has a root folder of /Users/steve/Sites/MySite1/ and I’ll name the virtual host local.mysite1.

Ensure you stop XAMPP’s Apache server before editing either of the files below.

 

3. Editing the hosts File

Open the /etc/hosts file. You should see something like this:

# /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1         localhost
255.255.255.255   broadcasthost
::1               localhost
fe80::1%lo0       localhost

 

We need to add a line to the end of this file for each virtual host we want to configure. The comment line is optional.

# Virtual Hosts
127.0.0.1 local.mysite1

 

The file should now resemble this.

# /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1         localhost
255.255.255.255   broadcasthost
::1               localhost
fe80::1%lo0       localhost

# Virtual Hosts
127.0.0.1 local.mysite1

Save and close the file.

 

4. Editing XAMPP’s httpd.conf File

Open/Applications/XAMPP/xamppfiles/etc/httpd.conf. On or around line 468 you should see this.

# Virtual hosts
# Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

 

We need to un-comment line 469 like so.

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Save and close the file.

 

5. Editing XAMPP’s httpd-vhosts.conf File

Virtual hosts in XAMPP are configured in the httpd-vhosts.conf file and not the usual httpd.conf file. So, open the file /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf. You should see this.

# 
# Use name-based virtual hosting.
# 
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
# 

 

Ensure that line 19 is un-commented and then add the following code block at the end of the file.

Note that although I only want to configure a virtual host for local.mysite1, beginning on line 28 I’ve added a virtual host for localhost as the default named sever with the ServerName set to localhost and the DocumentRoot and <Directory> set to /Applications/XAMPP/htdocs. If you don’t, when you point your browser to http://localhost all you’ll see is the directory listing of the first virtual host, in this case local.mysite1, and not the XAMPP start page. You do not need to add a corresponding entry in /etc/hosts as this is included by default.

For the local.mysite1 configuration you can see that beginning on line 43 we are setting the ServerName to the name of virtual host we configured in the /etc/hosts file. The DocumentRoot and <Directory> are set to the site’s root folder.

# 
# Use name-based virtual hosting.
# 
NameVirtualHost *:80

# 
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
# 

# localhost [must be included as the default named server]
<VirtualHost *:80>
	ServerName localhost
	DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
	<Directory "/Applications/XAMPP/xamppfiles/htdocs">
		Options Indexes FollowSymLinks Includes execCGI
		AllowOverride None
		Order Allow,Deny
		Allow From All
	</Directory>
</VirtualHost>

# mysite1.com
<VirtualHost *:80>
	ServerName local.mysite1
	DocumentRoot "/Users/steve/Sites/MySite1"
	<Directory "/Users/steve/Sites/MySite1">
		Options Indexes FollowSymLinks Includes execCGI
		AllowOverride None
		Order Allow,Deny
		Allow From All
	</Directory>
</VirtualHost>

Save and close the file.

 

6. Testing the Virtual Host

To ensure the virtual host has been configured correctly, restart XAMPP’s Apache server and point your browser to http://local.mysite1

I would recommend backing-up the /etc/hosts, /Applications/XAMPP/xamppfiles/etc/httpd.conf and /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf files whenever you make changes and store them on a separate drive or USB stick. If you later re-install the OS or XAMPP you’ll lose the changes to the respective files. This way you can easily restore your virtual host configuration.

 

About the author

A native Brit exiled in Japan, Steve spends too much of his time struggling with the Japanese language, dreaming of fish & chips and writing the occasional blog post he hopes others will find helpful.

25 responses

25 Comments

  • i’m just install xampp in my macbook but got problems with mysql database. Status of mysql database was deactivated.
    can anybody please tell me how to activate that???

    • @rose

      Have you started the MySQL server from the Manage Servers tab in XAMPP’s Application Manager? If it won’t start there may already be another instance of the MySQL server running. You can check this in Activity Monitor by setting the filter to mysql.

      Regards, Steve

  • I have OSX Yosemite 10.10 and I have XAMPP 1.8.3-5. I followed all the instructions for creating the virtual hosts and I get the error:

    Access forbidden!

    You don’t have permission to access the requested object. It is either read-protected or not readable by the server.

    If you think this is a server error, please contact the webmaster.

    Error 403

    local.training
    Apache/2.4.10 (Unix) OpenSSL/1.0.1i PHP/5.5.15 mod_perl/2.0.8-dev Perl/v5.16.3

    I have setup my whole directory tree (/Users/jeff/Sites/training/index.php) for 777 and root:admin permissions. Any suggestions why this is not working correctly and why I am getting an Access Forbidden 403 Error?

  • Hi Steve,

    I have followed all of your directions, and read SO many other tutorials as well, and I keep getting an ERROR 404 when I try to open my site at localhost/showandtell.local

    the error includes this
    localhost

    Apache/2.4.10 (Unix) OpenSSL/1.0.1i PHP/5.5.15 mod_perl/2.0.8-dev Perl/v5.16.3

    I’m trying to move a live wordpress site to my xampp localhost and I’m pretty new at this. It’s driving me crazy because I have done everything that people have said and I just can’t get it to work.

    The database is connected but I can’t get the entire site to connect

    Your tutorial has been the best I’ve read so any help would be very appreciated!

    • @Jade

      Is this a WordPress install? If so, this error typically occurs when WordPress is unable to connect to its MySQL database.

      Check that XAMPP’s MySQL server is running and the database WordPress is trying to connect to exists in XAMPP. Also ensure that the MySQL connection details in the wp-config.php file are correct.

      Regards, Steve

  • Steve, thanks for your reply. I’ve pinpointed the problem further. when i type on safari //localhost or or dl.firecore.com (the site i want to appear to run locally) it works taking me to the default xammp page. also, if i write http://localhost/firecore/ it works too, taking me to that site. the thing i need is to be taken to dl.firecore.com/test.html TYPING JUST THAT (not dl.firecore.com/firecore/test.html). Hope i explained myself correctly. Thanks so much again.

    • @Alejandro,

      If dl.firecore.com really is the name of a virtual host running under XAMPP it sounds as though its document root is /Applications/XAMPP/xamppfiles/htdocs. It appears that test.html doesn’t exist in this directory but a subfolder off of this: firecore/. Therefore, dl.firecore.com/test.html won’t work. You’ll need to amend the document root of dl.firecore.com to /Applications/XAMPP/xamppfiles/htdocs/firecore.

      Regards, Steve

  • steve, i managed to get the server up and running in a virtual machine running os x leopard. created a virtual site and it works mapped to local port 127.0.0.1. what i need to do is to open a webpage locally in that site, tried the following code in /Applications/XAMPP/xamppfiles/etc/httpd.conf:

    DocumentRoot /Applications/XAMPP/xamppfiles/htdocs/firecore
    ServerName test.mysite.com

    xampp tells me there’s an error in sintax… could you please tell me the proper way to do it? thanks in advance!

    • @Alejandro

      If you want to access a site that’s located in a folder off of XAMPP’s document root i.e /Applications/XAMPP/xamppfiles/htdocs/firecore/ then ensure you have the following code in /Applications/XAMPP/xamppfiles/etc/httpd.conf

      # localhost [must be included as the default named server]
      <VirtualHost *:80>
      	ServerName localhost
      	DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
      	<Directory "/Applications/XAMPP/xamppfiles/htdocs">
      		Options Indexes FollowSymLinks Includes execCGI
      		AllowOverride None
      		Order Allow,Deny
      		Allow From All
      	</Directory>
      </VirtualHost>
      

      Restart apache and type http://localhost/firecore/ in your browser.

      Regards, Steve

  • It redirects to xampp folder.
    I checked xampp’s index.php but unable to figure out why it is happening.

    Thanks in advance

  • Been trying to sort this out all day. Finally stumbled across this post and was able to do it in about 15 minutes following these instructions. Thanks muchly for the insight.

    • Alex,

      I’m using XAMPP 1.7.2a on two machines. One was upgraded to Lion and the other was a clean install. Virtual hosts are working fine on both.

      What happens when you type http://localhost ? Are you seeing the XAMPP start page?

      Regards, Steve.

  • Steve,

    great instructions; i follow them as you said and it worked.

    i spent more than 8 hours this weekend trying to figure this out – i am pc user switching to the mac.

    thank you very much…

    • You’re welcome Miguel. I’m glad you found them useful. And welcome to the Mac community. 🙂

Steve

Recent Comments

Recent Posts

Archives