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.
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.
Step 3: Enable virtual hosts
This step must be carried out on every Mac you’re looking to sync
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.
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
/Applications/XAMPP/xamppfiles/etc/extra in Finder and open up
Add a new virtual host for each of your sites using the template below. The key parts are the
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.
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-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
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.