Local development plays a crucial role in programming and web development. XAMPP is a handy tool for running PHP on Windows. In this guide, we’ll explain how to configure multiple work directories as virtual hosts on your local environment using XAMPP.
Preparing the Work Environment
Previously, we introduced Set Up PHP Environment on Windows with XAMPP. After installing XAMPP, the default virtual host (localhost) directory is located under C:￥xampp￥htdocs if XAMPP is installed in C:￥xampp. For my projects, I prefer to separate work directories like:
C:￥xampp￥htdocs￥worksite1 C:￥xampp￥htdocs￥worksite2
Below, I’ll share the configuration steps for this setup. My PC environment is Windows 10.
Edit the Windows Hosts File to Add Local URLs (Domain Names) for Work
Open the file located at C:￥Windows￥System32￥drivers￥etc￥hosts. You need to open Windows Notepad as an administrator to edit this file. Search for “Notepad” from the “Type here to search” field at the bottom left of your desktop. (Alternatively, click the Windows icon to display Notepad.)
Right-click on “Notepad” and select “Run as administrator”.
Once Notepad opens, go to “File” → “Open” → select C:￥Windows￥System32￥drivers￥etc￥hosts. If the “hosts” file is not visible, select “All Files” at the bottom-right dropdown.
At the bottom of the file, add the local URL (domain name) for your work:
127.0.0.1 localworksite1
Configure the Work Directory and Local URL (Domain Name) in XAMPP
Open the C:￥xampp￥apache￥conf￥extra￥httpd-vhosts.conf file with a text editor or Notepad.
Define the following:
- Work Folder (DocumentRoot):
C:￥xampp￥htdocs￥worksite1 - Local URL for Work (ServerName):
localworksite1← The URL added to the “hosts” file - Access Rights for Work Folder (Directory):
C:￥xampp￥htdocs￥worksite1← Allows browsers to display the work directory
Add the following settings at the end of the httpd-vhosts.conf file:
<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs\worksite1"
ServerName localworksite1
</VirtualHost>
<Directory "C:\xampp\htdocs\worksite1">
Options Indexes
AllowOverride All
Require all granted
</Directory>
Prepare an index.php File in the XAMPP Work Directory
Create an index.php file in the XAMPP work directory:
C:￥xampp￥htdocs￥worksite1￥index.php
The content of the index.php file is as follows:
<?php
print "hello world!!";
?>
Start XAMPP and Verify in the Browser
Start XAMPP:
Click “Start”. Open the configured local URL in your browser:
http://localworksite1/
The file (index.php) in the work directory will be displayed in your browser:
Summary
Configuring a local development environment with XAMPP is extremely convenient for learning and practicing web development. When managing multiple projects simultaneously, separating work directories allows you to work more efficiently.
I hope this article helps you set up your development environment.
※ Please take full responsibility when using this guide.
