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.
- 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.
- Install Drop box on both your computers. In addition, you can install it on your mobile device as well (optional) .
- 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.
- 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.)
- 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:
- 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. )
- 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:
- 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.
- Now in TextPad go to Configure > Preferences. Click on File on the left, and configure the options like this:
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.