Subversion for web design – how we do it @ Karyx

Update: Dreamweaver CS4

The latest version of Dreamweaver (CS4 currently) now has integrated Subversion support, thankfully, which means that cloaking the .svn files is no longer necessary as DW will ignore them by default. You can configure the site to connect directly to your subversion server but in our experience unless that is a repository on the local network, it adds a painfully long pause every time you try to open a file whilst it’s checking it out from the repository. Better to use Tortoise or Versions, methinks but plus points for Adobe for incorporating this feature.

Subversion using Versions, Tortoise, Beanstalk & Dreamweaver

You can set up your own local subversion server but we find it’s easier to have our Subversion repositories hosted on the net – that way we can access them at any time. Here at Karyx we use a service called Beanstalk ( http://www.beanstalkapp.com/ ) – it lets you have a number of repositories for free and shows in a very pleasant and picturesque way all the changes that have recently taken place on the repository. You can even use it to compare different versions of files, to see where a change may have been made.

SUBVERSION CLIENTS
We recommend TORTOISESVN for pc (it integrates directly with Explorer in a context menu) or VERSIONS for mac (Versions is a brilliant piece of easy-to-use and well-engineered software). Get them here:

TORTOISE SVN (pc)
http://tortoisesvn.tigris.org/

VERSIONS (mac)
http://versionsapp.com/

SUBVERSION SET UP
Setting up a local repository can be a bit of a faff but once it’s in place, it’s pretty painless to use. Our recommended method is:

1. create an empty repository on the server (beanstalk)
2. check it out locally to a new folder on your development machine
3. copy your project files into the new folder
4. highlight the files, right-click and choose “add” to add them into your repository
5. “Commit” the files

Note that when you check out the repository, it will ask you for a destination folder. Bear in mind that both TortoiseSVN and Versions will create a subfolder with the name of your repository in it, in whichever destination folder you choose, so you can nominate your root ‘Projects’ or ‘Sites’ folders as a destination. I know this sounds a bit arcane but if you create a dedicated folder to put the repository in, you will very likely end up with a path like

c:\Projects\MyNewProject\MyNewProject\

Now you will find you have a local subversion repository that is connected to the subversion server. Any file changes within this folder will now be tracked, although you will have to “Commit” any changed files to the subversion server to make the changes official.

BASIC USE OF SUBVERSION
Subversion maintains a repository – it keeps a collection of hidden folders on your local machine that contain hashes of all the files. Whenever a file is changed from the most recent version, it makes a note of this and then when you do a “Commit” – to post changes up, it pre-selects all the affected files. You can write a comment by each commit and this is recommended as it helps when you are reviewing changes to find out what exactly you did three months ago. You can also choose to “Ignore” files and folders (3rd party applications or javascript frameworks, etc).

When other users make changes to the files, you should highlight your local folder (in Explorer | Windows), or choose the working directory (in Versions | Mac) and then choose “Update” to go and grab the latest version of the changed files. Versions helpfully indicates remote file changes in it’s file list.

DREAMWEAVER GOTCHA
Dreamweaver works pretty well with Subversion and Subversion wipes the floor with Dreamweaver’s Check-in/Check-out features. There’s a 3rd party extension you can install to do Commits and Updates but our preferred method is to use the software described above.

One thing though – if you are testing your code by deploying to a remote server and you select a folder to upload, Dreamweaver will also upload the hidden version control folders (.svn files) – not good. A work around is to download and install this extension:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1018603

This works by cloaking the subversion folders, so you need to have cloaking enabled in Dreamweaver. Also it’s not automatic, so when you have your basic site checked in to Subversion, you need to go to the Commands menu and then choose Cloak SCM Directories option. You will need to do this whenever you create a new directory. Alternatively, just make sure you upload selected files and not folders.

MORE ON SUBVERSION

There’s a definitive guide to subversion here:
http://betterexplained.com/articles/a-visual-guide-to-version-control/

or a “designers” guide here:
http://www.thinkvitamin.com/features/design/subversion-for-designers

and here’s some advice on commenting your commits:
http://www.wildbit.com/blog/2008/11/11/the-importance-of-commit-messages/

I hope this all helps. Subversion is definitely worth getting into if you want to stay confident in your code!

One thought on “Subversion for web design – how we do it @ Karyx

Leave a Reply