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.
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:
- 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:
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: