Skip to content

NPM and Bower together in ASP.NET Core. Two great tools

Today I am going to explain about NPM and Bower that are novelties in ASP.NET Core that will be released this year. Both are package managers, but each one has a responsibility different. In addition, I explain why the Microsoft want to bet in NPM and Bower and as stays the Nuget in this context.

The ASP.NET Core changed and everybody already knows. Those Who has not seen the changes, I suggest read my article about the subject. However, If you still thought that will have to learn a new platform, keep calm, because the changes are more intern than that extern. 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 history of Microsoft, all is developed to fit with your platform. Starting from of the Asp.net Core, it will be utilized others platforms outside of .Net to auxiliary the development. Today I explain about NPM and Bower. In a next article I write about Gulp.

NPM

Everybody must have an idea what Node is. Some people must say Node.js is something done in Javascript and that runs in 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 other article my about the subject.

Node.js is one of the largest development platforms. It can be do not used directly to development, but to auxiliary the development and 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 can do not 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 of NPM is possible install Yeoman to generate a scaffold of project. Installing Bower to manage clients packages and still has the Gulp for tasks of minification of files and others things. That just happens thanks NPM, because Yeoman, Bower and Gulp are packages created to Node.js and that now also is used in ASP.NET. Some development platforms also are using Node.js as auxiliary, this is a tendency and the Microsoft is betting in this.

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

imagem1

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

imagem2

In case where you need of more packages, you can install just changing this file that when to start the typing, the NPM seeks packages similarly. When you choose the package, it is automatically installed. Other 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 are packages as jQuery, Angular and others clients that we use in our projects. In this moment comes an ask: Why use Bower since that o Nuget does that? When I saw the Bower I also got 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 is stored in the Bower and not in the Nuget, because it is only to .Net. For this reason, the Microsoft decides to bet in the Bower and using it in the development. Already with o Nuget, it continues but just to library of back end as Identity, MVC and many others packages that there are and that works only to .Net.

imagem3
According with the image above, the Bower is shown as a dependency in Visual Studio, as the NPM. In image is possible to see your folder and the packages that are managed by it. As in the NPM, in the Bower also has file of configuration called bower.json that manages the packages. If you want add, remove or change a package, just change that file that when to start the typing, it are brought the packages similar with the name typed. 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 has the statics files and the generated files as CSS and JS. When the 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 that the Bower installs the packages inside this folder, is necessary a configuration to inform where will be installed. This configuration file is called .bower and there you can inform the path in case of change.

Conclusion

NPM and Bower are newness and by default already are installed in the ASP.NET Core projects. Using is a prefer and you do not need to use the Bower to use the packages as jQuery and Angular, the old way of find in the internet and make download still works. But we cannot let to see that the use the Bower will facilitate much in new projects. Using NPM and Bower can be a overcoming of habit change and as all change, it takes a while for used to.

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

Published in.Net Core

Be First to Comment

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *