This guide explains how to create a virtual host in XAMPP on Windows and macOS in simple steps. A virtual host lets you run multiple websites on one computer by linking domain names to specific folders. First, we’ll cover Windows, and then we’ll explain the steps for macOS with changes where needed. This version uses easier words and more transition words (like “first,” “then,” “also”) to make it clearer and smoother to read.
What You Need
- XAMPP installed on your Windows or macOS computer.
- Basic skills in editing files and understanding folder paths.
- Administrator access (Windows) or sudo permissions (macOS) to change system files.
Part 1: Setting Up a Virtual Host on Windows
Step 1: Open the Apache Settings File
First, find your XAMPP folder, usually at C:\xampp
. Then, go to the apache\conf
folder. Next, open the httpd.conf
file in a text editor like Notepad or VS Code. Make sure you run the editor as an administrator. After that, look for this line:
#Include conf/extra/httpd-vhosts.conf
Now, remove the #
to turn on virtual hosts, so it looks like this:
Include conf/extra/httpd-vhosts.conf
Finally, save the file and close it.
Step 2: Set Up the Virtual Host
To begin, go to the apache\conf\extra
folder in XAMPP. Then, open the httpd-vhosts.conf
file in a text editor with administrator rights. Next, add a virtual host setup at the end of the file. For example, to create a virtual host for mywebsite.local
, add this:
<VirtualHost *:80>
ServerAdmin webmaster@mywebsite.local
DocumentRoot "C:/xampp/htdocs/mywebsite"
ServerName mywebsite.local
ErrorLog "logs/mywebsite-error.log"
CustomLog "logs/mywebsite-access.log" common
<Directory "C:/xampp/htdocs/mywebsite">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
- DocumentRoot: This is the path to your project folder (e.g.,
C:/xampp/htdocs/mywebsite
). - ServerName: This is your custom domain name (e.g.,
mywebsite.local
). - Directory: This makes sure the folder can be accessed and allows
.htaccess
changes.
After adding this, save and close the file.
Step 3: Make a Project Folder
First, go to the C:\xampp\htdocs
folder. Then, create a new folder for your project, like mywebsite
. Next, add a simple index.html
or index.php
file to test your virtual host. For example:
<h1>Welcome to mywebsite.local</h1>
Also, make sure the folder path matches the DocumentRoot
you set in Step 2.
Step 4: Update the Hosts File
To start, open the Windows hosts file at C:\Windows\System32\drivers\etc\hosts
in a text editor with administrator rights. Then, add this line at the end:
127.0.0.1 mywebsite.local
This links mywebsite.local
to your computer. Finally, save and close the file.
Step 5: Restart Apache
First, open the XAMPP Control Panel. If Apache is running, stop it. Then, start Apache again to apply your changes.
Step 6: Test Your Virtual Host
Now, open a web browser and type http://mywebsite.local
in the address bar. You should see the content of your project folder, like the index.html
file from Step 3. However, if it doesn’t work, check these:
- The Apache error log at
C:\xampp\apache\logs\error.log
. - The
httpd-vhosts.conf
file for mistakes. - The hosts file to ensure the entry is correct.
Step 7: Fix Common Issues
If you see an “Access Denied” error, check that the <Directory>
part in httpd-vhosts.conf
has Require all granted
. Also, if the domain doesn’t work, ensure the hosts file has 127.0.0.1 mywebsite.local
. If Apache won’t start, check for errors in httpd-vhosts.conf
by running httpd -t
in C:\xampp\apache\bin
using Command Prompt. Additionally, make sure no other programs (like Skype) are using port 80.
Step 8: Add More Virtual Hosts
To add another virtual host, repeat Steps 2–4 for a new domain, like anotherwebsite.local
. Also, ensure each virtual host has a unique ServerName
and DocumentRoot
.
Part 2: Setting Up a Virtual Host on macOS
The steps for macOS are similar to Windows, but the file paths and permissions are different. Below, we explain the changes for macOS.
Step 1: Open the Apache Settings File
First, find your XAMPP folder, usually at /Applications/XAMPP
. Then, go to the xamppfiles/etc
folder. Next, open the httpd.conf
file in a text editor with sudo permissions. For example, use this command in Terminal:
sudo nano /Applications/XAMPP/xamppfiles/etc/httpd.conf
After that, find this line:
#Include etc/extra/httpd-vhosts.conf
Now, remove the #
to enable virtual hosts:
Include etc/extra/httpd-vhosts.conf
Finally, save the file (Ctrl+O, Enter in nano) and close it (Ctrl+X).
Step 2: Set Up the Virtual Host
To start, go to the xamppfiles/etc/extra
folder. Then, open the httpd-vhosts.conf
file with sudo permissions:
sudo nano /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf
Next, add a virtual host setup at the end. For example, for mywebsite.local
:
<VirtualHost *:80>
ServerAdmin webmaster@mywebsite.local
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/mywebsite"
ServerName mywebsite.local
ErrorLog "logs/mywebsite-error.log"
CustomLog "logs/mywebsite-access.log" common
<Directory "/Applications/XAMPP/xamppfiles/htdocs/mywebsite">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
- DocumentRoot: The path to your project folder (e.g.,
/Applications/XAMPP/xamppfiles/htdocs/mywebsite
). - ServerName: Your custom domain name (e.g.,
mywebsite.local
). - Directory: Ensures the folder is accessible and allows
.htaccess
changes.
After adding this, save and close the file.
Step 3: Make a Project Folder
First, go to the /Applications/XAMPP/xamppfiles/htdocs
folder. Then, create a new folder for your project:
sudo mkdir /Applications/XAMPP/xamppfiles/htdocs/mywebsite
Next, add an index.html
or index.php
file to test your virtual host:
echo "<h1>Welcome to mywebsite.local</h1>" | sudo tee /Applications/XAMPP/xamppfiles/htdocs/mywebsite/index.html
Also, ensure the folder path matches the DocumentRoot
from Step 2. Then, set the right permissions:
sudo chmod -R 755 /Applications/XAMPP/xamppfiles/htdocs/mywebsite
Step 4: Update the Hosts File
To begin, open the macOS hosts file at /etc/hosts
with sudo permissions:
sudo nano /etc/hosts
Then, add this line at the end:
127.0.0.1 mywebsite.local
This links mywebsite.local
to your computer. Next, save the file (Ctrl+O, Enter in nano) and close it (Ctrl+X). After that, clear the DNS cache:
sudo dscacheutil -flushcache
Step 5: Restart Apache
First, open the XAMPP Control Panel or use Terminal. If Apache is running, stop it:
sudo /Applications/XAMPP/xamppfiles/bin/apachectl stop
Then, start Apache again:
sudo /Applications/XAMPP/xamppfiles/bin/apachectl start
Step 6: Test Your Virtual Host
Now, open a web browser and type http://mywebsite.local
. You should see your project folder’s content, like the index.html
file from Step 3. However, if it doesn’t work, check these:
- The Apache error log at
/Applications/XAMPP/xamppfiles/logs/error_log
. - The
httpd-vhosts.conf
file for errors. - The hosts file to confirm the entry is correct.
Step 7: Fix Common Issues
If you get an “Access Denied” error, ensure the <Directory>
part in httpd-vhosts.conf
has Require all granted
and the folder permissions are 755
. Also, if the domain doesn’t work, verify the hosts file has 127.0.0.1 mywebsite.local
and clear the DNS cache. If Apache won’t start, check for errors in httpd-vhosts.conf
with:
sudo /Applications/XAMPP/xamppfiles/bin/httpd -t
Additionally, ensure no other programs are using port 80.
Step 8: Add More Virtual Hosts
To add another virtual host, repeat Steps 2–4 for a new domain, like anotherwebsite.local
. Also, make sure each virtual host has a unique ServerName
and DocumentRoot
.
Conclusion
You’ve now set up a virtual host in XAMPP on Windows or macOS! For Windows, the main steps involve editing files in C:\xampp
and restarting Apache. For macOS, you use /Applications/XAMPP/xamppfiles
, need sudo permissions, and must set folder permissions and clear the DNS cache. As a result, you can run multiple websites on your computer for testing. For real websites, add extra security and proper domain settings.