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.

Dummy Content
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.

Dummy Content
# 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 487 you should see this.

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

 

We need to un-comment line 488 like so.

Dummy Content
# Virtual hosts
Include 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.

#
# 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.
# 
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

 

Remove the example virtual host configurations beginning on line 23 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 24 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 37 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.

Dummy Content
# 
# 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
		Require all granted	
	</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
		Require all granted
	</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.

33 responses

Leave a Reply to zomibie Cancel reply

33 Comments

  • I’m working with XAMPP and High Sierra. I had changed hosts – httpd.conf – httpd-vhosts.conf but nothing I always have ERR_CONNECTION_REFUSED when I write http://test.local.
    Some ideas?
    In local xampp works fine.
    The problem is
    curl -I -L test.local
    curl: (7) Failed to connect to test.local port 80: Connection refused
    frustrating time!!!

    • @checolori,

      Have you configured XAMMP’s Apache port to something other than 80?

      I’ve also updated the changes required to the httpd-vhosts.conf file as XAMPP now uses Apache 2.4 as opposed to 2.2. Most notably replacing Order Allow, Deny and Allow From All with a single Require all granted directive which would likely have resulted in 403 – Access Forbidden errors.

      Regards, Steve.

      • Yes, I’m working on 8080port.
        Something in chrome used 80port (akamai thecnology)
        so in I have this setup in xampp (localhost:8080–>80 over SSH)
        And of course I changed in my httpd-vhosts.conf the line with .

        I have two doubts:
        1. Do I setup also httpd-ssl.conf?
        2. I have the private folder private/etc/apache2… and lampp/etc with htppd.conf and extra folder. Do I change both files?

        • @checolori,

          The easiest fix is to run Apache on port 80, but if you want to run it on port 8080 do the following.

          1. Change the VirtualHost directives from <VirtualHost *:80> to <VirtualHost>
          2. Restart Apache and clear Chrome’s cache
          3. URLs are now localhost:8080 and http://test.local:8080
          4. For curl use curl -I -L test.local:8080

          Regards, Steve.

          • curl -I -L local.mysite1:8080 –> it’s ok 200
            But if I test it in browser redirect me in /opt/lampp/htdocs/
            not in folder I choose in VirtualHost

          • First of all thanks for help!
            The problem is in localhost:8080 works.
            When I test http://local.mysite1 I have ERR_CONNECTION_REFUSED

            What do you have in hosts.conf about

            “` ServerRoot “/opt/lampp”“`

            “`DocumentRoot “/opt/lampp/htdocs”
            “`

          • @checolori,

            The ServerRoot and DocumentRoot suggest you’re running XAMPP in Linux. Is that right?

            It may be a typo, but http://local.mysite1 should be http://local.mysite1:8080 as you’re not running Apache on the standard port.

            What happens with curl -I -L local.mysite1:8080? Do you get HTTP/1.1 200 OK or curl: (7) Failed to connect to local.mysite1 port 8080: Connection refused.

            Regards, Steve.

  • 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?

    • @Jeff,

      I’ve not used XAMPP for some time now and can’t recall ever having this problem. Not certain what the issue might be, but hopefully you can find an answer in one of these.

      Sorry I can’t be of more help. Steve.

  • 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!

  • Hi Steve
    I keep getting

    http://local.vapor-room/

    Error establishing a database connection

    I’m sure I’ve set all the info in the correct files any advise greatly 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

  • Hey I just wanted to say thanks for explaining what affects where; i.e. the comments in your code blocks.

    I appreciate it!

  • 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