Lee Kelleher

Setting up Visual Studio to work with Umbraco

Over the last 12 months I have been involved with developing several Umbraco-powered websites. During that time I’ve experienced many development frustrations; specifically with debugging and version control.

A while back I read Paul Sterling’s blog post on “Working with Umbraco in Visual Studio” – I used this as my basis.  I have added to his orignal suggestions:

  1. Have a clean, working copy of Umbraco – using the installer – on your machine.  I am using: C:inetpubwwwrootumbraco for my working copy of the site.
  2. My Visual Studio solution/project will be kept under version-control.  Since I use Subversion, (with TortoiseSVN and VisualSVN), I prefer to keep all my code under: C:SVN
  3. In the Visual Studio project, I create the following folders:
    1. /_templates
    2. /css
    3. /scripts
    4. /usercontrols
    5. /xslt

    These folders reflect the files that will be used in my Umbraco site.  The “/_templates” folder is used to store a text-based version of Umbraco templates, so that I can keep them under version-control; as I’ve had a situation in the past where someone copied over the wrong template – not very pretty.

  4. In Visual Studio, create a post-build event [from Project > Properties > Build Events] to copy all your working files across to your Umbraco installation.
    XCOPY "$(ProjectDir)bin$(ProjectName)*.*" "C:Inetpubwwwrootumbracobin" /y
    XCOPY "$(ProjectDir)usercontrols*.ascx" "C:Inetpubwwwrootumbracousercontrols" /y
    XCOPY "$(ProjectDir)xslt*.xslt" "C:Inetpubwwwrootumbracoxslt" /y
    XCOPY "$(ProjectDir)scripts*.js" "C:Inetpubwwwrootumbracoscripts" /y

    You may notice that I am not copying across the *.css stylesheet files across to Umbraco.  The reason for this is that the current version of Umbraco (v3.0.3) stores the contents of the CSS files in the database, and not on the file-system.

    You can either set the “Run the post-build event” whichever option you prefer.

  5. Once your files have been copied across to Umbraco, you can debug your code in Visual Studio:
    1. Open the site (usually http://localhost/) in your web-browser.
    2. In Visual Studio select the Debug > Attach to Process menu.
    3. Select the ASP.NET worker process from the list – this is usually called “aspnet_wp.exe” or “w3wp.exe” – then press OK.

It’s important to note that I am developing on Visual Studio 2008; but the same prinicple should apply to VS.NET 2005. (Update: It isn’t so straight-forward in VS.NET 2005, see Brad’s comment for further details.)

I’m still looking at ways to improve my development set-up with Umbraco/Visual Studio, so if anyone has any tips – please pass them my way!  I’m especially interested in ways of dynamically updating the stylesheets/templates via the Umbraco API.

Update: I originally wrote this post for use with Umbraco v3. If you are looking for a v4 post, check out the CG09 session write-up over at Our Umbraco. The main difference is that you wont need the /_templates/ folder, just replace it with the /masterpages/ folder, and add it to the post-build events.


  • Brad

    Like you said, “should apply to VS.NET 2005″ but it does not.

    My C# web project in VS.NET 2005 does not have a “Project > Properties > Build Events” option.

    I have done some research and it seems I need something called MSBuild which I think is part of “Visual Studio 2005 Web Deployment Projects”.

    You can read this Blog about it here..

    http://weblogs.asp.net/scottgu/archive/2005/11/06/429723.aspx

    I have not yet worked out how to add the simple xcopy commands or anything like them yet but I am working on it. If anyone reading this has done this with VS.NET 2005, please post here how you did it.

  • Brad

    Ok, I got this sorted for those of you using VS.NET 2005 and have a web project that you want to have build and then copy the files to your Umbraco project.

    The stuff I said in my other post is correct. Get the Visual Studio 2005 Web Deployment Projects.

    Once you have followed the steps in adding a deployment project to your solution, right click on the deployment project and Open Project File.

    In there, look for this xml node.

    <Target Name="AfterBuild"></Target>

    Uncomment it, and add these lines inside it.

    Here is the whole thing for completeness.

    <Target Name="AfterBuild">
    <CreateItem Include="$(OutputPath)bin***.dll">
    <Output TaskParameter="Include" ItemName="binFiles" />
    </CreateItem>
    <Copy SourceFiles="@(binFiles)" DestinationFolder="D:Devbin%(FilesToArchive.RecursiveDir)" ContinueOnError="true" />
    <CreateItem Include="$(OutputPath)css***.*">
    <Output TaskParameter="Include" ItemName="cssFiles" />
    </CreateItem>
    <Copy SourceFiles="@(cssFiles)" DestinationFolder="D:Devcss%(FilesToArchive.RecursiveDir)" ContinueOnError="true" />
    <CreateItem Include="$(OutputPath)usercontrols***.*">
    <Output TaskParameter="Include" ItemName="usercontrolsFiles" />
    </CreateItem>
    <Copy SourceFiles="@(usercontrolsFiles)" DestinationFolder="D:Devusercontrols%(FilesToArchive.RecursiveDir)" ContinueOnError="true" />
    <CreateItem Include="$(OutputPath)scripts***.*">
    <Output TaskParameter="Include" ItemName="scriptsFiles" />
    </CreateItem>
    <Copy SourceFiles="@(scriptsFiles)" DestinationFolder="D:Devscripts%(FilesToArchive.RecursiveDir)" ContinueOnError="true" />
    </Target>

    Now I can get on with the PAYING work. :)

  • http://www.eLAB.com.au Dale

    Thanks very much – i am just starting to use Umbraco 4.0 and its fantastic, and i was just starting to figure out how to debug using vs2008 and here we go!
    Thanks again,
    Dale

  • Sander

    Very interesting things here

    but does this mean you only store the files like
    templates / css(umb4.0) / xslt / script files in SVN
    how bout everything else.

    we work with many people at my office
    the thing is, projects tend to switch from 1 dev to another / or several others.

    sometimes developing with several devs at the same time. which then would give issues database related no?
    if i create a template, someone else renames it, etc…
    and how do you store all other data from the database in SVN, you would have to put dumps of your database in SVN then?

  • http://leekelleher.com/ Lee Kelleher

    Hi Sander, thanks for your comments.

    It has been both interesting and annoying trying to maintain source-control with Umbraco (or any other web-based tool for that matter)!

    Obviously the database has been the biggest problem. Keeping developers in sync is a tricky task. We got around it by making “master” changes on our central development Umbraco install (aka. our staging server) and then taking a copy of the database at certain points (weekly, daily, sometimes more often).

    That way we all have the latest version of the content. We’ve only done this with a team of 3 or 4 developers – so it’s been easy to manage the process.

    Umbraco v4 has improved the experience, as we can store Master Templates and CSS in the SVN, outside of Umbraco (without fear of being over-written).

    In a nutshell, it’s been a case of good management amongst developers, with the lead developer being responsible for maintaining a “master” version of the development Umbraco install. Which is copied back across the other developers when it’s needed.

    I’d be interested to hear more about other developer’s experiences with Umbraco in a larger dev team.

  • http://www.codiga.co.uk Simon Alelxander

    Hi Lee,

    Just started working with Umbraco and was trying to work out the best way to this, funny how it was your blog that led me to the answer!

    I’ll get you a pint the next time your in Liverpool

    Cheers,

    Simon

  • http://leekelleher.com/ Lee Kelleher

    Hi Simon,

    It is a small world! Glad I could help out.

    There was a session about working with Umbraco/Visual Studio at CG09, there is a write-up about here: http://our.umbraco.org/wiki/codegarden-2009/open-space-minutes/working-in-visual-studio-when-developing-umbraco-solutions

    We’ll catch up next time I’m up in Liverpool!

    Cheers,
    - Lee

  • Shashank

    Hi Lee,
    How to add .aspx page in umbraco….

  • http://leekelleher.com/ Lee Kelleher

    Hi Shashank, not sure how you mean… feel free to post your question over at the Our Umbraco forum – I’m sure we can help there!

    http://our.umbraco.org/

  • Ranjit J. Vaity