XAMPP: Serving From Any Directory Outside of htdocs

In the xampp PHP server, files are served by default from c:/xampp/htdocs directory. There are times when the need may arise for you to serve your PHP project from directories outside of the /htdocs folder eg directly from an external E:/ drive or any other directory on your computer. We are going to do a walkthrough of the process in this article.

Let’s discuss two methods of achieving this with a Laravel project as an example (+ Windows OS).

To start with, create a new Laravel project within an external drive E:/

• Navigate to your external drive.
• Create a directory within it and and navigate to the directory .
• With your favorite cli (terminal/command prompt/git bash) create a new Laravel project with the command:

$ composer create-project --prefer-dist laravel/laravel my_project_name

• After the new project my_project_name has been successfully created to your external drive, follow either of the two methods described in this article to be able to serve your project from any external directory.

Method 1: Configure the source <Directory> directly within httpd-vhosts.conf file

• a). The httpd-vhosts.conf file can be found at this location C:/xampp/apache/conf/extra/httpd-vhosts.conf

C:/xampp/apache/conf/extra/httpd-vhosts.conf

• b). Assuming your project is located at E:/LaravelApps/my_project_name, create a virtual host entry within your computer’shttpd-vhosts.conf with the content below (adjust to suite your case):

<VirtualHost externalapp.local:80>
    DocumentRoot "E:/LaravelApps/my_project_name/public"
    ServerName externalapp.local
    <Directory "E:/LaravelApps">
        Require all granted    
    </Directory>
</VirtualHost>

Configuring VirtualHost for external serving source (Method 1)

• c). Using a plain text editor like notepad (in admin mode), update hosts file by creating a host name to be used locally for the project on your PC. Name it exactly as defined in ServerName in VirtualHost above by adding this string 127.0.0.1 externalapp.local as the last line. The hosts file can be located at C:/Windows/System32/drivers/etc/hosts.

Updating C:/Windows/System32/drivers/etc/hosts file with 127.0.0.1 externalapp.local

• d). Finally, restart your apache server and go to http://externalapp.local You can always access the project from this address.

Method 2: Create new DocumentRoot and <Directory> within httpd.conf file

Start notepad++ or notepad.exe in administrator mode.

• a). Navigate to and locate the file at C:/xampp/apache/conf/httpd.conf

C:/xampp/apache/conf/httpd.conf

• b). Open the file with a plain text editor, check through the file content (or ctrl + f) to locate the section below within the file:

DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">
    ... some declarations here
    ....
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

• c). The code snippet above is the configuration for the apache server’s root directory from where PHP files are served from. Multiple DocumentRoot configurations can be declared within this httpd.conf file. This allows for flexibility especially if you are serving files from different sources.

httpd.conf with two DocumentRoot configurations

• d). Just below the closing </Directory> (see 2 in image above) create a new DocumentRoot configuration of your own for the external drive with the content below assuming your new project is located at E:/LaravelApps/my_project_name:

DocumentRoot "E:/LaravelApps"
<Directory "E:/LaravelApps">
    ... same content as with the main document root config above
    # NOTE: comments # were removed from the second config
</Directory>

• e). Create a virtual host entry within httpd-vhosts.conf with the content below (adjust to suite your case, for this tutorial I assume the project is located at E:/LaravelApps/my_project_name):

<VirtualHost *:80>
    DocumentRoot "E:/LaravelApps/my_project_name/public"
    ServerName externalapp.local
</VirtualHost>

Configuring VirtualHost for external serving source (Method 2)

• f). Do steps (c) and (d) of Method 1.

Without these special configurations your Xampp’s Apache server will either keep crashing (never start up) or you always get an Error 403 “Access Forbidden” in the browser.

The first method is much more simple and elegant than the second but we all have preferences. The first is compact, less complex, prevents both constant editing of the main config file httpd.conf and indiscriminate errors that may creep in. For every different source you want to serve your files from your simply define the<Directory>within the VirtualHost> and configure as appropriate.

I had to find this out at a time when I needed to juggle a project between two different computers. I could simply connect both computers to a git repository and access the work from it (which I do as well) but having the project on an external drive made more sense in this scenario thus the need to sort for this solution.

Hope this helps someone.