This article is the third in a series of guides about my experiences using Subversion (svn) for Web Development. These are the articles in the series:
1. A Desktop-Laptop Solution for Web Developers – Using Subversion to Co-Exist (this article)
2. What is Subversion and How Does it Help in the Web Design and Development Process?
3. A Subversion Workflow for Web Developers and Web Development
4. A Review of SmartSVN – a GUI Subversion client for Windows (this article)
5. A Quick Review of Online Options for Hosted Subversion for Web Developers
6. A Brief Review of Assemmbla, an Online Subversion Hosting Company.
Being new to Subversion and especially with using it in a web development workflow with Dreamweaver, I wanted to make the most of SVN but without having to deal with the command-line. Generally speaking there are three major ways to go about using SVN.
1) command line – it’s great for those who use it but as a novice this wasn’t an option for me so I won’t discuss it further here.
2) TortoiseSVN
3) GUI Subversion client such as SmartSVN.
TortoiseSVN is a free option and it basically adds the SVN command set to the right-click menu. While I find this helpful now (after having been using SVN for a while), in the beginning I found TortoiseSVN a little confusing. The truth is that there really isn’t anything confusing about TortoiseSVN — but it takes a decent understanding of subversion and how it works in order (at least for me) to be comfortable with TortoiseSVN.
SmartSVN – a Subverion GUI Client for Windows.
So wanting to reap the benefits of SVN without having to worry about the implementation and interface I started looking for a GUI for Windows and I came across SmartSVN. The best way to show you how SmartSVN works (and how easy it is to use) is by going through my sample subversion web design workflow showing you screenshots along the way. Note that SmartSVN comes in two flavors, a free Foundation Edition and a paid Professional Edition at very reasonable $79. I will be using the Professional Edition for the examples below, and you can download a free trial edition to evaluate the Professional Edition.
Note that in this review I used screenshots from an actual production workflow, so some of the client information and server information is blurred out.
Let’s assume you already have a subversion server setup somewhere and you’ve already created a repository. One of the best things about SmartSVN is that it lets you immediately decide if you want to go directly into a Subversion project or if you want to browse a repository:
In this example I’m going to want to work on a specific project so I’ll go to the “New Project Window” option — which will let me select from the projects I’ve already setup, or setup a new project.
Because I’m going to work on an existing project, I’ll select one of the projects I already have listed [not shown] under the “Open existing project(s)” option.
Once you have selected a project (or created a new one) you are presented with the main SmartSVN screen. Here is where you will control your interaction with your SVN server/repository. You will have a tree-like view on the top left, a working area on the top right, a command output area on the bottom left, and a transaction list on the bottom right.
So now let’s assume that I went into Dreamweaver and made some changes to the files in my website. SmartSVN will show you what files have changed (and you can easily sort to see what’s changed and what hasn’t):
Note the revision number, the state “modified” and the path on the right side of the screenshot. SmartSVN can also help you see if you’ve added any files that are not yet versioned:
Because I don’t want to keep track of the dwsync.xml files, you can easily have SmartSVN ignore these files (an option in the main menu bar on top or an option in the right-click menu). But if you did want to add these files, you can also easily do so quickly.
So now that I’ve made a few changes, ignored a few and added a file or two, I’m ready to commit the changes. Committing is as simple as clicking a button and adding a commit message, so I’ll skip that here. But now let’s assume I’ve made the commit and I want to see a list of my commits (note that while the commit is happening and while SmartSVN is interacting with the server/repository, you will see the progress in the lower left part of the screen). You can now easily look at the lower-right area of the screen, the Transactions area to see what’s gone on with your repository (note you can maximize this view if needed).
So you can see quite a bit of information from this transaction list and you can also expand the “+” signs to get more information.
Now that I’ve committed my changes, I’d like to add a tag (so as to have a snapshot in time of my project). For more information about how I use SVN in my web development process you might consider reading this article series starting from the top — you can see a list of the articles at the top of this page.
Back to tags — let’s now create a tag. The easiest thing to do is to head to the Tag+Branch menu and click “Add Tag…”
to bring up the “Add Tag” options:
I like to name my tags like this: client_tag_1.05, with increments as needed. In the above example I used the name “sampleTag” and notice how SmartSVN automatically created a commit message based on my tag name. In this dialog box you are able to create the tag based on your working copy or the repository copy, and you can decide (at the bottom) how to manage it if the tag already exists. When you are done you can hit the “Add Tag” button to finish adding the tag.
Moving along, let’s take a look at the list of our tags in the repository. Note first that SmartSVN lets you pick which repository you want to look at (if you have separate repos):
But moving back, let’s look at the repository view of our project:
This is just a clipping but you can easily see the structure of my project, and if you wanted to you could click the “+” to see all of the tags that I have.
On the subject of tags, let’s go ahead and download a copy of a tag to the local drive so I can have an archive. You could easily copy your working directory, but don’t forget that your working directory has lots of special svn files that you may not want to necessarily keep in your copy (this is a function of subversion itself, not SmartSVN). Let’s now walk through the export process. The first thing I did is I went to a tag in the repository view and right-clicked on “check-out” (incidentally you also could use this command if you wanted to create a working copy based on a tag).
I then added a local directory and set some options:
and then finalized my choices. Under the “Export only” selection I left the selection as “native” — which basically exports the tag as it is — but without the svn files.
Lastly you can view a summary report before you finish the creation of the local copy of the tag:
Foundation Version vs Professional Version
I spent time with the Foundation Edition and the Professional Edition and I found that the Foundation, while free, is greatly limited compared to the Professional Edition. The Foundation is excellent as a repository browser and for basic management, but for creating tags and for more complex operations, the Professional Edition is needed to take advantage of these tasks with a GUI.
Conclusion
Subversion is a fantastic way to implement revision control into the web development process, but can be confusing and a little overwhelming for the novice user. For this reason the use of a GUI such as SmartSVN is a great way to get going with subversion. SmartSVN is a paid option but is the best GUI that I’ve seen for interacting with Subversion; the $79 is well worth it when you consider that with SmartSVN, you can worry about your project, and let SmartSVN worry about interacting with your repository.
Disclosure. I originally approached Syntevo about writing a review of SmartSVN. I was given a free license to use the product.