Using Subversion with Adobe Dreamweaver CS5 – Part 2: Configuring Dreamweaver to use Subversion

This is Part 2 in a three-part series on using Subversion with Dreamweaver CS5. Part 1 provides a general introduction to Subversion and the concept of version control systems. This part shows you how to configure Dreamweaver CS5 to use a Subversion repository. Part 3, explains how to create your own repository.

When you are working on a project as part of a large team, there is typically a member of the team who has already set up a Subversion server and repository and can provide you with the connection method and credentials to the remote repository. Dreamweaver CS5 supports four major Subversion connection protocols: HTTP, HTTPS, SVN, and SVN+SSH.

In my experience most environments have Subversion set up in conjunction with Apache and will be supporting the HTTP or HTTPS protocol methods for connecting to the Subversion server. There are other methods for connecting to a Subversion server so be sure to check with your Subversion administrator for connection details. In the examples in this article, I use the HTTP method to connect to the repository.

Unlike a designer/developer working with a large team, individual developers will likely already be using Dreamweaver to manage their websites and will have much of the site definition already set up, but they will need to set up a Subversion repository. This may also apply to the senior developer at a firm who is responsible for the initial creation of the Subversion repository.

It is important to understand the creation of both a repository and the initial check-in of some web content. This process, however, is somewhat more advanced so it is included as the final part of this article series. For this initial check-in of content I already have a website set up in Dreamweaver and will enable Subversion support to start using the Subversion client in Dreamweaver CS5.

In Adobe Dreamweaver CS5 the configuration settings for the version control system are managed as part of the site definition. Each website under management can use different Subversion settings.

Assuming that some content is already checked into the repository, as a new member of the design/development team you will want access to this existing web content and code.

In Dreamweaver, choose Site > Manage Sites to open the Site Definition dialog box (see Figure 1).

To create the new site definition for the site on which you will work, click New and then Site (see Figure 2). If you are presented with the Basic view, click Advanced (near the top of the dialog box) to switch views and access the settings for version control.

Under the Category section on the left, select Local Info (see Figure 3). Next, enter the local information for your site, including the name, the local root folder, and the HTTP address. In this example I use voltmer.com, and the settings are as follows:

• Site name: voltmer.com
• Local root folder: /Users/Voltmer/Web Sites/voltmer.com
• Default images folder
• HTTP address: http://www.voltmer.com

Note: I create a new empty directory for voltmer.com in my Web Sites folder. This is empty because I have yet to check out my web content from the Subversion server. Also, I leave the Default images folder field blank because there is no folder there yet. It will come from the repository, and I will come back to edit the value later.

After setting the local information, click Remote Info on the left, and set Access to None (see Figure 4). This may seem odd to some experienced Dreamweaver users who are used to pushing data directly from Dreamweaver to their production website. For a larger organization, however, it is common to have a subteam or an automated script that performs an update from the Subversion server and then pushes a tagged set of files to the product server.

If you do want to use a remote site for testing or staging you can configure these settings as you have done in the past.

If you are the person (or one of the people) who is responsible for pushing updates to production, you may also want to configure the production server in this interface; however, I recommend that you consider using an automatic build system for deployment of your content to your production site.

Next, choose Version Control and select Subversion as your access method (see Figure 5). You only have one option, because as of the writing of this article Dreamweaver CS5 supports only one VCS.

Specify the various connection settings required to connect to the Subversion repository including protocol, server address, and so on. Your Subversion administrator should be able to provide you with these values. My settings are as follows:

• Access: Subversion
• Protocol: HTTP
• Server address: localhost
• Repository path: /repo/voltmer.com/
• Server port: Default
• Username: voltmer
• Password: <secretpassword>

Note: The server in this example is running on the same machine as the client, so I use localhost as the server name. Localhost is an alias that refers to the local machine.

To verify the settings work, click Test. If everything is configured properly, Dreamweaver will display a dialog box that reads "Server and project are accessible!" (see Figure 6). If you do not see this message, refer to the Dreamweaver CS5 documentation or ask your Subversion repository administrator to confirm configuration settings.

To finish click OK in the Site Definition dialog box.

Note: You may need to modify settings for your site definition in other categories, but that configuration is beyond the scope of this article.

At this point you will not have any content in the Local Files area of your Dreamweaver CS4 interface because the content has not yet been checked out from the repository. To check out content make sure you are in the Local Files area of your website, right-click or Ctrl-click the Site folder at the top of your directory structure, and choose Version Control > Get Latest Versions (see Figure 7). This will synchronize your local directory structure with the content from the Subversion repository on the server. Now you have checked out the code and are ready to start making edits.

Figure 8 shows the results of my check-out for voltmer.com. I am now ready to make a change to some of my content.

Specifically, I have decided to update part of the index.html file on voltmer.com. I forgot to change the title of my main page from the defaults, and because I don't like what is there now I am going to make a change from:

to:

To make this change, I double-click the index.html file in the Local Files area to open it for editing. By default I see the Design view. At the top of the page I change the Title to "Voltmer's Website". Alternatively, I could have switched to Code view or Split view and made the edit directly in the HTML. Any of these actions will result in a change to the underlying file. After the change is made, I close the file and save the changes.

At this point my Local Files area changes slightly. Dreamweaver CS4 puts a check mark next to index.html indicating that I have made a change to the file (see Figure 9). This is a local change only; the files kept in the repository are unchanged. As far as the Subversion server is concerned the file has not yet been changed. Other users can check out their own copies of the site and make changes, but they won't see my modification to index.html.

I want to submit my changes back to the repository for eventual publication to the production website, so I need to check in (commit) my changes back to the repository.

To do this, I right-click on the changed file and choose Check In (see Figure 10). I am then prompted to provide a Commit Message. This message is stored along with the changes to the file in the repository as a record of the changes made to the file between check-out and check-in.

Professional designers and developers know that clear, concise change descriptions are critical because they help everyone on the team understand what changes were made and why. You can even use the comments yourself to recall the details of one of your own past edits. For this change I type, "Changed the title of index.html" (see Figure 11).

When I type in the dialog box I can click Commit and my changes are submitted (committed) to the repository. When you do this yourself, you will notice that Dreamweaver CS4 removes the check mark next to the file in the Local Files list to indicate that the file is no longer out of sync with the repository.

Two of the most powerful features of Subversion are diff and revert. The diff feature allows the designer/developer to compare two different versions of the same file to identify the differences between the two versions. If you've ever wondered what changed between a broken version of your website and the version that used to work, you know why this is extremely useful. With the ability to diff a file, you can see what changed easily.

With the revert feature you can go back to an earlier version. For example, if you have made a change that a client does not like, you can simply restore the old version of the page. Instead of keeping multiple older versions, I can find the old copy in the repository, compare the old copy to the current copy with diff, and then revert to the older version.

Continuing with my example scenario, I have received a call from my customer who wants the title of the home page like it used to be. I am working on a number of sites and I can't remember exactly what I changed, so I do a diff.

I right-click the file index.html and choose Version Control > Show Revisions (see Figure 12).

In the Revision History dialog box, I select the two revisions to compare and click Compare (see Figure 13).

Since I have not yet defined an application for file comparison, Dreamweaver asks if I want to choose an application (see Figure 14). I do want to use one that I have installed. I am using TextWrangler from Bare Bones Software, but you can choose the tool that best meets your needs.

For details on how to install various diff tools, click Help in the File Compare category of the Dreamweaver Preferences dialog box (see Figure 15).

After I have configured my diff application, any time I choose Version Control > Show Revisions Dreamweaver will launch the application, enabling me to compare the different revisions of the file (see Figure 16).

After reviewing the differences, I have decided that I need to revert to the previous version. In the same Revision History dialog box I select the older version of the file that I prefer to the current version and click Promote to Current. Dreamweaver prompts me to confirm that I want to revert to the selected version (see Figure 17).

When I click Yes, the revision history is automatically updated to show the change of the file to a new revision number (see Figure 18), but with the same contents as the older file.

Now, if I edit the file I can see the original <title> tag instead of the change I made earlier.

You can also revert a local file that has been changed by right-clicking on it and selecting Undo Check Out.

Where to go from here

To learn how to set up your own repository, go to Part 3 of this article series, Configuring Apache for Subversion support.

For more information on Subversion and version control, check out the following resources:

• The Subversion site
• The Subversion book
• Version Control with Subversion
• Subversion Version Control
• Practical Subversion