How To Change The Root Directory In XAMPP?

Published September 15, 2024

Problem: Changing XAMPP's Root Directory

XAMPP's default root directory may not be the best place for web development projects. Changing this directory helps organize and access project files more easily, but it requires changes to XAMPP's configuration.

Modifying Apache's Configuration

Finding the httpd.conf file

To change XAMPP's root directory, modify the Apache configuration file. Open the XAMPP Control Panel and click the "Config" button next to Apache. Select "Apache (httpd.conf)" from the dropdown menu. This opens the configuration file in your text editor.

Tip: Backup Your Configuration

Before making changes to the httpd.conf file, create a backup copy. This allows you to restore the original settings if needed. To create a backup, simply copy the httpd.conf file and rename it to something like httpd.conf.backup.

Changing the DocumentRoot and Directory entries

In the httpd.conf file, find the "DocumentRoot" and "Directory" entries. Use the search function (Ctrl+F) to find these sections. Look for lines like:

DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">

Change these entries to your new root directory. For example:

DocumentRoot "C:/xampp/htdocs/myproject/web"
<Directory "C:/xampp/htdocs/myproject/web">

Update both the DocumentRoot and Directory paths to keep them consistent.

Saving changes and restarting Apache

After making changes, save the httpd.conf file. Go back to the XAMPP Control Panel and restart the Apache server. Click the "Stop" button next to Apache, wait for it to shut down, then click "Start" to restart it with the new settings.

Verifying the New Root Directory

Testing the new configuration

After changing the Apache configuration and restarting the server, test the new setup. Open your web browser and go to http://localhost/. If the changes were applied correctly, you should see the contents of your new root directory (xampp\htdocs\myproject\web) instead of the default XAMPP welcome page.

To confirm the new root directory is active, create a simple HTML file in your new web directory. For example, create a file named "test.html" in the xampp\htdocs\myproject\web folder with this content:

<!DOCTYPE html>
<html>
<body>
<h1>New Root Directory Test</h1>
<p>If you can see this, the new root directory is working.</p>
</body>
</html>

Save this file and access it through your browser at http://localhost/test.html. If the page loads and shows the test message, it confirms that your new root directory is active and working.

Tip: Check File Permissions

Make sure the new root directory and its files have the correct permissions. On Windows, ensure the XAMPP user has read and execute permissions for the directory. On Linux or macOS, set the directory permissions to 755 (drwxr-xr-x) and file permissions to 644 (-rw-r--r--).

If you have issues or the new root directory doesn't work, check your httpd.conf file for any typos in the paths you changed. Make sure you've saved the changes and restarted Apache. If problems continue, review the Apache error logs for information about configuration issues.