Sync XAMPP Data With Dropbox

I use XAMPP for my local website development environment. It’s a wonderful free tool to use for this purpose, since I need access to a local WordPress distribution and the associated MySQL database to experiment with with themes and plugins.

One challenge I faced had to do with the fact that I use three different computers for development activities. Keeping data in sync across these platforms is important to me. The natural solution is to install Dropbox (referral link) on my various machines. (If you’re not familiar with Dropbox, be sure to read about maximizing free space before installing it.)

To be clear about what I set out to accomplish, I wanted to sync (A) my local web pages; and (B) the MySQL database across multiple machines. I did not want to sync the entire XAMPP distribution with all of its binaries. It is not difficult to make this work correctly, but it does require modifying a couple of configuration files.

Before we begin, I will assume you have XAMPP successfully installed and running on multiple machines independently (successfully running the HTTP server and MySQL database components). Our goal, then, is to make all of your installations access a single directory structure within Dropbox. A word of caution with all projects of this sort is that you should backup all of your data before making changes to your configuration files.

For my setup, the directory in which XAMPP is installed happens to be the same on all of my machines. Similarly, the directory in which my Dropbox folder is located is the same across all machines. This is not a requirement to make this work, but you may need to keep this in mind if your setup is different. My folder locations are:

XAMPP Installation =   C:\xampp

Dropbox Location   =   C:\Users\Patrick\Dropbox

Step 1 – Create web page directory in Dropbox folder. The first thing you need to do is set up a directory in your Dropbox folder to hold your web pages (HTML, PHP, etc.). For this example, I will create a folder named “C:\Users\Patrick\Dropbox\web-content”.

Step 2 – Change XAMPP configuration to point at this folder. There are two variables that need to be modified in the XAMPP configuration file. Edit “C:\xampp\apache\conf\httpd.conf” and modify DocumentRoot and Directory so they point to the new folder inside of Dropbox. For my setup, it looked like this:

OLD ENTRIES (search for them in "httpd.conf"):

    DocumentRoot "C:/xampp/htdocs"

    <Directory "C:/xampp/htdocs">

NEW ENTRIES (change lines above to this):

    DocumentRoot "C:/Users/Patrick/Dropbox/web-content"

    <Directory "C:/Users/Patrick/Dropbox/web-content">

Step 3 – Restart Apache and test. From the XAMPP control panel, stop and restart the Apache server. Create a file named “test.html” inside of your new Dropbox/web-content folder. Open “http://localhost/test.html” in your favorite browser, and you should see the contents of your test.html file.

Step 4 – Sync Dropbox across machines, and modify other configuration files. At this point, it should be easy to make your other computers access the same Dropbox folder. Go to your other machines and edit the “httpd.conf” file in the same was as you did on the first machine. If your Dropbox folder or XAMPP installations are located in different places than they were on your first computer, adjust directory names accordingly.

If you don’t need MySQL support for your development efforts, you can stop here. If you want to use something like WordPress, or another package that requires MySQL, continue with the rest of this process.

Step 5 – Turn off the MySQL server. Before moving things around, make sure the MySQL server is turned off from the XAMPP control panel.

Step 6 – Copy MySQL database into Dropbox. From your first machine, locate the directory containing the actual MySQL database. Copy that directory in its entirety to Dropbox. In my case, I simply had to copy the folder “C:\xampp\mysql\data” to “C:\Users\Patrick\Dropbox\web-database”.

Step 7 – Modify the MySQL configuration file. Edit the file “C:\xampp\mysql\bin\my.ini” and modify three variables to point at the new database folder inside of Dropbox.

OLD ENTRIES (search for them in "my.ini"):

    datadir="C:/xampp/mysql/data"

    innodb_data_home_dir = "C:/xampp/mysql/data"

    innodb_log_group_home_dir = "C:/xampp/mysql/data"

NEW ENTRIES (change lines above to this):

    datadir="C:/Users/Patrick/Dropbox/web-database"

    innodb_data_home_dir = "C:/Users/Patrick/Dropbox/web-database"

    innodb_log_group_home_dir = "C:/Users/Patrick/Dropbox/web-database" 

Step 8 – Restart the MySQL server and test. Restart the MySQL server and make sure everything is working as it was before.

Step 9 – Modify MYSQL configuration on other machines. Finally, make the same changes to the “my.ini” file on your other machines.

That should be it! A word of caution, though, is that these files should never be modified on more than one machine at a time. And more importantly, the MySQL server should only be running on one machine at a time. Conflicts from multiple active MySQL servers would likely wreak havoc.

Good luck!

← Previous post

Next post →

22 Comments

  1. Damian

    Thank you so much Patrick! It works 🙂

  2. Good day Patrick.

    Your nicely explained tutorial helped me to sync both my development computers with Dropbox.

    It works very well, when it is a wordpress single site. Once multisite is enabled, I get a error message as below for all other sites:

    ” This webpage has a redirect loop”

    I don’t really know, where I went wrong…Any advice??

    Thanks.

    • Sorry, but I’ve never set up a multisite WordPress installation, and don’t really know where to look. Please let me know if you find a solution!

    • Sorry for dropping in 10 months after original post, but I had the same situation and it seems that is it important to set permalinks before starting your network.

      Also, when I complete my work on one computer, I start and stop both Apache and MySQL twice before starting my Drobox app for sync.

      I hope that this will help 🙂

      And yes: Patrick, thank you so much for this article 🙂

  3. I have an error:
    Table ‘name_tab’ doesn’t exist

    • Hmmm. This is a little out of my element, since I don’t really know the internal workings of XAMPP all that well. When does the error appear? That sounds like a MySQL error, so I assume everything works fine up through Step 4? I guess the only suggestion I could offer would be to start over and try it again with a clean slate.

      *OR* something that just occurred to me… these instructions were written a while back and it may be that new versions of XAMPP make use of different entries in the configuration files. I believe the instructions above were written for XAMPP Version 1.7.7.

  4. Hi Patrick,

    This is great, thanks. One question. I see that I can access all of the management tools in the browser as before (e.g. “http://localhost/phpmyadmin” to access phpmyadmin). However, how can I change the redirect for the xampp browser administration? In the original setup, “http://localhost/xampp” gives you the xampp administration area.

    Thanks in advance,

    Ryan

    • Hello, Ryan. Thanks for the comment/question. Unfortunately I am shooting from the hip with this one. Was there a subdirectory called “xampp” in the original htdocs directory? If that is the case, you should be able to copy that subdirectory into your new Dropbox html directory (the one I am calling “…../web-content” in this writeup). Hoping I understood your question, and this may give you a hint to get it working the way you would like.

  5. Worked Like a charm 😀 Thanks man

  6. Your my hero! I was messing around with a USB stick with a portable version of XAMPP, just went way to slow and buggy.. This solves all my issues!! thx a bunch!

  7. Pretty basic and nice for beginners.

    Another way would be with a mysql online as master, the local mysql installs to be as second servers with replication with online. For the code I use a private git server setup on same server as the online mysql and I can work with separate branches in some cases and have more flexibility. (so would be advanced version).

    Still, @Joe’s tip to use a portable USB stick is more easier for beginners, but I strongly advise to use an external USB 3 HDD. USB sticks are very slow compared to HDD and very expensive for larger storage space, and in time your work files and databases would take lot of space (I have over 1TB right now only in databases and code, and about 4TB for all original documents and other files from customers).

  8. The htdocs folder part works fine for MAMP (mac version of xamp) as well, but does anyone know which mysql files to change?

  9. Thanks a lot Patrick, be blessed bro!

  10. Two other ways.

    1. You could have created a shortcut in the dropbox location to the webserver root folder
    2. Or could have added necessary files to dropbox

  11. Sorry to state a dumb update but you need to correctly update the path for mysql configuration to “C:/Users/Patrick/Dropbox/web-database/data”….
    Excellent tutorial.

    • Thanks for the heads-up! Yeah, this post is a bit dated at this point. No doubt some things have changed and I have not kept up with software updates and all that.. I’ll try to set aside some time to do this in the near future. Thanks!

      • This is one of the best tuts out there for developers like myself who use more than one device for coding. Thank you Patrick. I see many workflows now include revision control system such as git. I’m not sure why you’d need it unless I suppose you wanted to share your workflow into an agile team environment.

  12. Thank you, thank you, thank you, thank you. I want to write this a thousand more times. Oh my God. Thank you so much for sharing this, dear Patrick! So straightforward and simple and I didn’t get lost once and it just worked and I just can’t believe it!

Leave a Reply

Your email address will not be published. Required fields are marked *