How to add a custom domain name in XAMPP

In XAMPP By Rudrax On

XAMPP is a widely used software package that simplifies the setup and management of a local web development environment. It combines Apache, MySQL, PHP, and Perl, allowing developers to create dynamic websites on their local machines before deploying them to a live server.

When working with XAMPP, websites can be accessed through the default URL, “localhost,” but it is possible to add a custom domain name for a more professional and personalized touch, you can add as many custom domains as you like.

In this article, we will guide you through the process of adding a custom domain name instead of localhost in XAMPP, enabling you to create a local environment that closely resembles your live website.

Steps to add a custom domain name in XAMPP

1. Locate Your Application folder

First, you will need to locate the path where your application is stored. It should be inside the xampp’s htdocs folder. For example: C:\xampp\htdocs\mywebsite

2. Edit the Hosts file and add the custom domain

The hosts file is a simple text file that maps hostnames to IP addresses. By adding an entry for your custom domain, you can direct it to your local machine. The hosts file can typically be found in the following directory:

  • Windows: C:\Windows\System32\drivers\etc\hosts
  • Mac: /private/etc/hosts
  • Linux: /etc/hosts
127.0.0.1    mywebsite.local
127.0.0.1    mywebsite.test mysite.local

You can also add multiple domain names by writing them on the same line or breaking them into multiple lines.

Open the hosts file using a text editor with administrative privileges and add a new line with the following format:

3. Configuring Virtual Hosts in XAMPP

Now it’s time to configure virtual hosts in XAMPP. Virtual hosts allow you to set up multiple websites on a single machine and specify custom domain names for each of them. Locate the “httpd-vhosts.conf” file in your XAMPP installation directory, typically found at “C:\xampp\apache\conf\extra\httpd-vhosts.conf” on Windows. Open the file in a text editor and add the following code:

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs\mywebsite"
    ServerName mywebsite.local
</VirtualHost>


Ensure that the paths specified in the “DocumentRoot” match the location of your XAMPP htdocs folder and the folder for your specific website.

ServerName will contain the custom domain name. It can be anything like mywebsite.local or mywebsite.test

Save the changes and close the file.

4. Restart XAMPP

To test if the custom domain is working correctly, restart the Apache web server in XAMPP. Once Apache is up and running, open your web browser and type the custom domain name (e.g., “mywebsite.local”) in the address bar. If everything is configured correctly, you should see your website loaded from your local machine. Congratulations! You have successfully added a custom domain name instead of localhost in XAMPP.

Troubleshooting Common Issues

If you encounter any issues while setting up a custom domain name in XAMPP, Double-check your XAMPP configuration files, such as httpd-vhosts.conf, to ensure that there are no syntax errors or typos. Pay attention to file paths, document roots, and virtual host definitions.

Conclusion

Adding a custom domain name instead of localhost in XAMPP allows you to create a more professional and realistic local development environment. By following the steps outlined in this article, you can configure a custom domain, set up DNS settings, edit the hosts file, and configure virtual hosts in XAMPP.

With a custom domain, you can replicate the structure and functionality of your live website, providing a more accurate representation of your work.

If you face any issues while implementing the task, feel free to ask youur query below in the comments.

Leave a Reply