28
May 11

Integrating XAMPP’s web root (htdocs) and Dropbox

This is Part 1 of a short series of posts relating to getting a Windows-based web development environment humming with the following development tools & technologies: XAMPP, PHP, CodeIgniter, Python, Django, WordPress, MySQL, SQLLite, SQL-Server, NoSQL, jQuery, node.js, HTML5, mobile dev, ASP.NET MVC, C#, Visual Studio, XAMPP, DropBox, Mercurial, and TortoiseHG

Goals of this series

  1. Present how I set up a Windows-based web dev environment that’s a mix of MS and open-source tech/tools, and is easy-to-use, low-maintenance, and portable between work/home/whatever…
  2. Report on my progress through the development of various apps with related analysis, design, dev, and integration anecdotes, etc.

I’m starting this series ‘in media res‘:
I’m mostly set up and dev work has begun. I’ve already recently built a few new sites using WordPress OR PHP, CodeIgniter and MySQL.
I already know ASP.NET MVC and PHP pretty well, and all the other tech is familiar — except Python/Django, which I just started learning in February.
I’ll use ASP.NET MVC and Python/Django on other stuff, later.

The home-workstation is a Windows 7 tower that’s decently powerful:

  • Intel Core 2 Quad @ 2.4Ghz
  • 4GB RAM
  • nVidia GeForce GTX 460
  • 1TB of HD (Raid 0)
  • OS on a separate 80GB SSD
  • Windows 7 Ultimate x64 (kept up-to-date with Windows Update)
  • TortoiseHg 2.0.4

My Laptop is decently powerful for dev:

  • Lenovo T400s
  • Intel Core 2 Duo @ 2.53Ghz
  • 4GB RAM
  • crappy Intel videocard
  • 120GB SSD
  • Windows 7 Ultimate x64 (again, relatively up-to-date with Microsoft Update)

Key Dev Tools (all machines/environments):

I won’t bother to explain what all these tools are and what they do, the focus here is how to get them all working together. if you need detailed info on them, Google is your friend…

Anyhoo, that’s the recap, back to the subject at hand


So, I have XAMPP and Dropbox both installed on my D: drive.

  • XAMPP is located at D:\XAMPP\
  • and DropBox is at D:\Users\[userName]\Docs\Dropbox\ (don’t ask…)

I wanted to have my XAMPP-based work shared between systems, so I can work seamlessly on them at home, work, when I’m at your place, etc. Plus Dropbox would give me sorta-kinda disaster recovery and limited version control (I actually use Mercurial & BitBucket for version control, as you will see later in this series, but this is nice extra piece of mind).

Earlier experiments with moving the entire XAMPP folder-tree/install into Dropbox had not gone well: permission issues and general app ‘crankiness‘ between them turned me off that idea.

So I decided to try a symlink from XAMMP’s web root (/htdocs/) to a folder inside my Dropbox tree. This would be almost ideal, the only code/settings of importance to me not then replicated in Dropbox would be Apache’s conf files and my Windows host file (more to come in this series on those 2 issues).

Long story short, this worked like a charm and I now have the folder in my Dropbox.

So here’s how I went about it:

  1. Shut down XAMPP and double-check it is all closed
  2. Backed up everything that I was going to move…just in case…
  3. I added a new folder to dropbox: \dev\
  4. Then I dragged D:\XAMPP\htdocs\ to \dev\, resulting in: D:\Users\[userName]\Docs\Dropbox\dev\htdocs\
  5. Then, opened a command window, and used Micosoft’s mklink to create a Directory Junction, so that XAMPP’s Apache will not ‘know’ that I’ve moved the folder. Here’s the command I used: mklink /J “D:\xampp\htdocs” D:\Users\[userName]\Docs\Dropbox\dev\htdocs\”
  6. The above command ran successfully and then I started XAMPP back up, and started Apache
  7. Opened a browser, tried a few of my local dev sites — BAM! They were all fine. Cracked a cold one and drank the sweet taste of success…

To be honest, the first attempt to use mklink failed because I didn’t first move the \htdocs\ folder into the Dropbox tree. mklink expects and empty folder for it’s first param. Not moving the folder first resulted in this cryptic mklink error message: “Cannot create a file when that file already exists.”
A bit of Google-fu resulted in this helpful link: Complete guide on syncing XAMPP and MAMP using Dropbox. It’s a good read as well.

Also, this blog post, while not directly relevant, was also related and describes similar inspiration and ideas as my own: Develop Anywhere with Dropbox, NetBeans and Xampp

Note: it is OK to make a link (via mklink) to a folder that is not empty.

Cheers