Thursday, January 20, 2011

Painless code syncing from any device with DropBox and GoodSync.



+





=


For years I've been manually coding my web applications using Textpad and have recently discovered a way to configure a few tools to work wonders together. The typical process we are trying to streamline goes something like this:
  • While at work, launch my FTP client
  • Download all the latest files from the FTP server
  • Open the files in Textpad on the work pc and edit them.
  • Each time an edit is made, upload the file using your favorite FTP client.
  • Open the browser and refresh the page to check out the results of my new code.
  • When I'm finished, I have to make sure to close any open files.
  • Then on my home PC, I again launch my FTP client
  • Download all the website files to make sure my local copy is up to date.
  • Open TextPad and begin editing files. If I happened to already have some files open, I'll be prompted to reload the file since we just updated them with the new ones from the server.
  • Make sure all files are closed when finished.
  • Repeat again and again for the rest of my life..... or maybe not!
At the end of this process, the files on my work computer are now out of date, and if I forget to download the newest version from the server, I run the risk of overwriting newer files accidentally and will likely proceed to frighten others by loudly exercising my obscenity vocabulary. In addition, every minor change made to the code requires that I flip through several windows to check and see what effect the changes had on the page I'm working on. We are going to resolve both of these issues as well as add another cool feature: the ability to make minor changes automatically from my mobile device using any basic mobile text editor.


Here is the gist of what we're going to do:
  • Configure two computers (or more) to keep website files and folders synchronized.
  • Automatically update the website when changes are saved via FTP.
  • Automatically reload changes made in one location on the other PC(s) if the file was left open.
  • Allow changes to be made from a mobile device, and automatically sync changes with both computers and the web server via FTP.
Warning: It is important you follow these directions in order. Failure to do so could result in the exact problem we are trying to avoid: overwriting new files with old ones. It is recommended that you back up your files until you are able to test and make sure everything is working properly (although I have not have any problems implementing this solution on many devices).

  1. Download Dropbox via this link and sign up for an account! (Please use my referral link to get an extra 250mb of free storage space!). This will designate a folder on your PC to be a DropBox which will automatically synchronize between all PCS and keep a copy in the cloud for you so you never have to worry about losing those files.

  2. Install Drop box on both your computers. In addition, you can install it on your mobile device as well (optional) .

  3. Create a folder inside your DropBox folder called "websites". Create a folder inside of it for each website you would like to sync. Then just copy your various website root directory files into each new folder. Make absolutely sure you are using the most up to date versions of the files.

  4. Download GoodSync and install it on a computer that is always on. It does not need to be installed on both computers. (In fact, installing it on more than one computer could cause some issues since DropBox is synchronizing between computers they could end up with different "Created" and "Modified" timestamps and producing an endless sync loop. I did not test this.)  We will be using GoodSync to update your website via it's FTP sync feature. (Note: You may be able to configure this using a free sync application however I am partial to GoodSync and think it is very well done compared to some of the others I have tried. This site has a few reviews of a couple more popular sync utilities, however the instructions below are specific to GoodSync. If you do use a different sync client, it must support sync via FTP and have the ability to monitor your folders for any changes.)

  5. Configure GoodSync to automatically start when windows does. I also checked 'create left/right sync folders if they are not found' and 'auto hide mini window'. In Tools > Program Options, use the following configuration:



  6. Now we need to configure a sync job in GoodSync. To do this, we will first browse to the folder we want to keep synchronized on the left (Click browse in the upper left hand corner of the window). Navigate to the folder that reflects the root directory of the website you would like to sync (the site folder you created in your DropBox). Next, we need to set up the ftp connection to the web server for this particular site on the right side. Blick browse on the upper right side and enter your host, username and password. Click the "go" button once your info is entered and you will be given a directory listing of the remote server. Click on the root folder that matches the folder you will sync with the folder for that website located in your DropBox. Click ok to get out of that screen and you will see the new sync job listed in GoodSync.

    (Please note that if you have a "websites" folder in your DropBox with multiple websites in it like I do, you cannot sync all of the sites at once since each website will have a different FTP host, path, and credentials. )
  7. Click "Analyze" and make sure it is finding the matching files properly and there are no errors. If everything looks good, click the "Auto" button and tick the box to sync on file change like so:



  8. If you have additional websites you would like to sync, return to step 6 and follow the same process and create new sync jobs for each site.

  9. Now in TextPad go to Configure > Preferences. Click on File on the left, and configure the options like this:



    I change these settings so that if I leave a file open and change it from another location, when I return to the original PC, the updates are reflected without having TextPad prompt me to reload the file. It's all automatic. This of course you will want to do on each PC you will be using to write code. Also I'm sure  there are many other great text editors that support this functionality. Feel free to let me know in the comments.
That's it! So long as GoodSync is running, any changes to a DropBox folder you have configured to sync with GoodSync will automatically be uploaded to your website no matter where the change was made be it at home, at work, or even from your mobile device. I can now edit my website from my mobile phone, ipod, ipad, or any device that supports DropBox without the need to transfer any files at all. Just edit, and save!


I realize there are IDEs out there with plugins that handle much of this as well as text editors with FTP functionality built in, but for me this is the ideal solution. The tools are lightweight and fast (in contrast with many IDEs out there) and once it is configured it is exactly what I wanted.

Hopefully someone finds this as helpful as it was to me =)

6 comments:

Oxnor said...

If you have all computers in LAN you can use standalone application for folder sync. It's more fast and flexible.

Luke said...

@Oxnor this is certainly true. I wanted a solution that would work absolutely anywhere. I'm also writing a script in PHP that will monitor your web directory, and alert you if changes have been posted to the page. Once it is finished I'll update the article and share the code.

Drew Gauderman said...

Thanks for the write up. Just what i was looking for to make things easier :)

Sandi in MT said...

I have used Good Sync for 7 years- outstanding product on my PCs and now my Macs. I am losing iDisk and need another solution so relieved to know that Good Sync and Drop Box work well together. Thanks!

Eric Warnke said...

Hey Luke, thanks for the article. I found you through the Dropbox forums. We've been looking for a way to automatically backup our websites to Dropbox as well. Unfortunately, like you wrote, we had to install software to make this process "automatic". In the end we ended writing a cool service to help everyone else with the problem. We have a landing page up at http://mybackupbox.com, hopefully it'll benefit some of your readers :)

flowmark said...

Indeed, brother!!! This way of updating websites is what I have just moved to myself, bye bye stupid ftp client! it's BRILLIANT!

And doodsync is the only dropbox-like (i.e. realtime) FTP syncing app I've found that is concsistently reliable and fast and smooth (enough). other solutions have either deal-breaking bugs or glitches or feature lackings - or it's in development, like SyncAny!