How to Modify Virtual Hosts on XAMPP to Get (.dev) URLs

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, avr: 5.00)

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.


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
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
Edit XAMPP Httpd Config Virtual Host File
  1. You need to navigate to C:/xampp/apache/conf/extra or wherever your XAMPP files are located.
  2. Right-click on httpd-vhosts.conf to edit with best text editor that you prefer.
  3. 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:

  1. VirtualHost: Most web servers use port 80 as their default port. However, you can change the port to 8080, 8081 etc.
  2. DocumentRoot: The folder where files of a site will exist. In our case, the folder name is “WordPress”.
  3. ServerName: It is the URL for our virtual host.
  4. 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 Entry Host File
Edit Entry Host File
  1. Right click on your text editor and run as an administration.
  2. On a Text Editor click File then select Open then navigate to a file C:/Windows/System32/drivers/etc/host/hosts
  3. 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
  4. 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:

Virtual Hosts on the Browser
Virtual Hosts on the Browser

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

Adzan

About the Author: Adzan

A writer and blogger for Internet Technology. Loves to explore features update about the Programming language, Software developer and etc..