How to Configure Virtual Hosts on XAMPP for (.dev) URLs

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, avr: 3.00)

There are several purposes to Configure 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/axfod then you want to change to be pretty url axfod.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.


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.

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:


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:

Recommended For You

About the Author: Adzan

Internet enthusiast like to share about newest information technology such as programming language, software developer and etc...