How to Change the htdocs Directory Outside of Xamppfiles in macOS using XAMPP Application

by | Jul 24, 2023 | Tutorials

Changing Xampp default directory

Are you using XAMPP for your web development projects on macOS but need to change the default htdocs directory to a different location? This can be easily accomplished by following a few simple steps. In this blog post, we will guide you through the process of changing the htdocs directory outside of XAMPPfiles in macOS using the XAMPP application.

Step 1: Create a New Directory

How To Change The Htdocs Directory Outside Of Xamppfiles In Macos Using Xam 2023 07 10 At 11.28.41 Am

First, create a new directory where you want to move your htdocs files. For example, let’s say your new directory is located at “/Volumes/Extra HD/xampp/htdocs”. You can choose any location that suits your needs.

Step 2: Copy Files to the New Directory

Next, copy all the files and folders from the default htdocs directory at “/Applications/XAMPP/xamppfiles/htdocs” to your newly created directory. This step ensures that all your existing web files are transferred to the new location.

Step 3: Update httpd.conf

Annotation 2023 07 10 At 11.29.44 Am

Open the file “/Applications/XAMPP/xamppfiles/etc/httpd.conf” in a text editor. Look for the line that begins with “DocumentRoot” and change it to the path of your new directory. In this case, it should be:

DocumentRoot "/Volumes/Extra HD/xampp/htdocs"
<Directory "/Volumes/Extra HD/xampp/htdocs">

Save the changes to the file.

Step 4: Configure Virtual Hosts

Image

While still in the “httpd.conf” file, locate the section for virtual hosts. Uncomment the line that includes “etc/extra/httpd-vhosts.conf”. Change it from:

#Include etc/extra/httpd-vhosts.conf

to:

Include etc/extra/httpd-vhosts.conf

Save the changes to the file.

Step 5: Edit httpd-vhosts.conf

Statusindicator 2023 07 10 At 11.32.12 Am

Open the file “/Applications/XAMPP/xamppfiles/etc/httpd-vhosts.conf” in a text editor. After the existing comments, add the following code:

<VirtualHost *:80>
    DocumentRoot "/Volumes/Extra HD/xampp/htdocs"
    ServerName localhost
    <Directory "/Volumes/Extra HD/xampp/htdocs">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
    ErrorLog "logs/dummy-host2.example.com-error_log"
</VirtualHost>

Save the changes to the file.

Step 6: Restart Apache

Add New Post ‹ Webconsultant247 — Wordpress 2023 07 10 At 11.32.45 Am

Now, restart the Apache server in XAMPP to apply the configuration changes. You can do this by stopping and starting the server from the XAMPP control panel.

Additional Steps: Adjusting Permissions

1. Grant Full Access to manager-osx.app

Full Disk Access In Macos
  • Locate the “manager-osx.app” file, usually found in the “/Applications/XAMPP” directory.
  • Right-click on the file and select “Get Info”.
  • In the “Sharing & Permissions” section, click on the lock icon and enter your administrator password to make changes.
  • Change the permissions for the app to give “Read & Write” access to everyone.
  • Close the “Get Info” window.

2. Set Permissions for Folders

Permissions In Macos
  • Identify the folders that need to have the “777” permission level, such as subdirectories within your htdocs directory.
  • Right-click on each folder and select “Get Info”.
  • In the “Sharing & Permissions” section, click on the lock icon and enter your administrator password to make changes.
  • Click on the “+” button to add a new entry.
  • In the new entry, select “Everyone” from the drop-down menu and set the permissions to “Read & Write”.
  • Click the gear icon and choose “Apply to enclosed items” to propagate the permissions to all subdirectories and files within the folder.
  • Close the “Get Info” window.

Conclusion

Congratulations! You have successfully changed the htdocs directory outside of XAMPPfiles in macOS using the XAMPP application. Your web development files will now be served from the new location.

We hope this step-by-step guide has been helpful to you. If you have any further questions or encounter any issues, please let us know in the comments below. Happy coding!

Please note that this might change later when Xampp releases new updates. This post is published on Xampp 8.1.17 Rev.0. You can always reach out for more assistance!

Book a call with Ali

Download Xampp Here

Need Help With Your Website?

Related Posts

10 Unique Comprehensive CSS Styles for Select Inputs in 2024

10 Unique Comprehensive CSS Styles for Select Inputs in 2024

1. Dark Mode Elegance Select2. Light & Airy3. Bold & Vibrant4. Elegant Minimalist5. Nature Lover6. Neon Glow7. Ocean Breeze8. Tech Savvy9. Playful Pop10. Elegant SimplicityCommon Arrow Code (for all above) For Select Inputs: Customizing <select> inputs...

See these 6 Stylish Input CSS Design in 2024

See these 6 Stylish Input CSS Design in 2024

Web design is constantly progressing, and with it, the elements within a webpage. Among these, input fields are pivotal in engaging users and enhancing their experience. This blog post unfolds six stylish CSS input designs that are not only trendy but are also geared...

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This