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:\inetpub\wwwroot\umbraco 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:\Inetpub\wwwroot\umbraco\bin" /y
XCOPY "$(ProjectDir)usercontrols\*.ascx" "C:\Inetpub\wwwroot\umbraco\usercontrols" /y
XCOPY "$(ProjectDir)xslt\*.xslt" "C:\Inetpub\wwwroot\umbraco\xslt" /y
XCOPY "$(ProjectDir)scripts\*.js" "C:\Inetpub\wwwroot\umbraco\scripts" /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.