NPM And Bower Together In ASP.NET Core

Hello everybody! Today, I am going to explain about NPM and Bower, which are novelties in ASP.NET Core that will be released this year. Both are package managers, but each one has different responsibility. Besides, I will explain why Microsoft wants to bet on NPM and Bower and as continues the Nuget.

The ASP.NET Core changed and everybody already knows. Those who have not seen the changes, I suggest reading my article about the subject. However, If you still think that you will have to learn a new platform, keep calm, because the changes are more internal than that external. For example, you still are going to use the MVC, Web API, Razor, the wonderful C# and others. But a thing that I noted when I went to toy with the new ASP.NET was see the NPM, Bower and Gulp. I admit that I was not expecting that, because by the history of Microsoft, all is developed to fit with your platform. Starting from of the Asp.net Core, it will utilize others platforms outside of .Net to auxiliary the development. Today I explain about NPM and Bower. In a future article I will write about Gulp.

NPM

Everybody must have an idea about what Node is. Some people must say Node.js is something done in Javascript and that runs in the Server. This thought is a brief summary and it is not wrong. However, Node.js is much bigger and today we can use it for anything in development. If you want to know more about Node I suggest my other article about the subject.

Node.js is one of the largest development platforms. With ASP.NET It cannot be used directly on development, but to auxiliary the development and it was thus that Node was introduced in ASP.NET Core. You will not use Node.js to develop, but it is going to help and auxiliary the development. You cannot see, but now we have Node.js working in our projects.

As I said above Node.js is a development platform. Already NPM is your package manager. Through NPM it is possible to install Yeoman to generate a scaffold of the project. Installing Bower to manage clients packages and still has the Gulp for tasks of minification of files and other things. That just happens thanks NPM, because Yeoman, Bower and Gulp are packages created to Node.js and that now also are used in ASP.NET. Some development platforms also are using Node.js as auxiliary, this is a tendency and the Microsoft is betting on this.

When you create a new project ASP.NET Core, it is possible to see the Node.js in the Visual Studio according the image below, where all packages installed through NPM are shown. Inside of the “Dependencies” it is possible see the packages. There are all packages being used by Gulp. If you still have doubts about NPM, it has the even function of Nuget.

imagem1

One asks, why has the NPM already installed all those packages? Simple, all these packages were “registered” in a file called package.json according the image below. This file, as the name says, informs all the packages that are used by the system. Note that the packages are in “DevDependencies”, where packages only needed for development are. When published, those packages will not be deployed.

imagem2

In cases where you need more packages, you can install by just changing this file so that when you start typing, the NPM seeks packages similarly. When you choose the package, it is automatically installed. Another way to install packages is through command, where you inform something as “NPM install <packages>”. This moment the package is installed.

Bower

As in the NPM, Bower is a tool that manages packages too, but now it's packages such as jQuery, Angular and others clients that we use in our projects. In this moment comes a question: Why use Bower since Nuget does that? When I saw Bower I also had this question. But when I went to research I understood the reason. Bower is the bigger client package manager and when a developer develops a new library it is stored in Bower and not in Nuget, because it is only to .Net. For this reason, Microsoft decides to bet on Bower and uses it in the development. Already with Nuget, it continues, but just to the library of the back end as Identity, MVC and many others packages that there are and that work only to .Net.

imagem3
According to the image above, Bower is shown as a dependency in Visual Studio, as NPM. In the image is possible to see your folder and the packages that are managed by it. As in the NPM, Bower also has files of configuration called bower.json that manage the packages. If you want to add, remove or change a package, just change that file that when typing, the packages with names similar to the name typed are brought. The image below shows this behavior that works very well.

imagem4

imagem5

In the ASP.NET Core, we have a new folder called WWWRoot, in this folder are the statics files and the generated files as CSS and JS. When Bower installs the packages, the libraries are send to lib folder. The image below shows a new folder and the lib folder where the Bower installs the packages.

imagem6

For the Bower to install the packages inside this folder, a configuration to inform where it will be installed is necesssary. This configuration file is called .bower and there you can inform the path in case of change.

Conclusion

NPM and Bower are new and by default already are installed in the ASP.NET Core projects. Using is preferred and you do not need to use Bower to use the packages as jQuery and Angular, the old way of finding it on the internet and downloading still works. But we cannot help but to see that the use of Bower will facilitate a lot in new projects. Using NPM and Bower can be overcoming a habit and as with all change, it takes a while to get used to.

I hope that you have understood the subject of today. Thanks and until next time!