Sync XAMPP sites with iCloud Drive

XAMPP + iCloud Drive

I develop sites on my iMac using Coda 2, XAMPP and my pre-processor of choice – currently Prepros. I needed a way of syncing my development environment between my iMac and new 12″ MacBook, seamlessly, without relying on unnecessary third-party resource hogs like Dropbox or Google Drive.

Cue iCloud Drive…

iCloud Drive was released with iOS 8 and OS X Yosemite and, as such, probably exists on your devices whether you like it or not. Might as well make the most of it – besides, the syncing is pretty good and you’ve got 5GB free storage.

Syncing your development environment

Step 1: Install your apps

Install your code editor of choice, XAMPP, and your favourite preprocessor on all machines you wish to sync. Simple.

Mac OS X dock

Step 2: Create an iCloud Drive working directory

Choose iCloud Drive in Finder, and create a new Sites folder, then create a new folder within Sites with a name of your choice. Move your website files into this folder, allowing iCloud to sync whilst we continue.

iCloud Drive - sites

Step 3: Enable virtual hosts

This step must be carried out on every Mac you’re looking to sync

Go to /Applications/XAMPP/xamppfiles/etc, find httpd.conf and open it up in your code editor. Find the line below and remove the # at the beginning of it to uncomment it.

#Include etc/extra/httpd-vhosts.conf

Whilst you’re in httpd.conf, find the following lines and edit as described below:

User daemon
Group daemon

Change to the below, replacing <Your_username> with your Mac OS X account short name:

User <Your_shortname>
Group admin

You can now save and close httpd.conf.

Go to /Applications/XAMPP/xamppfiles/etc/extra in Finder and open up httpd-vhosts.conf.

Add a new virtual host for each of your sites using the template below. The key parts are the DocumentRoot and Directoryvariables – make sure you get the /Users/<Your_shortname>/Library/Mobile Documents/com~apple~CloudDocs bit right, and use your OS X account short name. The /Sites/site1 path at the end must correspond to the folder created in step 2. The port number should be incremented for each site – e.g. 1000, 1001, 1002 and so on.

# Your site
Listen *:1000
<VirtualHost *:1000>
	ServerName localhost
	DocumentRoot "/Users/<Your_shortname>/Library/Mobile Documents/com~apple~CloudDocs/Sites/site1"
	<Directory "/Users/<Your_shortname>/Library/Mobile Documents/com~apple~CloudDocs/Sites/site1">
		Options Indexes FollowSymLinks Includes execCGI
		AllowOverride All
		Require all granted
	</Directory>
</VirtualHost>

Remember to copy these httpd.conf and httpd-vhosts.conf files to the respective folders on all other Macs you want to sync. You can copy the files over using AirDrop and simply replace the existing files, remembering to update the OS X account short name where necessary.

Step 4: Restart Apache server on each Mac

XAMPP - Start Apache

Simply open up manager-osx.app – aka. XAMPP – and restart your local Apache server to apply the changes we’ve just made.

When you visit http://localhost:1000 you should now see your new website, on every Mac. What’s more, when you edit the site on one Mac, it’ll update on all the others in a few seconds. Marry this with a preprocessor like Prepros to enable live refreshing, too.

Magic.

  • disqus_kWBDmvSIH4

    I am new to mac – just checking – my files are under htdocs in xampp.. I copy these to iCloud ..?

    I use dreamweaver to edit – but which files do I edit?

    Do I navigate dreamweaver to the files under xampp htdocs to edit and then will it automatically update the iCloud files and then will the iCloud files then automatically update the files under xampp htdocs on the other mac ??
    If it is iCloud drive files I edit from, do I need to still keep the files under xampp or can I archive them?

    This is primarily my concern as I am not sure which copy of the files to use i.e. iCloud drive or the xampp version? and duplicates across two machines cause problems.

    then do I upload ftp from iCloud Drive files to the web?

    and why do I get little spotted clouds for hours after transferring files to iCloud?
    Have they copied or haven’t they copied.
    is there a iCloud Drive status anywhere?

    • Hi there,

      1. Yes, you need to copy your XAMPP htdocs folder to your iCloud Drive – see step 2 in this guide
      2. Follow step 3 of this guide to ensure your local Apache server is pointing to your iCloud Drive
      3. Now edit the files on your iCloud Drive (using Dreamweaver) to update your website, yes they will sync to the cloud too
      4. Upload from iCloud Drive to your live environment

      Hope that answers your questions?

  • Thanks for sharing mate!!! I used your guide combined with another one (for bypass XAMPP) for use textastic iCloud folder as a localhost. Superb! I think that if you don’t need MySql Database you can use the standard guide for enable Apache and will use half of ram for your work. If you need contact me and thank again!

  • Riaz Khan

    Hello. I am not sure what I am doing wrong. I followed all directions, and when I went to localhost: 1000 at the end I get an “ACCESS FORBIDDEN!” warning.
    You don’t have permission to access the requested directory. There is either no index document or the directory is read-protected.
    Error 403

    When I open a PHP file that is in my iCloud folder I get message at the end saying.

    Something is wrong with the XAMPP installation 🙁

    I edited the httpd.conf file. I removed the # and I changed to User riaz and Group admin

    I then edited the httpd-vhosts.conf file and added the below

    # Your site
    Listen *:1000

    ServerName localhost
    DocumentRoot “/Users/riaz/Library/Mobile%20Documents/com~apple~CloudDocs/PHPWebsites/BashirRafiqPHPNew”

    Options Indexes FollowSymLinks Includes execCGI
    AllowOverride All
    Require all granted

    My string was a little different than yours, yours did not have Mobile%29Documents, but I pulled that from the file directory.

    I then restarted my server but got the error I mentioned at the start.