Change localhost to domain name for XAMPP

XAMPP helps us simulate server environment on our Windows computer so we can test our websites locally before uploading them to live server. By default, XAMPP uses localhost as its URL for local websites. Is it possible to access our websites using a custom domain name instead of localhost? By doing so, we can use different domain names for multiple websites and we save the time to change site URL on remote server when our site is ready to publish.

Resolve a domain to local computer

Like similar software tools, when XAMPP setting up web server on your Windows computer, 127.0.0.1 is used to point the software to the local PC. 127.0.0.1 is the local computer address. localhost uses the IP address 127.0.0.1. If you want to use a custom domain name instead of localhost in XAMPP, you have to firstly resolve the domain to the local IP address 127.0.0.1.

Windows computers have a hosts file, an operating system file, that maps hostnames to IP addresses. It allows users to specify an IP address to use for a hostname or domain name without checking DNS. You can refer to this tutorial to find and edit hosts file in Windows 10 for more details.

Now you have already pointed the custom domain to your local web server. Follow below steps to map the domain to the specific folder for the local websites configured using XAMPP.

Add custom domain to XAMPP

Browse to the installation directory of XAMPP in Windows File Explorer. Navigate to apache/conf/extra. Find and open the Virtual Hosts Apache configuration file named httpd-vhosts.conf using Notepad or other text editor programs you have.

add custom domain to XAMPP

In this VirtualHost configuration file, you can see the VirtualHost example code. You can copy and paste the sample code and then replace the ServerName with your own domain name. Or copy and paste the code below, then replace the DocumentRoot and Directory with your actual website root directory and its path, use your custom domain as the ServerName.

<VirtualHost *>
    DocumentRoot "D:/XAMPP/htdocs/site1"
    ServerName betterhostreview.com
    <Directory "D:/XAMPP/htdocs/site1">
    Order allow,deny
    Allow from all
    </Directory>
</VirtualHost> 

If you want to maintain multiple domains/hostnames for different or the same websites on your computer you can setup VirtualHost containers or blocks for them.

Simply copy and paste above code again, then use new DocumentRoot, ServerName, Directory in additional VirtualHost containers or blocks.

If you like to access the same site using localhost at the same time, add below code to this configuration file. Make sure to replace the DocumentRoot with your own.

<VirtualHost *>
    DocumentRoot "D:/XAMPP/htdocs"
    ServerName localhost
</VirtualHost>

Note that you may need to restart Apache service in XAMPP before the changes take effects.

Leave a Reply