How to Set Up a Virtual Host in XAMPP on Windows and macOS

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.

Let's connect - webatapp8@gmail.com