When working on web-based projects locally, developers are often faced with the burden of transferring the data across multiple development machines for one reason or another. In my case, I develop primarily on a desktop machine in my office but occasionally require access to the project files from a laptop or mobile device; this is especially true when working remotely or if needing to demonstrate a WIP to a client.
A typical web project consists of many static assets, dynamic scripts powered by a server-side language like PHP, and database-driven content powered by an engine like MySQL. Due to these interconnected components, constantly exporting and importing the databases from one machine to the next while also carrying over all of the updated page scripts and static assets immediately becomes a tedious and time-intensive commitment. Database synchronization can be especially cumbersome when needing to mirror user accounts, table and database privileges and other lower level details.
By utilizing a cloud storage service like Dropbox, the entire data synchronization process can be automated across devices to ease developer woes. This approach carries several other added benefits as well, including:
- Previous versions of files can be restored as needed in most cloud services. With Dropbox, for instance, the history of each file is preserved for 30 days on its standard plan, or a full year on its extended plan. This acts as a safeguard against accidental deletion or catastrophic programmer error.
- The project folder(s) can instantly be shared with other internal and external team members to streamline the development workflow. Of course, when dealing with complex team projects you will want to use a more apt solution that manages advanced source control and revisioning.
- By fully isolating the content from the applications, there no longer exists any concerns over OS formats and forgotten backups. By default, the SQL and website data gets nestled inside the Apache/MySQL installation folders commonly placed on the root OS drive, making it a ripe candidate for forgetfulness upon format (speaking from several bouts of personal experience).
NOTE: The tutorial that follows uses WAMP (Apache/MySQL) and Dropbox on a Windows machine, but the same general concepts will apply regardless of cloud service provider, web software or operating system.
Installing the Required Software
To get started, you'll want to install the server software and cloud storage software on each device you plan to use during development. Again, this tutorial uses WampServer and Dropbox.
- Download and install WampServer. At the time of this writing, the latest available version is WAMP 2.5, which includes Apache 2.4.9, MySQL 5.6.17 and PHP 5.5.12. You are free to install these packages manually or use an alternative package like XAAMP; I have grown to appreciate the quick-access options of WAMP for server configuration and service management. The installation process is straight-forward, with the only customizable options being the installation directory, desktop icon and quick launch icon. The default path of c:\wamp\ is a smart choice. If you do change it, I encourage you to refrain from using any directories with spaces, which can sometimes muddy up path referencing and complicate navigation. You will also want to avoid installing it to any protected directories (i.e., 'Program Files') which can cause read/write issues.
Note that there is a 32-bit and 64-bit version of WAMP. You do not have to install the 64-bit version to match your operating system. In almost every common scenario the 32-bit version is perfectly sufficient and in some instances provides better plugin and extension support as not every 32-bit component has been built for 64-bit architecture. There's also another small blunder in the 64-bit version of MySQL distributed with WAMP as I will note later on.
- Download and install Dropbox. At the time of this writing, the latest available version is Dropbox 3.4.4. The install process is quick and effortless. Once installed and running, you may wish to change your default Dropbox folder location. To do this, click on the Drobox icon in taskbar, click the Gear icon in the top-right and select Preferences. On the Account tab, click the "Move..." button to specify a new location and then select OK.
My preference of choice is to keep the Dropbox location on a separate hard drive to avoid having to backup or re-download all of the Dropbox storage after a format. This way after installing a new operating system I simply update the storage location to my external path created previously and it is all set.
Getting Synchronized
With the software up and running on all necessary devices, we now get to the meat of the procedure by altering various server paths to point to the cloud storage location.
Before starting, make sure all services are STOPPED in WAMP and exit WAMP Manager, if you had previously opened it.
- Create a new parent folder in your Dropbox storage location to house the web data (e.g., 'wamp'). Within this folder, create two subfolders to house the database store (e.g., 'db') and web assets (e.g., 'www'). To keep things tidy, I keep the 'wamp' folder and its subfolders in an 'appdata' folder on Dropbox, which is where I also house data for other developer tools and applications including Sublime Text Editor.
- Navigate to the Apache Configuration folder and open the file httpd.conf in Notepad++ or your favorite plain text editor (try to avoid using the default Windows Notepad; it may not render the linebreaks properly and instead appear a garbled mess). The default location of this file when installed via WAMP 2.5 is: C:\wamp\bin\apache\apache2.4.9\conf\httpd.conf .
- Locate the DocumentRoot declaration around line 230. Change the path to the 'www' folder you created within your Dropbox storage in step #1. Always use forward slashes here and include the trailing slash at the end. Save the file and close the document. This will now point all http web requests to the new Dropbox-based 'www' location. My line appears as:
1 |
DocumentRoot "F:/Matt/Dropbox/appdata/wamp/www/" |
- After this line and past the first <Directory /> clause, you will see another <Directory...> entry around line 252 with the original 'www' path within it. Change this line to match the same as entered for the DocumentRoot above:
1 |
<Directory "F:/Matt/Dropbox/appdata/wamp/www/"> |
- Now, navigate to the MySQL root folder and open the file my.ini in a plain text editor. The default location of this file when installed via WAMP 2.5 is: C:\wamp\bin\mysql\mysql5.6.17\my.ini.
- Locate the datadir declaration around line 38. Change the path to the 'db' folder you created within your Dropbox storage in step #1. Always use forward slashes here and omit the trailing slash. Save the file and close the document. This will now point all SQL requests to the new Dropbox-based 'db' location.
1 |
datadir=F:/Matt/Dropbox/appdata/wamp/db |
WARNING: If you installed the 64-bit version of MySQL using WAMP, you MUST change line 26 of my.ini from [wampmysqld] to [wampmysqld64]. This is an apparent oversight in their 64-bit release and without changing that value to match the 64-bit daemon, the personalized settings will never be applied and it will continue reading database information from the MySQL install directory.
- If using WAMP, open config.inc.php from the Scripts directory of the WAMP install with a plain text editor and change the $wwwDir variable declaration around line 61 to the 'www' folder you created within your Dropbox storage in step #1 (you must also remove the '$c_installDir.' portion so it resembles below). Save the file and exit. This will update the quick-access shortcut from the WAMP icon to open your web directory contents.
1 |
$wwwDir = 'f:/Matt/Dropbox/appdata/wamp/www'; |
- Now, copy all of the contents of the wamp/bin/mysql/mysql5.6.17/data directory to the 'db' directory created in the Dropbox storage folder, and copy all of the contents of the wamp\www directory to the 'www' directory created in the Dropbox storage folder.
- Open the copied 'index.php' file from the 'www' Dropbox folder in a plain text editor. Change the $server_dir variable around line 40 to reflect your root WAMP install. Save the file and exit. This will enable you to access the default WAMP index page with quick access to useful tools like phpMyAdmin and general server information.
1 |
$server_dir = "C:/wamp"; |
- Finally, launch WAMP and start (or restart) all services. You should now be able to access your local server via http://localhost/ and perform all database operations through phpMyAdmin or custom scripts. All of the data will now be saved to the Dropbox location and accessible from the other machines, automatically syncing between them.
You will have to repeat all of the steps above for each device you wish to synchronize with. But once configured, you will be able to edit databases and site files on any given machine and all changes will be applied on the other machines with no other user intervention required.
Excellent article! Considering that I have four separate machines where I do development from!
Thanks!!
Just one thing: at the step 9, it only works with a trailing slash at the end of the path (like was mentioned at step 3: "Always use forward slashes here and include the trailing slash at the end.").
So, the correct is:
$server_dir = "C:/wamp/";
Having made this observation, everything is working perfectly here, both in Dropbox as in GoogleDrive !
Thank you for this article, Randy !
Ooops! Randy was the other guy at the comments... #facepalm
So... Thanks for the article, Matt!
In time, I would like to show one adjust I did at the step 9, around line 338:
$projectContents .= '<a href="'.($suppress_localhost ? 'http://localhost/' : '').$file.'" target="_blank">'.$file.'';
With this adjust the "Your Projects" will open corretly and in a new tab. 🙂
In time, I would like to show a little adjust I did at the step 9, around line 338:
$projectContents .= ''.$file.'';
With this adjusts (localhost/ and "target="_blank") the “Your Projects” will open corretly and in a new tab. 🙂
OPS! I did it again... #facepalm
Please disregard the line of above comment.
Consider line 338 of the first comment and the observation of the second.
Thank you Matt, Your post is very helpful 🙂
Great How-To. Tried this process following a few other posts before I found this one. The others all skipped a couple steps and woudln't work. This one + $server_dir = “C:/wamp/”; worked perfectly!!
Thanks!
Amazing stuff mate you just saved me 999 hours of f*****g about!!! Top bloke 🙂
Thank you very much, you have helped me a lot! Your text is very nice structured and clear.
As guy before me said - you saved us from wasting a bunch of time..
Cheers! 🙂
Hey, I have an issue, after doing this Im not able to enable the rewrite module
A little contribution.
Some error apears on index.php, on www directory.
On config.inc.php file, on wamp/scripts directory, you may need to change the lines 4 to 7.
Change relative path ('../filename.ext') to absolute path of install directory of wamp ('C:/wamp/filename.ext').
Thank you Gabilan, you made my day 🙂 you are great. and thank you so much Matt for best article. <3
Will this work with Box Sync too?
I've been trying to make it work but for some reason I cannot see the "www" file through localhost, even when changing the DocumentRoot & Directory to:
DocumentRoot "C:/Users/arturoa/Box Sync/appdata/wamp/www/"
Although, when I click on "www folder on WAMP" it takes me to the correct place in my Box Sync folder. I've followed all steps but it still thinks it's on "c:/wamp/"
Any thoughts?
"WARNING: If you installed the 64-bit version of MySQL using WAMP, you MUST change line 26 of my.ini from [wampmysqld] to [wampmysqld64]."
This does not work for me. The MySQL service will not start if I change the line. Any thoughts?
You're so cool! I do not think I've read something like this
before. So good to discover someone with some genuine thoughts on this topic.
Seriously.. thank you for starting this up. This site is something that is required on the
web, someone with a bit of originality!
This is a million dollar tip! Thanks a million Matt! (:
Hi, thanks for this great tutorial!
Has anyone tried this kind of setup whilst using source control software such as GIT?
How does the source control software on each machine cope with the file changes/commits made via a different machine? Does/can this kind of setup be a source for conflicts?
Thanks in advance for any replies.
Hi, aftеr reading this awesome piece of writing i am also
happү to share my eҳpeгienxe here with collᥱagues.
Hello, I did the procedure, but the database did not appear
Hi there,
Somehow, I've got the database stuff to replicate, but all uploads are still pointing to the installed root, not the Dropbox version (and so only show up locally). Any idea what I might be doing wrong?
Dan
Juist a quick update. If you're running multiple sites using virtual hosts, you will also need to edit httpd-vhosts.conf, which will live somewhere like:
C:\wamp64\bin\apache\apache2.4.23\conf\extra
For each virtual host you need to point DocumentRoot and Directory to your 'www' in your Dropbox folder. The code will look something like this:
# Virtual Hosts
#
ServerName localhost
DocumentRoot C:/Dropbox/appdata/wamp/www
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
Require local
#
After i follow all the steps why i came up with this error?
Unable to open WampServer's config file, please change path in index.php file
I followed the instructions and used this to sync my Desktop and my Laptop so that I have the same Localhost at both the places. Sometimes I am having problem in my Laptop as Dropbox says 'Can't sync ib_logfile0 (permission denied)'. But this error never occurred in my Desktop. What is that file for? Can someone please help me.
Hi. The ib_logfile0 and ib_logfile1 files store recent transaction records for MySQL/InnoDB operations, and are used for recovery in case any of them fail when processing (rare). If both locations are trying to read/write from this file at the same time there may be access errors from Dropbox. You can try the following:
1.) Change the physical location of these log files so that they do not need to be synced onto Dropbox by pointing them to a local file directory outside of the Dropbox folder. You can do this by editing the "my.ini" file (mysql\bin\my.ini) and changing the path for "innodb_log_group_home_dir" - Make sure the path already exists on your computer before changing it here and you should use an absolute path to point to a different location (e.g., "C:/Temp/MySQL"). Then these log files will only store locally and should not impact any other aspect of the databases; the data itself will still be synced via Dropbox. Make sure to restart MySQL after making the change.
2.) AND/OR pause Dropbox syncing on the active computer before starting the Apache/MySQL server. Then when you are finished working on the server for that device, shut down Apache/MySQL and enable syncing again. This will ensure that no files attempt to sync from both devices at the same time as can happen if you have the servers running on each and syncing data in real-time through Dropbox. It is a little less convenient but if you do experience any write conflicts with the servers running then this will help. Dropbox is not great when it comes to syncing rapidly changing files from multiple machines and sometimes when it attempts to the files will be locked by other processes which can cause conflicts.
I used to be recommended this web site by my cousin. I'm not sure whether this put up is
written by him as no one else recognize such special approximately
my trouble. You are wonderful! Thanks!
Hi, for all time i used to check weblog posts here in the early
hours in the break of day, because i enjoy to gain knowledge of more and more.
In newer version of wamp, changing DocumentRoot in httpd.conf did not change DOCUMENT_ROOT. Even after restarting, it stayed as "c:/wamp64/www/".
Instead, the DocumentRoot is set in this file:
c:\wamp64\bin\apache\apache2.4.18\conf\extra\httpd-vhosts.conf
To change the localhost directory, change these to your path:
DocumentRoot c:/www