Setting Up Virtual Hosts Using XAMPP

Ever tried working on multiple websites at once while developing? It can be a hassle without virtual hosts. These handy configurations let you run several sites on your local Apache server simultaneously, just like they’re live on the web. And guess what? It’s super easy to set up, especially on macOS using XAMPP!

XAMPP is like a magic box for developers. It packs all the tools you need—Apache, MySQL, PHP, and more—into one neat bundle, making web development a breeze. So, let’s get started! We’ll show you how to add virtual hosts to Apache on your Mac using XAMPP. No complicated stuff, just simple steps to turbocharge your local development environment. Ready? Let’s dive in!

Step 1: Open Apache Configuration File

XAMPP comes with its own Apache server configuration. Open the Apache configuration file httpd.conf using your preferred text editor. The default path of the Apache config file on Mac is /Applications/XAMPP/xamppfiles/etc/httpd.conf. You can use nano or any other text editor of your choice. Run the following command in Terminal:

sudo nano /Applications/XAMPP/xamppfiles/etc/httpd.conf

Step 2: Uncomment Virtual Hosts Include

Inside the httpd.conf file, look for the line that includes virtual hosts configuration file. It should look like this:

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

Remove the # at the beginning of the line to uncomment it. It should now look like this:

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

Step 3: Edit Virtual Hosts Configuration File

XAMPP comes with a separate configuration file for virtual hosts. The default path for this file on Mac is /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf. Open the httpd-vhosts.conf file for editing:

sudo nano /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

Step 4: Add Virtual Host Configuration

Inside the httpd-vhosts.conf file, add your virtual host configuration. Each virtual host should have its own <VirtualHost> block. Here’s an example configuration:

<VirtualHost *:80>
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/example/public/"
    ServerName example.local
</VirtualHost>

Note that you’re not limited to directories inside the htdocs directory. Technically you can set the DocumentRoot to any directory on your machine. You just need to ensure that Apache has permission to read that directory (and all of its parent directories) and also you need to add the “Require all granted” directive to the virtual host configuration like this:

<VirtualHost *:80>
    DocumentRoot "/Users/Shared/another-example"
    ServerName another-example.local
    <Directory "/Users/Shared/another-example">
        Require all granted
    </Directory>
</VirtualHost>

Step 5: Save and Exit the Text Editor

Press Ctrl + X, then Y to confirm the changes, and Enter to save the file.

Step 6: Edit Hosts File

To map your domain name to your local machine, you need to edit the hosts file. Open the hosts file in Terminal:

sudo nano /private/etc/hosts

Add the following line:

127.0.0.1    example.local

Step 7: Restart Apache Server

Finally, restart the Apache server for the changes to take effect:

sudo /Applications/XAMPP/xamppfiles/xampp restartapache

Step 8: Test Your Virtual Host

Open a web browser and navigate to http://example.local. You should see your website if everything is configured correctly.

That’s it! You’ve successfully added a virtual host to Apache using XAMPP on macOS. You can repeat these steps to add additional virtual hosts for other websites or projects.