NuGet, NPM and Bower

Thank for your awesome response for my previous post.Till now we have seen how we can use Entity Framework,Dependency Injection using Unity. Nowadays most of the libraries which we need for common task like working on excel, PDF’s, sending mail are all available online and we can search and install using NuGet Package Manager. In this post we will see how and why to use NuGet, NPM and Bower.

INTRODUCTION:

In older days using a external library was less of help and more of pain, first we needed to search than add to references folder, and it used to work good on local machine, but once deployed online used to give a lot of problems, also other issue was while working in team, you need to add this references again and again sometime. There was nothing which downloads the references when a new programmer joins the team and wants to add all references into his project, most of the time wasting lot of time in project setup. So we got Nuget Package Manager to our rescue, after it came to existence it is helping everyone.

Let’s see how these tools helping us today.

1. Nuget Package Manager: 

Nuget Package Manager was launched in 2010, and now it is very large system thousand of libraries are available to download. From Visual Studio 2012 it comes pre-installed in Visual Studio, initially it had lot of server side libraries, but you can get client libraries as well, But its main purpose is to distribute the server side libraries. Even Microsoft releases most of there libraries on NuGet nowadays, no need to download any package from website, just go to NuGet search for library and install.

If you are thinking NPM does almost same, than you are not wrong,but what is the difference let’s see the main difference. NuGet is mostly for server side packages, as already informed now we get most the libraries released by Microsoft on NuGet.

Let’s see how we can use NuGet in our project to add a package.

1. Let’s go ahead and add a new project, to add File->New Project and select Web from templates. Let’s name the project as TestApp.
2. On next page select the MVC template, once project is loaded go to solution folder, we will have one more folder as packages.This folder contains all dlls required to run the project.
3. Now there will be many packages which we don’t need or we want to add some package which we require, to manage this right click on project and select Manage NuGet Packages.
4. We will get the below tab where you can see all installed packages, and another tab has how many packages have a new update. The first tab which is Browse we can search and add a new package.
5. Let’s add a new package, in browse tab search for any package, let’s search for ORM and see the result we will get list of ORM framework available.See how easy it is to search, choose the package which you want and click install.
6. Once you click on install the same will be added to your references folder and package folder, you can get client side framework like angular as well.Now we know what NuGet does, let’s see NPM and bower
7. But wait this is not it, so what more we can achieve more, to explore more visit https://www.nuget.org and register on this website. If you have microsoft account you can use the same.
8. You can create and upload your package as well,we will cover that in our next post.

2. npm:

npm is default package manager for Node.js. In old days only way to get java-script package was to get it from official website or CDN, most of them are still available to download from CDN and official website like Jquery and Angular. But if we have a common platform where we can get all libraries that will be great isn’t it. This is what npm does, it has all the java-script libraries.

Unlike NuGet it doesn’t comes with visual studio, you need to install node.js on your machine.You can download from here.

Once node is installed let’s see how to use npm and install the package.

1. Once node is install go to command prompt, as i am working on windows you can run cmd.
2. Now change the current directory to your project in my case it is “D:\Blogs\NuGetExample\TestApp\TestApp”, from command prompt change the directory.
3. Once you are on your project folder run node -v to check the current version of node,the version on node must be higher than v0.10.32 to use npm. We don’t need to install npm as it comes with node.
4. To check the current version of npm run npm -v, in case it is less than 2.1.8 you can download the latest package from https://registry.npmjs.org/npm/-/npm-2.15.5.tgz where 2.15.5 is version, if there is a  higher version than this, you can replace the version in this URL and download the files.
5. Everything setup now let’s configure our project to use npm packages.
6. As we are already on our project folder, now run nmp -init command, we will be prompt to enter some values, from which name is only required parameter

   D:\Blogs\NuGetExample\TestApp\TestApp>npm init
   This utility will walk you through creating a package.json file.
   It only covers the most common items, and tries to guess sensible defaults.
   
   See `npm help json` for definitive documentation on these fields
   and exactly what they do.
   
   Use `npm install <pkg> --save` afterwards to install a package and
   save it as a dependency in the package.json file.
   
   Press ^C at any time to quit.
   name: (TestApp)
   Sorry, name can no longer contain capital letters.
   name: (TestApp) myapp
   version: (1.0.0)
   description: myPackage
   entry point: (index.js)
   test command:
   git repository:
   keywords:
   author:
   license: (ISC)
   About to write to D:\Blogs\NuGetExample\TestApp\TestApp\package.json:
   {
     "name": "myapp",
     "version": "1.0.0",
     "description": "myPackage",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
   }
   Is this ok? (yes) yes

7. Now click on Show All Files in Visual Studio, we will find an named package.json this is most important file here, go ahead and include this file.
8. Now let’s install the first package from npm, we will install angular you can find all the packages from here.
9. Go to command prompt as fire npm install angular –save  command. once command is executed open your package.json file. We will find a new changes dependencies added to our file. 

   {
     "name": "myapp",
     "version": "1.0.0",
     "description": "myPackage",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC",
     "dependencies": {
       "angular": "^1.5.8"
     }
   }

10. Also go ahead and click on Show All Files, we will see a folder “node_modules“ folder include the same. Notice we have angular folder and required angular libraries in it.

So now you can add the same in your project and use the same, all future libraries added will be placed under node_modules folder. Similar to NuGet, we can create and upload package on npm, we will cover the same in next blog.

3. bower:

Similar to npm and nuget, bower is one of the package manager, and like npm it is also a package manager for javascript. Confused when both are same, why to use bower, why npm is not enough.

npm is package manager where you can download the packages and use, but what if you want to keep track of packages which have new updates, download it automatically, in npm you can update the package when there is new update, but manually, bower does all these for you.No need to manually update the package.

So now we know the difference between npm and bower let’s see how it works.

1. Bower is an package which you can install from npm, it requires node,npm and git. For npm we have already installed node and npm comes with node, only thing left is git, you can download it from here.
2. Once git is installed, go to our command prompt and fire npm install -g bower to install bower.
3. Once bower is installed, fire bower init  to initialize bower for your current project.
4. like npm here also name is required parameter, once command is executed click on Show All Files, we will get bower.json file incude the same in your project.

   D:\Blogs\NuGetExample\TestApp\TestApp>bower init
   ? name myapp
   ? description myPackage
   ? main file index.js
   ? keywords
   ? authors Santosh Yadav <santosh.yadav198613@gmail.com>
   ? license ISC
   ? homepage
   ? set currently installed components as dependencies? Yes
   ? add commonly ignored files to ignore list? Yes
   ? would you like to mark this package as private which prevents it from being ac
   cidentally published to the registry? Yes
   
   {
     name: 'MyApp',
     description: 'myPackage',
     main: 'index.js',
     authors: [
       'Santosh Yadav <santosh.yadav198613@gmail.com>'
     ],
     license: 'ISC',
     homepage: '',
     private: true,
     ignore: [
       '**/.*',
       'node_modules',
       'bower_components',
       'test',
       'tests'
     ]
   }
   
   ? Looks good? Yes

5. Let’s install angular using the bower, fire bower install angular, once command is completed click on Show All Files again, we will see a new folder “bower_components” and it includes a folder called angular and files required for it.

In both package.json and bower.json file dependencies has all packages and its version name, if we want package to be referred only during development we can add a new tag dev-dependencies  and add the packages under it.

Similar to npm we can deploy a package in bower as well. We will see that in our next blog.

CONCLUSION:

In today’s world managing packages are difficult task, and this is where tools like NuGet, npm and bower is helping us. If we are looking for any package we know where to lookout.

For more info you can visit official site of bower,npm and NuGet.

You can follow my official facebook page , also subscribe my blog for more information.

You can also mail me on santosh.yadav19613@gmail.com in case you have any questions.