How to Change Localhost to a Custom Domain Name in XAMPP

When developing websites locally with XAMPP, using localhost as your address works fine, but it's often nicer and more professional to use a custom domain like myapp.test. This tutorial shows you how to do that on a Mac.

Why Use a Custom Domain?

Easier to remember than localhost
Mimics a real domain for better testing
Supports virtual hosting for multiple projects

1. Edit Your Hosts File

This makes your Mac recognize a custom domain name.

Open Terminal and run:
```
sudo nano /etc/hosts
```
Enter your Mac password.
At the bottom, add:
```
127.0.0.1    myapp.test
```
Save and exit (Ctrl + O, Enter, then Ctrl + X).

2. Create Your Project Folder

XAMPP stores websites in the htdocs directory.


mkdir /Applications/XAMPP/htdocs/myapp

3. Add a Sample `index.html`

Create a simple page to test your domain:


nano /Applications/XAMPP/htdocs/myapp/index.html

Paste this:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyApp Test</title>
</head>
<body>
    <h1>It works! 🎉</h1>
    <p>This is my custom domain running in XAMPP on Mac.</p>
</body>
</html>

Save (Ctrl + O, Enter) and exit (Ctrl + X).

4. Configure Apache Virtual Hosts

Open the Virtual Hosts config file:


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

Add this block at the bottom:


<VirtualHost *:80>
    ServerAdmin admin@myapp.test
    DocumentRoot "/Applications/XAMPP/htdocs/myapp"
    ServerName myapp.test
    ServerAlias www.myapp.test
    <Directory "/Applications/XAMPP/htdocs/myapp">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Save and exit.

5. Enable Virtual Hosts in Apache

Open the main Apache config file:


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

Find this line:


#Include etc/extra/httpd-vhosts.conf

Remove the # so it becomes:


Include etc/extra/httpd-vhosts.conf

Save and exit.

6. Restart Apache

Restart Apache with:


sudo /Applications/XAMPP/xamppfiles/bin/apachectl restart

(or restart from the XAMPP Control Panel).

7. Test Your Custom Domain

Open your browser and go to:


http://myapp.test

✅ You should now see your “It works! 🎉” page.

Fix Code

How to Change Localhost to a Custom Domain Name in XAMPP

Why Use a Custom Domain?

1. Edit Your Hosts File

2. Create Your Project Folder

3. Add a Sample `index.html`

4. Configure Apache Virtual Hosts

5. Enable Virtual Hosts in Apache

6. Restart Apache

7. Test Your Custom Domain

Post a Comment

How to Change Localhost to a Custom Domain Name in XAMPP

Why Use a Custom Domain?

1. Edit Your Hosts File

2. Create Your Project Folder

3. Add a Sample index.html

4. Configure Apache Virtual Hosts

5. Enable Virtual Hosts in Apache

6. Restart Apache

7. Test Your Custom Domain

Post a Comment

3. Add a Sample `index.html`