Setting-up Multiple Subdomains in Your Localhost Using XAMPP

Here is a quick guide on how to create multiple subdomain in your localhost using XAMPP.

Let’s Begin

Open your XAMPP control panel and click explore. This will take you to your XAMPP installation directory.

Now go to Apache > Conf > Extra then locate and open ‘httpd-vhosts.conf’file. NOTE: Create a backup of the file before editing.

I use notedpad++ as my editting software.

Around the last lines of the file add the highlighted text as shown in the image below.

What is happening?

{code type=”php”}NameVirtualHost *:80{/code}

This tells our apache to allow multiple hosts in our localhost.

{code type=”php”}
<VirtualHost *:80>
DocumentRoot “E:/SERVER-XAMPP/xampp/htdocs”
ServerName localhost
</VirtualHost>
{/code}

This tells our apache the folder path for our default http://localhost

{code type=”php”}
<VirtualHost *:80>
DocumentRoot “E:/SERVER-XAMPP/xampp/htdocs/subdomain”
ServerName subdomain.localhost.com
</VirtualHost>
{/code}

This tells our apache the folder path for our new subdomain http://subdomain.localhost.com

To create another folder directory for another subdomain, simply replicate the above code block like:

{code type=”php”}
<VirtualHost *:80>
DocumentRoot “E:/SERVER-XAMPP/xampp/htdocs/another-subdomain”
ServerName another-subdomain.localhost.com
</VirtualHost>
{/code}

or

{code type=”php”}
<VirtualHost *:80>
DocumentRoot “E:/SERVER-XAMPP/xampp/htdocs/my-subdomain”
ServerName my-subdomain.localhost.com
</VirtualHost>
{/code}

Next, Go to C:\WINDOWS\system32\drivers\etc then locate ‘hosts’ file. NOTE: Create a backup of the file before editing.

On the last line, add the highlighted text in the image below.

What is happening?

{code type=”php”}127.0.0.1 subdomain.localhost.com{/code}

This file would tell our Windows OS to recognize our newly defined localhost domain which is http://subdomain.localhost.com

To add new subdomains, just add replicate line 21 like:

{code type=”php”}127.0.0.1 another-subdomain.localhost.com{/code}

or

{code type=”php”}127.0.0.1 my-subdomain.localhost.com{/code}

Now, go back to your XAMPP control panel and restart apache by clicking the designated stop button then afterwards the start button.

Go to your browser and type in the address bar : http://subdomain.localhost.com

That should be working perfectly 🙂

Happy coding! 😀

Recommended Posts