Foliotek Developer Blog

Visual Studio Custom Start Page

Feature Driven Development

More than a year ago, the Foliotek development team moved to a Feature Driven Development Cycle (FDD). If you’ve never researched into this form of agile development I would recommend looking into it, because I won’t go into too much detail about it. Here’s a quick overview of how we use this development process here at Foliotek (assuming you have at least a basic understanding of SVN):

In each project repository, trunk is our production copy. This means that trunk needs to build without any errors, and is under a strict testing cycle. When we start work on a feature we will create a branch off of trunk. All the work for that feature goes into that branch, therefore we’re never checking in incomplete code into the production copy. This means that several developers can work on multiple features at one time, without interfering with each other. Testing can be done separately in these feature branches as well. After a feature has been approved, we reintegrate the branch into trunk, and it is ready for production.

The Problem

The problem we ran into with this cycle was the amount of time and effort that went into setting up a feature for development. We’d have to

  1. Create the branch with an ID based on the case in our project managment software.
  2. Check it out onto our computer (using TortoiseSVN)
  3. Set up an IIS entry (including virtual directories) so we could run the feature branch on our machine.
    This allows testers and developers to access the work at http://computername/task_12345

After all is said and done it takes 10-15 minutes just to set each branch up (not to mention maintain it), and some of us can have up to 5 or 6 features open at a time. This also gets really hard to manage when you’re working on multiple features for separate projects. Meanwhile other people are reintegrating their features into trunk, and in order to avoid conflicts in SVN you need to be constantly merging the latest changes in trunk into your feature branches. As anyone with merging experience in SVN can tell you, if you don’t do this reintegrating your branch can result in a ton of conflicts. It didn’t take long to realize that we needed a better way to streamline this process.

The Solution – The Foliotek Start Page!

We settled on developing a Custom Start Page for Visual Studio, that would help us keep track of all of our branches. It would also help us keep them updated, reintegrate them, and allow easier access to them. Since we’ve had so much success with this tool, we wanted to share it, in case any other teams were looking for a similar solution. This will be a hybrid introduction and setup guide. If you’re only interested in what the final product is, you can scroll to the bottom.
Note: We’ve not spent much time on the UI of this tool – you’ve been warned…

Prerequisites

  • Visual Studio 2010 (not Express Versions)
  • IIS 7
  • Tortoise SVN (1.6 or 1.7)

Before even downloading the start page, you’ll need to set up a settings xml document. Copy the contents of the following xml sample (or download the settings file) to the following location and replace all the values with your project’s details.

C:\Users\[USERNAME]\Documents\Visual Studio 2010\Settings\StartPageSettings.xml
(or whatever the path is to your Visual Studio 2010 Settings folder)

I recommend setting each Project element’s Path to an empty directory to allow the start page to start from a clean slate.

<?xml version="1.0" encoding="utf-8" ??>  
<settings>  
    <projects>
        <project>
            <name>Example Project</name>
            <shortname>example</shortname>
            <svnurl>https://svn.example.com/svn/example</svnurl>
            <path>C:\Users\USERNAME\Documents\Visual Studio 2010\Projects\Example</path>
            <webfolderpath>Web</webfolderpath>
            <solutionfolder></solutionfolder>
            <iisuser></iisuser>
            <iispassword></iispassword>
            <iisapppool>ExampleAppPool</iisapppool>
            <iisapppoolversion>4.0</iisapppoolversion>
            <virtualdirectories>
            <virtualdirectory>
            <name>Resources</name>
            <path>\\shareddirectory\resources</path>
            </virtualdirectory>
            <virtualdirectory>
            <name>Resources2</name>
            <path>\\shareddirectory\resources2</path>
            </virtualdirectory>
            </virtualdirectories>
        </project>
    </projects>
    <svnversion>1.7</svnversion>
    <username></username>
    <email></email>
    <fogbugzurl></fogbugzurl>
    <fogbugzusername></fogbugzusername>
    <fogbugzpassword></fogbugzpassword>
    <websvnurl></websvnurl>
</settings>  

Installation

After you’re finished setting up the settings document, we can download the start page and get started. Once you’ve downloaded and installed the Foliotek Start Page Extension, It will ask you to restart Visual Studio, and you’ll notice that your start page isn’t set yet. You’ll have to go to (in visual studio)

Tools -> Options -> Environment -> Startup -> Customize Start Page -> Select the Foliotek Start Page.
Setting the start page in Visual Studio 2010

After you click Ok Visual Studio will open the start page. It might give you a dialog that mentions that the directory doesn’t exist so it needs to create it, which is fine. Once the start page is loaded, if you chose a fresh directory, you’ll see this…



In order to do Feature Driven Development you’re going to need a local copy of trunk, so you click Get Trunk and the start page will open a Tortoise dialog asking you to download the trunk of this project’s repository. After you download the copy of trunk you’ll have the following options on your start page…




Ignoring the buttons on the trunk control (we’ll explain those later), let’s say we’re ready to start on one of our features. We could click on “Create Task”, and type in our branch name into the Name textbox and click add.


After we click add, the start page will create the branch (if it doesn’t already exist), then we’ll get the TortoiseSVN dialog to download the branch.


After we click Ok on the Tortoise dialog, the start page will check out the branch and create an IIS entry for the branch. You can see in the image below we have an entry for /foliotek (trunk) and /foliotektaskDemo.


Now you’re ready to start developing!! The above process is the base functionality of the start page. Before the start page, this Demo branch would have taken around 10-15 minutes to set up before I could even develop. Now I have it ready in under a minute. In addition to improving the set up process, we realized that we could improve the maintenance and management of the project with a few extra buttons.
Foliotek Start Page - Individual Task

Some of the buttons are self explanatory, some of them aren’t, so I’ll just go from left to right and explain each one.

  1. The Visual Studio button that opens the solution.
  2. The windows explorer button that opens that individual task’s folder, then the browser button which actually just opens the project in your default browser, not IE.
  3. Open the SVN Repository Url in the browser
  4. Open the WebSVN Url (if one exists). We use WebSVN because it is a nicer UI for browsing source, but the only one that’s mandatory is an SVN url
  5. Next we have a FogBugz (our bug/feature tracking software) button that opens the feature’s description.
  6. Update button grabs the latest changes from the SVN repo
  7. The local build button builds the solution without opening it in Visual Studio.
  8. The Merge from Trunk button opens a TortoiseSVN merge dialog, with the fields auto-populated, and all you have to do is click next.
  9. The Reintegrate button opens a TortoiseSVN dialog, but unfortunately it doesn’t auto populate the fields for you. In the future we hope to get that working, but for right now you’ll have to enter the reintegration fields yourself.
  10. The big red “X” will delete the folder from your computers, and also remove the IIS entry associated with the branch.

Conclusion

This start page has improved our development process immensely, and we thought if anyone else is using this development cycle, they might benefit from it as well. Even if your team isn’t using Feature Driven Development, the start page can still be useful to teams using SVN and IIS. If anyone is interested in trying it, you can get it from its extension gallery page, or you can find it in the extension manager in visual studio.

Visual Studio -> Tools -> Extension Manager-> Online Gallery -> Search for “Foliotek Start Page
Our plans for the unforeseeable future include open sourcing this extension, and also implementing an architecture that would allow people to write their own actions to perform on branches, and adding some screens to add projects and edit settings.

Let us know if you have any feedback or problems setting it up, I’d be more than happy to help.