Php Apache Xampp Server Configuration

How to Make `XAMPP` Serve Files from Outside the `htdocs` Directory

When using XAMPP for local development, the default setting serves files from the htdocs directory. However, developers often encounter scenarios where they need to access files located in different directories. If you’re wondering how to configure XAMPP to serve files from outside of the htdocs folder, you’re in the right place! In this blog post, we’ll explore the various methods to achieve this, emphasizing clarity and simplicity.

Why You Might Want to Serve Files Outside `htdocs`

Organizational Preferences: You may have a structured project directory and wish to keep projects separate from the htdocs folder.
Easier Access: Serving files directly from your project locations can streamline your workflow.
Multiple Projects: If you’re working on several projects, managing them all within htdocs can become cumbersome.

Now, let’s dive into the methods you can use to serve files outside the htdocs directory in XAMPP.

Method 1: Configure Virtual Hosts

This method allows you to create unique addresses for your projects, making them easy to access.

Steps to Set Up Virtual Hosts

Open Configuration File: Navigate to C:\xampp\apache\conf\extra\httpd-vhosts.conf.
Enable Virtual Hosting: Uncomment the following line (usually around line 19):
```
NameVirtualHost *:80
```

Add Your Virtual Host Configuration: Under the virtual host section (around line 36), add the following code:

<VirtualHost *:80>
    DocumentRoot C:\Projects\transitCalculator\trunk
    ServerName transitcalculator.localhost
    <Directory C:\Projects\transitCalculator\trunk>
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Modify Hosts File: Open your hosts file located at C:\Windows\System32\drivers\etc\hosts and add:
```
127.0.0.1 transitcalculator.localhost #transitCalculator
```
Restart Apache: After saving the changes, restart the Apache server.

Now, you can access your project through the URL http://transitcalculator.localhost/.

Method 2: Create an Alias

If you prefer simpler access without setting up virtual hosts, creating an alias could be the way to go.

Steps to Create an Alias

Modify http.conf: Open C:\xampp\apache\conf\httpd.conf and find the section between <Directory "C:/xampp/htdocs"> and </Directory>. Copy this section and paste it below, modifying the path to your desired directory (e.g., C:/Projects).
Add Alias: Look for the <IfModule alias_module> section (around line 300) and add:
```
Alias /transitCalculator "C:/Projects/transitCalculator/trunk"
```

Method 3: Change Your Document Root

This method involves altering the main document root of your XAMPP installation.

Steps to Change Document Root

Open httpd.conf: Edit C:\xampp\apache\conf\httpd.conf.
Modify Document Root: Change the following line (around line 176):
```
DocumentRoot "C:/xampp/htdocs"
```
to:
```
#DocumentRoot "C:/Projects"
```
Adjust Directory Settings: Modify the line shortly after (around line 203) to reflect the new location.

Important Notes

Make sure to use forward slashes (/) instead of backslashes () in your paths.
Avoid trailing slashes at the end of your directory paths.
Always restart your server after making changes.

Conclusion

Serving files from outside the htdocs directory in XAMPP can enhance your development experience and cater to your organizational needs. Whether you choose to set up virtual hosts, create an alias, or change your document root, each method provides unique benefits tailored to how you manage your projects.

Feel free to pick the method that suits your workflow best, and enjoy coding with more flexibility!

How to Make XAMPP Serve Files from Outside the htdocs Directory

Why You Might Want to Serve Files Outside htdocs