There are several purposes to modify virtual hosts on XAMPP, many developers need to create virtual hosts in XAMPP to handle multiple projects or start development in their local environment and then go to a testing/staging the projects.
XAMPP allows you to modify virtual hosts or make URLs cleaner and use an alias name for your localhost, so that each local website can be accessed through a specific name. In this case, your localhost url localhost/otnix then you want to change to be pretty url otnix.dev.
In this tutorial will demonstrate step by step how to modify virtual hosts on XAMPP to get (.dev) URLs running on your local server.
Prerequisites
Make sure XAMPP has been installed and working properly as a localhost environment set up on your computer. You can obtain a XAMPP for free from the Apache Friends.
Contents
Step 1: Stop Apache and MySQL on XAMPP
When you modify the host files you need to restart the server. We find it easier to stop the service first, make the change then fire up XAMPP again.
Stop Apache and MySQL on XAMPP
Step 2: Edit XAMPP Httpd Config Virtual Host File
The virtual host needs to point out the same host declared in the hosts file of windows (in this case 127.0.0.2) at the port 80. You can create this virtual host appending the following snippet at the end of the content of the httpd.conf file located in the xampp folder.
Edit XAMPP Httpd Config Virtual Host File
- You need to navigate to C:/xampp/apache/conf/extra or wherever your XAMPP files are located.
- Right-click on httpd-vhosts.conf to edit with best text editor that you prefer.
- Edit these file as bellow instruction.
After opening text editor, you may clear everything on these files or we recommended just adding the following code at the end of the existing code.
<VirtualHost *:80>
DocumentRoot "LOCAL_WEBSITE_FOLDER_PATH"
ServerName web.dev
<Directory "LOCAL_WEBSITE_FOLDER_PATH">
Options Indexes FollowSymLinks ExecCGI Includes
Order allow,deny
Allow from all
</Directory>
</VirtualHost>In the above code:
- VirtualHost: Most web servers use port 80 as their default port. However, you can change the port to 8080, 8081 etc.
- DocumentRoot: The folder where files of a site will exist. In our case, the folder name is “WordPress”.
- ServerName: It is the URL for our virtual host.
- Directory: It is the directory of our virtual host.
Step 3: Edit Entry Host File
This process may be slightly different on a Mac but on Windows:
Edit XAMPP Httpd Config Virtual Host File
- Right click on your text editor and run as an administration.
- On a Text Editor click File then select Open then navigate to a file C:/Windows/System32/drivers/etc/host/hosts.
- After the commented section add 127.0.0.1 yourname.dev for each development URL you are setting up. We like .dev for our local development but you can label it what you like. For example: 127.0.0.1 otnix.dev
- Save the file and close Notepad.
If the host folder looks empty to be sure to select All Files (*.*) near the file name input. It seems to be set to .txt by default.
Step 4: Restart XAMPP
Restart or Start your XAMPP. Finally as expected, by visiting either yourname.dev in your browser will show the entry point of your web application:
Edit XAMPP Httpd Config Virtual Host File
If this article How to modify virtual hosts on XAMPP to get (.dev) URLs could help you, please rate above Star button rating and share to help others find it! Feel free to leave a comment below.
 URLs){kind=link}