Getting Revision Number in TFS Team Build

If you’ve ever been wondering how to get the value of the $(Rev:r) (or $(Rev:rr)) value in you team build, you can’t.  If you have a pretty boilerplate versioning where you do Major.Minor.Release.Revision then using the $(Rev:r) is pretty handy.  A company I work for now uses Major.Minor.Patch.Revision.  Below is how I was able to extract the revision number during TFS build workflow time.

1.  Our BuildNumberFormat is set close to the default: $(BuildDefinitionName)$(Rev:.r).  We can use this fact to extract the revision number.

2.  Create a string variable that is scoped to Run On Agent called RevisionNumber.  Don’t use Version or something like that which has a class name in the TFS namespaces (i.e. Version is type being used as int).

image

3.  Near the top of the “Run On Agent” area of you build template, add a Assign task item from the toolbox.  I added mine to the sequence called Initialize Variables because it logically made sense here.

  • Set To to be RevisionNumber
  • Set Value to be the following expression
Int32.Parse(BuildDetail.BuildNumber.Remove(0, BuildDetail.BuildNumber.IndexOf(".") + 1))

 

With this in place you can use the revision number to create any numbering based of this value.

Quick Way To Create a MSI For You Web Projects Using Wix

I’ve know about Wix (Windows Install Xml) tool set for quite some time but haven’t had much to do with it.  Wix is a great tool for working within the Windows environment.  It is a XML based way of defining how you want you MSI packaged.  It comes with Visual Studio template projects, and few very useful tools.

Background of my problem to solve: My company has been using Web Site projects and Visual Studio Deployment/Setup projects for a very long time.  I know, all these project types are the bane of Visual Studio’s ease of use when it comes to projects.  Our requirement is to create MSI installers of our web services.

I’ll be assuming you are using a web application project type, web site projects are deprecated after Visual Studio 2010. Below are some simple steps you can take to create a MSI out of your web application projects.

NOTE: One thing about Wix that helps a lot, is consistent naming convention for items that are not auto-generated, for example, IIS virtual directory component IDs ending in “.VDir” or folder IDs ending in “Folder”.

1.  Install the latest Wix Toolset, http://wixtoolset.org/.  To save yourself time, add the the Wix bin (something like C:\Program Files (x86)\WiX Toolset v3.8\bin) folder to your PATH environment variable so the tools can be accessed on the command line.

2.  Go to you web application.  Right click and select Publish.  You will be just publishing to a local folder so if you have other publishing profiles create a new one, call it LocalFolder or something like that.  The publishing properties should look like the following.

image

3.  Create a Wix project in the same solution of the web application project.

4.  Add the web application project as a reference in the Wix project as shown below.  Yes, Wix has build dependencies, it’s pretty cool!

image

4.  Now we will create a component wix file, a file defining all of our project outputs we want in our MSI (i.e. dlls, asmx, etc.).  Below is the following line I’ve used to quickly generate a wix file, which usually doesn’t need much tweaking after it’s done.

heat dir "C:\Temp\HtngWebServices" -out "{PathToWhereYouWantYourWixFix}\Components.wxs" -gg -g1 -sreg -sfrag -var var.{ProjectName}.ProjectDir -dr WebServicesFolder -cg HtngWebServicesComponents

dir = directory which you will pull files from to generate wxs file

out = the location you want to create the wxs file in, generally this will be your Wix project or a Wix setup library project.

var = variable to place in front of the file location of the file being referenced in wix, this will be apparent when I describe the how the Wix project references work below.

dr = Directory reference to root directories, see Wix documentation.

gg, g1, sreg, sfrag = see Wix documentation.

5.  Once the Components.wxs is generated (Compnonents.wxs is just a name I choose for simplicity of example), add it to the Wix project. 

Opening the Components.wxs that was generated by “heat”, you’ll notice a line like “Source="$(var.HtngWebServices.ProjectDir)\Web.config".  The part I’ve italicized is a variable, see Using Project References and Variables, is a project ref so when our dependent project builds all the files we need will be located by Wix, this is handy but may not fit everyone’s situation.

image

6.  In the Wix project, add the following Wix library references, which are found in C:\Program Files (x86)\WiX Toolset v3.8\bin\.

image 

At the top of your Product.wxs file you will need to add the following XML namespaces.

     xmlns:iis="http://schemas.microsoft.com/wix/IIsExtension"      xmlns:util="http://schemas.microsoft.com/wix/UtilExtension"

7.  Add a wix file (.wxs) to your Wix project called IISConfiguration.wxs.  This is where the IIS settings will go.

8.  In the IISConfiguration file you will need to add DirectoryRef for virtual directories that you need.  See the IIS documentation for detail, below is what It looks like

image

9.  You will need to add feature(s) to the Product.wxs file that was generated with the project.  Here we’ve used 2 features, see Feature documentation.  Each of the ComponentRef under the IIS virtual directories section shown below will be linked to the next step, and the item circled in read represents the ComponentRef of our web application project components and virtual director.

image

10.  A few more fragments will need to be added to you Product.wxs file to complete the installation information that the MSI will need.  Below is a shot of these sections.

First Fragment – this is for IIS extension to know what web site your are targeting, see IIS extensions.

Second Fragment – the first directory structure is the “TARGETDIR” directory which are constants from MSI framework, see MSDN, the rest is nesting for our installation location.  The other DirectoryRef towards the bottom is for permissions for IIS process to access the installed folders.

image

 

To be honest the learning curve is a little steep for Wix at first but once you wrestle it down, you begin to be able to follow what is going on.  The best guide is their documentation http://wixtoolset.org/documentation/ and Google other examples of specific tasks you are trying to achieve.  This thread is a accumulation of such time spent Googling various specifics of “how-to”’.

Errors In TFS Build Definition With Different Version of Visual Studio Installed

As Visual Studio 2012 and 2013 came out, I installed them to try them out and get to know the enhancements and changes.  At work, we use Visual 2010 and TFS 2010.  Using the team build workflow is OK, it has it merits with visual layout and .NET code access when using activities like if statements.  The one downside that I ran across after install VS2013 was nearly the whole workflow build definition had errors now!

It turns out that there are assembly reference issues between having VS2010 and VS2013 side by side.  Being a little dismayed, and not to mention ugly to look at, I ventured into what to do to fix it.

1.  First, you have to manage your build definition in a project just like you would code.  Below is an example.  The project can be a simple class library with not code files, just build definitions.  I do this whenever I setup TFS.

image

2.  You need to add a reference to all the libraries being reference in the xaml code.  If you open your xaml by selecting View Code you can see all the references.  To add reference right click project references and navigate to the location of the correct TFS libraries, most of them are in C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ReferenceAssemblies\v2.0\, I just search for dll under C:\Program Files (x86)\Microsoft Visual Studio 10.0.

image

image

What is a .winmd and how to use it in a desktop application

A .winmd is a file used by Windows 8 WinRT (Windows Run Time).  winmd stands for Windows Meta Data file which is the same format used by the .NET framework for the CLI (common language interface).  As such it can be viewed by .NET tools such as Reflector and the ildasm tool packaged with .NET.  You can find these files in various places but one command place is c:\Windows\System32\WinMetadata.

These files are focused on Windows store apps but it doesn’t preclude you from using them in a traditional desktop app.  To do so you need to do the following to your desktop application in order to leverage functionality in these APIs.

1.  Unload your application.  Edit the project file and add the tag near target version, “<TargetPlatformVersion>8.0</TargetPlatformVersion>”.

2.  Reload your project.  You will need to add a reference to the following DLLs.

C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\WindowsBase.dll

C:\Windows\Microsoft.NET\Framework64\v4.0.30319\System.Runtime.dll

C:\Windows\Microsoft.NET\Framework64\v4.0.30319\System.Runtime.WindowsRuntime.dll

3.  Now you will be able to leverage functionality provided by the WinRT framework, such as camera, NFC, etc.

Setting Up TFS Team Build To Use TFS Build Extensions

The other day I was reminded of how great TFS Build Extensions really are.  I’ve used them in the past and currently use them and still have not tapped there fullest resources but find they are always there to do 99% of what I need done.  If you are using TFS and team build, these are a must.  In this post I’m going to do a quick run through on setting up build extension on your build machine as well as your local development environment.  A more detail version of what I summarize below is found in the TFS Build Extensions Documentation.

1.  Download the TFS Build Extensions from http://tfsbuildextensions.codeplex.com/.  Unzip content into C:\Tools\.

2.  Follow the directions in TFS Build Extensions Documentation to check in these build extension into the {team project}\BuildProcessTemplates\Custom Assemblies.  This will be used by the build controller/build agent as well as you when you are working on the build workflow and need toolbox items.

Below is an example of a team project with the Custom Assemblies folder under BuildProcessTemplates and a ProcessTemplates.sln which has 1 project to house our build definitions.

image

3.  After following the setup steps TFS Build Extensions Documentation you will be able to create a workspace to your build templates folder, get latest, and open the build template project the documentation had you create.  The key to being able to work on the template on your development machine is to include the TFS extension in your toolbox.  Following the documentation will have you setup for this so your development will look like the following.  In the toolbox I added the items from the library TfsBuildExtensions.Activities.dll, which should be in your {team project}\BuildProcessTemplates\Custom Assemblies\ folder.

image

Using WPF and Vector Graphics

Recently I’ve been taking a look at WPF, Microsoft’s not so new now replacement for WinForms.  With the little free time that I have, I’ve relied heavily on Pluralsight for getting up to speed on various technologies.  In working with WPF, I was trying to leverage their concept of “lookless” controls which is very powerful and much nicer to design with than WinForms. 

To summarize my tribulations, I was having a hard time loading a local resource that was a SVG.  Blend Expression, a WPF designer, doesn’t support SVG directly but it does support .pdf (a form of SVG) and .ai (Adobe Illustration).  There are a couple of ways to product .pdf or .ai files.  My approach was to use a tool I’ve used in the past, Inkscape, see Inkscape A Cool Tool.  Inkscape also support generating a XAML file directly from the SVG file which you can leverage directory or copy the contents of XAML output into a resource dictionary.

1.  Open or create your SVG file in Inkscape.

2.  PDF format: Select Save As and choose .pdf format.  It will display a dialog as below once you click Save, ensure you select “Convert texts to paths”, then click OK.  Once the file is saved you can rename the file extension from .pdf to .ai.  It will now be recognized in Expression Blend.

image

 

3.  XAML format:  Select Save As and choose .xaml format.  This will export it directly to a XAML file.  You can take the content line, element is a ViewBox, and put that directory in a resource file.

Outlook 2013 Always Prompts for Credentials using Active Directory

You ever have those technical issues that aren’t quit annoying enough to deal with in your normal day of busyness?  I really have enjoyed where Microsoft have taken Office in the last few years, but after installing Office 2013 Professional, which has Outlook 2013, I kept receiving a login prompt for my Active Directory credentials every time I open Outlook.  For a while, I thought it was something to do with our IT’s exchange server, but did a little googling to figure it out. 

It turns out that if you have Exchange connected through HTTP, it will always prompt, even if you ask it to remember you credentials, or even tell it not to prompt!  How annoying.  Below is the image of the setting you need to uncheck to fix this pest of an issue.

image

You can get to this screen by going to: Account Settings, double click the mail account in question, click the More Settings… button, then click the Connection tab.

Sass CSS with Compass using Grunt Not Working on Windows

My team is using AngularJS, Node.js, Grunt, Sass CSS via Compass, Yoeman, and a few other web toolsets.  The other day when running the serve process to generate the css output from Sass CSS, the css wasn’t able to generate.  It turned out that Compass was setting the permissions on the .tmp folder where it puts the CSS to a state that didn’t all the process to write the file, hence a Permission Denied error.  To fix this issue I followed the StackOverflow thread http://stackoverflow.com/questions/22596760/yeoman-error-errnoeacces-on-line-897-of-c-permission-denied which did these steps.

Open a command prompt and run the following.

  1. gem uninstall sass (if you have multiple version, select all)
  2. gem uninstall compass
  3. gem install compass --pre
  4. gem install sass --pre

Setting Up PhoneGap/Cordova for Visual Studio

It’s always a struggle to find time to invest in side projects when you work and play an active role in your kids lives.  I appreciate when installing tools is just simple and you don’t have to google “why doesn’t …. do …” or “where is…” because the instructions aren’t straight forward or are missing steps/pieces.  I found this the case with the latest phonegap instructions as of 2014-3-9.

  1. Install Windows SDK.  I’m using Windows 7.1 because I have a Win7 machine, I found SDK here.  This installed Visual Studio 2010 Express for Windows Phone (VS2010).
  2. Download PhoneGap SDK and unzip in C:\Tools.  PhoneGap SDK is on github here.
  3. In the C:\Tools\phonegap-master (you might have to drill down a bit) there will be a lib folder, and in it there are folders for the different target frameworks one of which is “windows-phone”.  As of recent the Visual Studio template .zip is not there.  I had to run a batch filed called “createTemplates.bat” which created templates for WP8 and WP7.
  4. Once you have the Visual Studio .zip file template(s), copy those to your \Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#.
  5. Open VS2010 and create a new project.  You will now see a project template as shown below.  The template name may change at some point.

image

 

The project structure will look like the following.

  • cordova – build tools
  • cordovalib – code for browser engine interaction
  • www – folder for html/js/css of your app
  • plugins – plugins for interfaces on your phone (i.e. camera, contacts)

image

Installing Node.js and Other Packages

Keeping up with technology can be a job in itself.  Learning is fun, but is quickly forgotten so writing things down can always save you time later.  This thread goes over various was of installing Node.js and other packages.

Installing Node.js

There are 2 ways in which you can install Node.js.  Node.js comes with node package manager now so it will not need to be installed independently.

Installer (recommended): Go to node.js.org and use the installer for your OS.  Run the installer.

Homebrew (Mac only): Run the command “brew install node”.  You will have to have homebrew installed.

 

Other Node packages t

Installation will use node package manager.  You can list the node modules for your node application by listing the directory of “node_modules”.

Express – web application framework for node

npm install -g express --save

NOTE: once you create a application with express (i.e. express AppName) you will have to navigate to AppName folder and run the command “npm install” to install the components defined in node’s package.json.

Yeoman – front end tool focused on scaffolding (yo), building/testing (grunt), and dependency management (bower)

npm install -g yo --save

npm install -g generator-webapp --save

coffee-script – scripting language that builds down to javascript.

npm install coffe-script --save

node-dev – a tool for node that will monitory files and auto restart the node app when a file has changed.

npm install node-dev –save

NOTE: When using this you will want to separate development dependencies from production ones.  In the package.json, you can create a “devDependencies” like so:

{
"name": "application-name",
...,
"dependencies": {
"express": "2.5.8",...
},
"devDependencies": {
"node-dev": "~0.2.2"
}
}

mocha – javascript test framework for node

npm install mocha –save

NOTE: put this in your dev dependencies

REQUIRES: request

request – modeule that simplifies the process of making http calls

npm install requets --save

Redis – open source advanced key-value store

npm install redis hiredis connect-redis --save

REQUIRES: Installation of Redis backend.  On a Mac use homebew “brew install redis”, Windows see redis.io.

connect-assets – transparent file compilation and dependency management for Node’s connect framework

npm install connect-assets --save

socket-io – simplifies the use of IO on all browsers.  See WebSockets for information on this topic.

npm install socket-io --save

AngularJS – front end web application framework dealing with models, views, collections, and events

npm install angular --save

Backbone – front end structured for web applications dealing with models, views, collections, and events

npm install backbone --save

RELATED: Marionettejs (npm install backbone.marionette --save)