Prepare Yourself for ASP.NET 5 - Part 2 (NuGet, Npm, Bower)

In Part 1 of this series I introduced you with Less and Sass. In the example you developed in Part 1, you used Node Package Manager (npm) to install Less and Sass. Any package manager basically does the job of pulling requested files from some repository and place them on your local machine. The files under consideration could be binaries (*.dll, *.exe etc.), source code files (*.js, *.cs etc.) or even documentation files (*.html, *.doc etc.). The files you receive is totally dependent on the "package" you are installing.

You might wonder - Do I really need a package manager? Strictly speaking you can develop a project without any package manager. If you manage to grab the files that a package manager is supposed to deliver for you then your job is done. However, this manual approach is tedious for bigger and complex real-world applications. In such a manual approach dependency tracking becomes your responsibility. Consider a simple example. Let's say you need Component A in your application. Component A, however, needs component B and component C for its functioning. As a consumer of C you may not be aware of these dependencies and may forget to grab B and C. Obviously, your application won't work as expected.

Consider another example. Let's say your web application needs jQuery, KnockoutJS and TypeScript libraries. In a manual approach you typically visit all the relevant websites and then download the respective libraries. Modern web applications often many client side libraries and this manual downloading might be tedious.

A package manage helps you in the situations just described. By using a package manager you can grab all the required files without leaving your working directory or project. While working with modern ASP.NET applications you will come across three package managers namely NuGet, Npm and Bower. Although all of them are package managers each is designed with some specific needs in mind and handles a specific requirement better than others.

Now that you know what a package manager is, let's discuss each of them in bit more details.

NuGet

NuGet is a package manager that primarily deals with .NET assemblies. Main driving force behind NuGet is Microsoft and .NET community. For example, if you wish to get the latest version of Entity Framework or ASP.NET Identity you can use NuGet to add it to your project. The NuGet official gallery nuget.org acts as a catalog of NuGet packages. When you install a package using NuGet you are grabbing them from this gallery and placing them into a local folder.

NuGet package manager is available in two flavors - Command Line version and integrated with Visual Studio. The later flavor is more common because it is nicely integrated in the Visual Studio IDE. In the examples that follow I will use this flavor to illustrate the NuGet usage.

You can invoke the NuGet package manager console in Visual Studio using Tools > Library Package Manager > Package Manager Console menu option.

Once opened it will look like this:

You can now issue commands at the PM prompt.

As an example, let's install ASP.NET Identity package in an empty ASP.NET MVC application. Issue the following command at the PM prompt:

Install-Package Microsoft.AspNet.Identity.Core

The Install-Package command accepts a package name to be installed and installs it in your project. Each package has a unique name in the NuGet gallery. The files grabbed by the above command are placed at two locations:

• They are added to the BIN folder of your project and a reference to them appears under References folder.
• A folder named Packages is created (if it doesn't exists) in the Solution's folder and a the downloaded files are placed under Packages in their own folder.

The following figure shows both the locations:

You will also notice  that there is an XML file named Packages.config inside your project folder. This file keeps track of packages used by your project. After installing the above package you will see an entry in Packages.config like this:

The Packages.config file can be used to reinstall (Update-Package -reinstall ) all the packages if something goes wrong.

Once a package is installed you can remove it or update it. The commands to do the respective operations are as follows:

Uninstall-Package Microsoft.AspNet.Identity.Core

Update-Package Microsoft.AspNet.Identity.Core

Visual Studio also offers an easy alternative to using the package manager console as described above. You can use "Manage NuGet Packages" dialog to do all of the above operations in a visual manner. The following figure shows this dialog (Tools > Library Package Manager > Manage NuGet Packages for Solution):

Node Package Manager or Npm

Node package manager or npm is primarily designed to install Node.js modules. You can also use npm to install packages that are used during development time. For example, CoffeeScript and TypeScript. The catalog for npm packages is located at npmjs.com. Main driving force behind npm is Node.js community. Node package manager comes as a part of Node.js installation. You can download Node.js here. Once installed npm can be invoked using Command Prompt.

Let's assume that you need to install jQuery using node package manager. To do so, open Command Prompt, navigate to your Visual Studio project folder and issue the following command:

npm install jquery

This command grabs the required files from the npm repository and stores them in Node_Modules folder the Visual Studio project folder.

The jquery folder will have all the files including licensing information and support files.

So, now you have jQuery installed locally. How should you reference it from your web pages? One straightforward way is to point the src attribute of the <script> elements directly to jquery.js from the above folder. However, personally I avoid this approach. What I prefer is to copy just the required files from Node_Modules > jQuery folder to some other folder within the Visual Studio project (say Scripts folder). But this is a matter of personal choice.

Along with the package file a Package.json file is also installed for you. This package manifest file give you more information such as dependencies of the package being installed. This file uses JSON format to store its content. For example, part of the above package.json looks like this:

Note that unlike NuGet which stores package information in XML format, Npm stores the information in JSON format.

Once a package is installed you can remove it or update it using the following commands:

npm uninstall jquery

npm update jquery

In the above example you installed jQuery package in a specific folder. You can also install a package in a global repository found at the following location:

C:\Users\TestUser\AppData\Roaming\npm\node_modules

To install a package in the global repository rather than local you use -g switch as follows:

npm install jquery -g

If you wish to remove or update a package from the global repository then include -g in the corresponding commands.

Creating Package.json for all the Npm packages needed in a project

It is quite common for a project to require multiple Npm packages. One way to install these packages is to issue individual install command as discussed earlier. Alternatively you can create a custom Package.json file and install all the packages listed therein. To create a custom Package.json file issue the following command :

npm init

Invoking this command will walk you through a series of questions and will generate Package.json file in the project folder (not to be confused with Package.json from individual package folders). You can also edit this file manually to add / modify / remove entries. An empty Package.json file thus created looks like this:

{
  "name": "PkgMgrDemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Suppose you need jquery, jquery-ui and jquery-mobile packages in a project. You can edit the above file and add entries in the dependencies section as shown below:

{
   ...
   ...
   "dependencies": {
    "jquery": "^2.1.3",
    "jquery-mobile": "^1.4.1",
    "jquery-ui": "^1.10.5"
  },
   ...
   ...
}

As you can see you modified the dependencies section to include three entries - jquery (any ver. 2.x.x), jquery-mobile (any ver. 1.x.x) and jquery-ui (any ver. 1.x.x).

Now save the Package.json file and issue the following command :

npm install

Doing so will read the Package.json file you just created and will install all the three packages listed there.

If you don't wish to edit this file manually, there is an alternative. After creating Package.json file as outlined above install the required packages individually using --save switch. This will add the required entries to the Package.json. For example, if you issue the following commands:

npm install jquery --save

npm install jquery-ui --save

npm install jquery-mobile --save

they will alter the dependencies section to the same values if you would have done manually.

If you ever need to restore all the packages used in a project you can now simply invoke npm install command and all the packages listed in this file will be listed for you.

Bower

Now that you are familiar with NuGet and Npm, let's discuss Bower. Bower is a package manager primarily for front-end packages. By front-end packages I mean the packages that you use in your web pages such as JS libraries and CSS files. One main difference between Npm and Bower is that Npm supports nested dependency trees whereas Bower uses flat structure (you need to resolve the dependencies yourself). In other words Npm may result in multiple versions of a component on your machine whereas Bower will always keep one version of a component. In this article I won't discuss these differences in more details because that's not the topic of this article.

To install Bower you need to download Bower package using Npm. You can do so using the following command:

npm install bower -g

Notice the -g switch that installs Bower package in the global repository (see our earlier discussion). Bower pulls all the required files from Git repositories. So, you will also need some git client for windows. You can download one here. Make sure that whatever client you use supports command line mode.

Once a git client is installed you can install bower packages. For example, to install jQuery using bower you would issue the following command command prompt (make sure to navigate to VS project folder before issuing the command):

bower install jquery

All bower packages are stored inside Bower_Components folder. Each package also has Bower.json file describing the package in addition to content files.

For example, if you open Bower.json from jQuery package it will look like this:

{
  "name": "jquery",
  "version": "2.1.3",
  "main": "dist/jquery.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "build",
    "speed",
    "test",
    "*.md",
    "AUTHORS.txt",
    "Gruntfile.js",
    "package.json"
  ],
  "devDependencies": {
    "sizzle": "2.1.1-jquery.2.1.2",
    "requirejs": "2.1.10",
    "qunit": "1.14.0",
    "sinon": "1.8.1"
  },
  "keywords": [
    "jquery",
    "javascript",
    "library"
  ]
}

As you can see this file is quite similar to Package.json of Npm.

Once installed you can remove or update a bower package using the following commands:

bower uninstall jquery
bower update jquery

Once a package is installed you can either reference the files directly from Bower_Components folder or copy them in some separate location and then reference them from your web pages. As mentioned earlier I prefer the later approach.

Creating Bower.json for all the Bower packages needed in a project

You can create Bower.json file for all the packages needed in a project using the following command:

bower init

This process is quite similar to what you used for Npm. So, I am not going to discuss it again. Once you create a Bower.json file with all the dependencies mentioned, you can install all the packages simply by:

bower install

Summary

Ok. So you are familiar with NuGet, Npm as well as Bower. If you followed all the examples discussed in this article your Visual Studio solution explorer should resemble this:

Let me summarize what we discussed so far:

• NuGet is primarily for installing .NET assemblies (compiled server side components).
• NuGet puts the package content in your project (typically Bin folder) and inside Packages folder under the solution folder.
• Packages.config file (XML format) lists all the NuGet packages installed in a project.
• Npm is primarily for Node.js packages and packages such as CoffeeScript or TypeScript that you use during development but that are not directly referenced from the web pages.
• Npm stores packages under Node_Modules folder (local repository) or inside C:\Users\<user>\AppData\Roaming\npm\node_modules folder (global repository).
• Each Npm package has Package.json file (JSON format) describing that package. You can also create a project wide Package.json file yourself.
• Bower is primarily for installing front-end packages - the packages that are directly referenced from the web pages.
• Bower stores packages under Bower_Components folder (local repository).
• Each Bower package has Bower.json file (JSON format) describing that package. You can also create a project wide Bower.json file yourself.
• Files from local Node_Modules and Bower_Components folders can be copied to some other project folder and then used from within your application.

That's it for now! Will be back with the next installment soon.