Prepare Yourself for ASP.NET 5 - Part 2 (NuGet, Npm, Bower)
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
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
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 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:
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:
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
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
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
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 :
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:
"test": "echo \"Error: no test specified\" && exit 1"
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
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
Now save the Package.json file and issue the following command :
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
--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
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.
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
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
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
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:
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:
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
- 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
- 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
- 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.