Creating pre-release NuGet packages in VSTS

Visual Studio Team Services has great features for generating NuGet packages and publishing them to a private NuGet feed as part of the build definition. These packages can then be used by your other solutions and will be restored on the build agent when building these other solutions.

If you are generating NuGet packages which have dependencies on pre-release NuGet packages, you need to mark your package as pre-release by adding a suffix to the version number such as '-beta1'.

In the NuGet Packager settings in VSTS you can turn off automatic package versioning and add a NuGet argument of "-version 1.0.0-beta1". This will work for the first build, but on subsequent builds the package will fail to publish because a package with the same version number already exists.

If your build number is in a suitable format you can just add "-beta1" to the end of it and then in the NuGet Packager build step set automatic package versioning to 'Use an environment variable' and the environment variable to 'BUILD_BUILDNUMBER'.

If you do not want the build number to be the same as the package version (you may not want the build to be tagged as beta), you can use a variation on the steps here. 

1. Add a PowerShell Script step before the NuGet Packer step
2. Set the Type to Inline Script
3. Set the Inline Script to something like:
   $PackageVersion = "$env:BUILD_BUILDNUMBER-beta1"
   Write-Host ("##vso[task.setvariable variable=PackageVersion;]$PackageVersion")
4. As before, set the NuGet Packager to use an environment variable (in this case PackageVersion)

Regardless of your approach, you will probably also need a delete step as described here to delete old packages from the build server before creating new ones.

1. Add a Delete Files step to the start of your build definition
2. Set the Source Folder to $(Build.Repository.LocalPath)
3. Set the Contents to *.nupkg

AngularJS Dialogs - Confirm Dialogs

Building on my previous post about creating alert dialogs with AngularJS, here we will look at creating confirmation dialogs we can use to get confirmation from the user before completing a destructive action such as deleting something.

In the directive we add a new scope variable 'confirmPositive' with the '&' binding to allow our controller to assign a function to it. When the OK button is pressed, this function will be called. In the template we add another button - the cancel button will retain the alert behaviour and just hide the dialog whereas the OK button will call a function which hides the dialog and then calls the confirmPositive function.


In the controller we just need to add the function which will carry out our destructive action when the user clicks OK.


In our HTML we just need to add an attribute so that the function in our controller is passed to our directive.


A complete example can be found here.

AngularJS Dialogs - Alert Dialogs

Moving from working with just jQuery to AngularJS can take some getting used to. Separating the front end from the logic of the controller throws up some interesting problems such as displaying alert and confirmation dialogs.

Here's one way to trigger a custom alert dialog from a controller.

To achieve this we create an AngularJS directive which, when activated, will cover the screen with a full-screen translucent element with a child element which will be our pop-up dialog.


We have a simple template with the full-screen background and a dialog with title, content and an OK button. When the button is clicked, visible is set to false. A link function initialises the visible variable to false and we set up some variables so that the title and content can be set and a variable mapped to the visible variable.

In our controller we can create a function to show our alert. In this example, when a button is clicked, we will set our alert message and show the alert:


The HTML including our alert directive looks like this:


A complete example can be found here.

WCF Known Types

WCF allows you to write web service methods that take or return objects of multiple types using the KnownType attribute. This is done by defining a base class and inheriting from this class for other classes that you want to use as parameters. The base type is decorated with the KnownType attribute for each inherited type and you use the base type as the parameter on your web service method.

Here's a quick example of a base class, derived class and using the KnownType attribute on the base class. It also includes a service contract with a web service method that accepts our base class.

When implementing the web service method, we can then check the type of the class we're being passed and react accordingly.

You can call this web service from your web front-end (here I'm using AngularJS):

$http.post(urlBase + '/Items/' + id, {'req': data});

To tell WCF which type you are passing to the web service method, you need to add a property to the object in the following format (that's two underscores):

__type: DerivedClass:#MyNameSpace

After a lot of experimentation, I could only see the object in the web service method as the base type. I finally got it working when I discovered that the __type property has to be the first property when the object is serialized to JSON. The following solves the problem by creating a new object in JavaScript with the __type property and then adds the properties from the original object:

  var d = {__type: 'DerivedClass:#MyNameSpace'};

  for (var i in data) {

      d[i] = data[i];

  }

  $http.post(urlBase + '/Items/' + id, {'req': d});

Microsoft Web Platform Day

This week I spent a day with Microsoft at their Web Platform Day to learn about what's new with ASP.NET. Here are some notes I took back to my team of things we should look into implementing and some things that don't really fit into our platform but are interesting to know about.

Task Runners

Task Runners can be used to….run tasks! This is usually done as part of the build process for tasks such as minifying JavaScript and CSS. There are a few task runners out there such as Grunt, Gulp and Broccoli(?!) but Microsoft were recommending Gulp. These are integrated a bit better in more recent versions of Visual Studio and ASP.NET, but can be used in any web development project.

A few of the task plugins:

gulp-minify-css: minifies your CSS files removing comments, whitespace and new lines to reduce file size and make the site load quicker
gulp-uglify: minifies JavaScript and can also do stuff like shortening names of functions and variables in the minified version of your JavaScript to reduce file size
gulp-autoprefixer: some browsers implement their own CSS features which are prefixed with –webkit, -moz or –ms. This makes sure you have prefixes for all browsers if you use one of them
gulp-concat: bundles files into a single file (e.g. multiple CSS files into one, or multiple JavaScript files into one) to reduce number of requests made by the browser and improve performance
gulp-imagemin: Optimizes .png and .jpg images for the web

Tasks can be chained together in Gulp so that you could minify several CSS files and then concatenate into one. You can also set Gulp to watch for changes to files and run automatically when you make changes.

Performance & Best Practises

There are a few check-lists, site scanners and plugins that will check sites for performance and best practises. Site authentication often prevents site scanning websites from accessing sites but you can still check your work with a plugin such as YSlow. This will give a report with a rating for a page and a list of recommendations. Many of the recommendations are covered by the task runners mentioned above (minifying and concatenating). Another checklist worth reading through is http://webdevchecklist.com/.

Image sprites are a single image file containing multiple icons and CSS to pick out individual icons from the file. This reduces the number of HTTP requests made by the page and improves performance compared to requesting each image individually. Going even further, it is recommended that icon fonts are used, where appropriate, so that the icons can easily be scaled and their colour can be changed.

There are web.config changes that can be implemented for caching settings and compression of files but then ‘cache busting’ strategies should be investigated so that clients get the latest versions of files when caching is being used.

Entity Framework

Entity Framework is a Microsoft technology for working with databases and simplifies going between C# classes and database tables. It is recommended that you take a code first approach – write your classes, set up your database connection string and the tables can be automagically created in the database. You can create classes from an existing database but you can get into problems if you want to make database changes and then import again.

ASP.NET Web API

Used to create RESTful web services and integrates well with Entity Framework. A Visual Studio feature (‘scaffolding’) can automatically create web service methods for CRUD operations from your Entity Framework models. You can also easily add OData support to add filtering and sorting to you web services via a query string (e.g. “‘?$name eq ‘bob’”).

ASP.NET Smart Tags / Tag Helpers

These are ASP.NET tags used in your HTML which are rendered on the server. One example give was loading scripts based on the environment. This lets you deliver full JavaScript and CSS files in the development environment but minified versions in production.

Another example was fall-back href’s when loading scripts. You can refer to CDN versions of popular scripts such as jQuery to improve performance, but provide a fall-back URL to a version on your server if the CDN is not available or the file is no longer on the CDN.

Web Performance and Load Test

A new project template in Visual Studio 2015 allows you to simulate web site load and analyse results. The requests are generated from Azure so presumably there is a cost associated with it and I'm not sure how it would work with site authentication.

ASP.NET Core

Microsoft have released an open source version of ASP.NET which runs on Windows, Linux and OSX. This can handle as much as 8 times the traffic of an ASP.NET 4.6 site on the same server. This is largely achieved by allowing you to configure which pipeline features are used when handling requests. 

You can also ship your site bundled with the framework which avoids version dependency problems on the server.

Despite all of this goodness, it isn't finished yet and doesn't have a lot of the features of ASP.NET 4.6.

Azure

Some interesting Azure features were demonstrated.

Platform as a Service / Infrastructure as a Service:

With Infrastructure as a service, you get a virtual machine and look after the software, patches etc. With platform as a service, that is all handled for you and you just upload your code/content.

Deployment Slots:

You can set up deployment slots in Azure for different environments (dev, test, live etc.). You can also use slots for A/B testing or staged roll-out. You can easily switch slots around when you want to move from test to live.

Continuous Deployment:

Deployment slots can be linked to a source repository such as a GitHub branch and automatically update if code is committed to the repository.

Auto-Scale:

Azure can be set up to automatically scale to more servers (within set limits) when demand exceeds a specified threshold. It can also automatically scale down if demand drops below a set threshold. This lets you maintain availability without spending more than you need.

Azure Storage:

A cheap way to host static content with good performance.

Azure Cloud Explorer:

You can now debug code running on Azure from Visual Studio running locally.

Apps

There is a web standard being developed for a manifest file for web sites. Microsoft have a tool called ManifoldJS that uses this to generate app store apps for Windows, iOS, Android and Chrome from a website.

Visual Studio Code and GitHub for Windows

If you have GitHub for Windows / GitHub Desktop installed and install Visual Studio Code, you may receive the error 'it looks like git is not installed on your system' when clicking on the Git icon. This is most likely because the path to the git executable git.exe isn't in your system path.

Locate the git executable

The first step is finding the path to folder that contains git.exe.

GitHub for Windows installs to C:\Users\<User>\AppData\Local\GitHub which can be shortened to %USERPROFILE%\AppData\Local\GitHub. Within this folder is a sub-folder starting PortableGit.... such as PortableGit_c7e0cbde92ba565cb218a521411d0e854079a28c. 

You can use a shortened name for this folder such as portab~1. To find this shortened name, navigate to the GitHub folder in the command prompt and run:

for /d %I in (*) do @echo %~sI

You might have to hunt around for the git.exe file in this folder. At one point I found it in a bin sub-folder but this appears to have changed recently to mingw32\bin (GitHub for Windows version 3.0.11).

My final path ended up being:
%USERPROFILE%\AppData\Local\GitHub\portab~2\mingw32\bin

Add to the system path

1. Go to System Properties by opening the run dialog (Windows key + R) and opening 'control sysdm.cpl'
2. Change to the Advanced tab and click on Environment Variables
3. In the System variables section, click on Path and click Edit
4. At the end of the value text add a semicolon and the path to the git executable
5. Click OK, OK and OK to close System Properties

Restart Visual Studio Code and Git integration should now work.

Chrome ends support for NAPI (SharePoint 2013 plugin)

Netscape Plugin Application Programming Interface (NPAPI) is a cross-platform plugin architecture. SharePoint 2013 makes use of this API for a plugin for Chrome and Firefox that provides functionality such as allowing documents to be opened in the local application (such as editing Word documents in Word).

Google has slowly been phasing out support for NPAPI plugins in Chrome, but as is so often the case, you don’t notice these things until they are switched off.

The current version of Chrome (42) disables NPAPI plugins by default and in the future they will not be supported at all.

For now you can enable NPAPI by going to chrome://flags/#enable-npapi in Chrome and clicking enable. After restarting the browser, the plugin should work again but this is not a long term solution as this option will eventually be removed. It would appear that unless Microsoft can provide a plugin that doesn’t depend on NPAPI, Chrome won’t be able to provide the best experience for SharePoint 2013.