Creating NuGet Packages with WinJS

Let’s say you’ve developed a native Windows 8 app, using HTML, CSS and Javascript, working with the WinJS runtime. Let’s also say that you’re hoping to share many components of your app with another app, which you (or another developer) are going to create. With c# or vb, you could create a shared class library; but that option isn’t available with WinJS.

One of my favorite features recently introduced into the Microsoft ecosystem is NuGet. NuGet is package management for Visual Studio. Coming from a CocoaPods and PIP background, I find it very familiar and handy for making modular bits of code which can be pulled down into your projects and shared with others. Getting into the NuGet mentality encourages me to build modular, reusable components rather than one monolithic codebase.

I couldn’t find a tutorial online for the best way to make a WinJS NuGet package, so I thought I might share my experience here. Keep in mind that a lot of this is subject to change in the near future, so just be aware of what your goals are, and research what you’re running on the command-line before you actually run it!

My first step was to install Chocolatey. It’s a great tool for installing all kinds of Windows software from the command-line, without going through a bunch of downloads and wizards. Think of it as NuGet for full-fledged apps. From the instructions on their site, all I had to do to install Chocolatey was run this command:

C:\> @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

Now, we need the NuGet command-line tools. Chocolatey has them, so we can run Chocolatey’s cinst command within Powershell:

PS> cinst NuGet.CommandLine

Switch to your directory in which you store all of your code. For me, it’s this:

PS> cd $ENV:USERPROFILE\Documents\Projects

Make a new directory, with the name of your packages repository. I recommend this format, substituting CompanyName with your own:

PS> mkdir CompanyName.Packages
PS> cd .\CompanyName.Packages

Make another directory for the name of the package you want to create. For WinJS-related packages, I recommend this format, substituting PackageName for your own:

PS> mkdir WinJS.PackageName
PS> cd .\WinJS.PackageName

Make a ‘Content’ directory. Anything you put in this folder will be copied to the target project’s root folder:

PS> mkdir Content
PS> cd .\Content

Let’s add a javascript file, and use the Scripts folder as our target:

PS> mkdir Scripts
PS> cd .\Scripts
PS> echo "//my new javascript file" > myscript.js

Now, we need to make the .nuspec file. Luckily, nuget will make a template for us if we start in the package’s directory:

PS> cd ..\..\
PS> nuget spec

Now, we’ll have a Package.nuspec file. If you use sublime text, and have the command-line tools installed, you can launch it with this (otherwise, substitute subl with notepad):

PS> subl .\Package.nuspec

The default contents:

<?xml version="1.0"?>
<package >
  <metadata>
    <id>Package</id>
    <version>1.0.0</version>
    <authors>your.user.name</authors>
    <owners>your.user.name</owners>
    <licenseUrl>http://LICENSE_URL_HERE_OR_DELETE_THIS_LINE</licenseUrl>
    <projectUrl>http://PROJECT_URL_HERE_OR_DELETE_THIS_LINE</projectUrl>
    <iconUrl>http://ICON_URL_HERE_OR_DELETE_THIS_LINE</iconUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Package description</description>
    <releaseNotes>Summary of changes made in this release of the package.</releaseNotes>
    <copyright>Copyright 2014</copyright>
    <tags>Tag1 Tag2</tags>
    <dependencies>
      <dependency id="SampleDependency" version="1.0" />
    </dependencies>
  </metadata>
</package>

Change the details in that file to fit your needs, and then pack the whole thing when you’re ready:

PS> nuget pack .\Package.nuspec

Don’t worry; it will give you a warning if you forget anything in the XML metadata.

Now, create a new project in Visual Studio, or open an existing project, in which you want to pull down the files in this package we just created. Then, follow the instructions on docs.nuget.org for referencing a local package feed. One thing that I found was that adding a folder as a feed will automatically add packages within that folder’s subfolders, so you can keep this directory organized however you like.

Hope this helps, let me know what your experience is!