This Code Bytes

Programming Tidbits

19. March 2013 19:19
by Brad Falk

Creating a Kendo UI NuGet Package with NuGet Package Explorer

19. March 2013 19:19 by Brad Falk | 0 Comments

NuGet Rocks

As most people know by now, NuGet is an awesome package management system, with nice Visual Studio integration, that makes it a snap to pull third party libraries into your project. Installing a Nuget package can result in something as simple as putting a single file in the root directory or as complicated as adding a full directory structure, with multiple files, adding dll references and updating config files.

What I want to demonstrate in this post is how easy it is to manually create a NuGet package and consume that package from a simple private NuGet feed. More specifically, I want to demonstrate how you can leverage NuGet to manage the dependencies on the third party libraries that you’ve purchased that don’t already have NuGet packages out on the official public NuGet package source.

Packaging Kendo UI

I’m using Telerik’s Kendo UI suite of HTML5/JavaScript widgets on my current project – it’s a great way to jumpstart UI development and add a nice polish to your application. To use Kendo UI you need to include JavaScript files, CSS files and a set of images in your project. Additionally, I’m using the MVC wrappers that Telerik provides, so that you can configure the widgets using C# and it will emit the proper HTML and JavaScript. The wrapper is housed in a dll, so you’ll also have to add a reference to that into your project as well. If we had a NuGet package, we could have all of this added for us, with a click of a button.
At the end of the day, this is what we want our project to contain:


So why do we need to go to the trouble of creating a NuGet package for this? Can’t we just manually copy the JavaScript and CSS into the project, and add a Third Party/lib folder in the solution root for that dll reference? Absolutely. And that would work great. But there are a couple of reasons why I favor NuGet for this:

  1. I’m already using NuGet to manage my other third party dependencies – things like JQuery, Ninject, and all of the Microsoft packages that came with the MVC project template. So it’s nice to keep things consistent – they’re all in the same place.
  2. Telerik releases a new version of Kendo UI every quarter. When I want to upgrade my project, I just need to create a new version of the NuGet package and pull everything in via Visual Studio. This really becomes a benefit if I have more than one project that’s using Kendo UI. I can now just walk up to each of those projects and update them with a single click instead of having to copy the new files into each of the directories by hand. This helps eliminate error.

Alright – enough talk – let’s create a package.

NuGet Package Explorer

The NuGet Package Explorer is an awesome tool for creating new packages as well as examining the contents of existing packages. You can download it here from CodePlex.

When you fire up Package Explorer, you’ll be prompted for which task want to perform – choose Create a new package:


This will open the following window:


This is where all the good stuff happens. The left pane is where you’ll set all of the metadata about this package, and the right pane is where you’ll build the contents of the package. Let’s start with the metadata first.

Package Metadata

Click the Edit Metadata button in the Package metadata toolbar:

This will cause all of the fields to become editable:


Most of the properties here are pretty self explanatory, but one that I’d like to point out is the Version property. Like I mentioned earlier, I’m using the MVC wrapper for Kendo UI, which includes a dll. I’ve decided to tie the version of my NuGet package to the version of the Kendo MVC wrapper dll. This will let me know, at a glance, which version of Kendo UI that this package is related to. This saves me from having to invent my own version, plus it’s also a natural choice considering that the script and CSS files that we’ll be including are also tied to that version of the dll.

Click the green checkbox to save the metadata changes.

Let’s move on to building the package contents.

Package Contents

Right click on the right pane – you should get the following menu:

The two options that we’re interested in here are Add Content Folder and Add Lib Folder. When you add a Content Folder, anything that you put in that folder will be copied into your solution – we’re going to use this option for the Kendo UI JavaScript and CSS files. A Lib folder is used for library’s that you want to have references to in your project – we’ll use this option for the Kendo UI MVC wrapper dll.

Go ahead and add a Content Folder and a Lib Folder.

Now lets add in the Kendo UI web files. Right click on the content folder and choose Add New Folder. Add a folder named Content. Right click on the new Content folder you just added and add a Kendo folder under that – this is where we’ll put the CSS files. Next, right click on the top level content folder and add folder called Scripts, then right click on that folder and a new folder called Kendo – this is where we’ll put the JavaScript files.

Your Package Contents window should now look like this:

In windows explorer, browse to where the Kendo UI CSS files are installed. For me, this was:
C:\Program Files (x86)\Telerik\Kendo UI for ASP.NET MVC Q3 2012\src\styles  (the path will depend on what version you have installed). 

From here you can literally drag the files that you want in the package into the Package Contents window. I’m going to use the default Kendo template, so drag the default folder into the Kendo folder that’s under the Content folder, then do the same for the textures folder. And, finally, do the same for the kendo.common.css and kendo.default.css files.

Now let’s add the JavaScript. In windows explorer, back up a level, then drill into the js folder. From here, drag the following files into the Kendo directory that’s under the Scripts folder: kendo.web.js and kendo.aspnetmvc.js

Your Package Contents window should now look like this:

Note – I’m using the un-minified versions of these files because I’m going to let ASP.NET’s bundling and minifying handle that for me. You should use the minified versions otherwise.

Next, we’ll add the Kendo wrapper dll. In windows explorer, back up a level again, then drill down into wrappers\aspnetmvc\Binaries\Mvc3. That folder should contain a Kendo.Mvc.dll – drag that file into the lib folder in the Package Contents window.

Your Package Contents window should now look like this:

That’s it! Go to File –> Save and choose a location to save your new package:


Notice, by default, the file gets names with the package ID and version specified in the Package Metadata window.

Well, this post has already gotten long enough, so in the next post I’ll demonstrate how to setup a simple private NuGet feed and consume our Kendo UI package in an MVC application.

Add comment

  Country flag

  • Comment
  • Preview