NPM, BOWER, NUGET, GULP – The Four Horsemen of ASP.NET CORE Apps

It's not really a introduction

Okay! So I’m not going to waste your time here giving some definitions of these four well known and broadly used tools. Rather I’ll show you how you can get most out of these tools while working on an ASP.net core web applications. I’m going to start with a blank project and will add these tools (except for NuGet. All Asp.net core apps support NuGet by default) one by one in the project. Finally you will have a good understanding on which tool is for what purpose? So, let’s get started.

NPM – Node Package Manager

So the first one is NPM. Hmm! Now you would say, “Well well well! I’m building an Asp.net application. Isn’t npm for node applications?”. Well you are somewhat right and somewhat wrong. Npm is used in node applications to manage node packages. For example: if you are a node application developer then you may know that for building express apps you need a module named express. But how would you get the module? That’s where you use npm. https://www.npmjs.com/ has a lots of ready to use packages that you can use by installing them using npm. Now you might be wondering that, “Oh! If I can use node packages in my Asp.net Core app then I should be able to build a node server inside Asp.net Core server”. Of course you can! Besides using node packages for building node apps there are also other packages available for other tasks too. Like you can use npm to resolve client dependencies such as Angular, JQuery, Bootstrap. You can also get benefits from using some build automations tools such as grunt and gulp which is again available to download using npm. Let’s see how we can add npm in our Asp.net Core project.

Create an Asp.net core web application and chose the empty template

After creating the project, you should have your project structure looks like this,

Now add a new file by right clicking on the solution. Search for NPM. You will get an named npm Configuration File.

Now you can add new packages from the devDependencies node. Let’s install the gulp packages. (More about gulp later).

As you can see we have intellisense for the package version and the package itself. As you can see in the image that (^) means that npm should download the most recent major version of the package while (~) means the most recent minor version. If you don’t want to bother yourself with the latest version (Cause sometimes this can cause breaks in your application if you have dependent packages) then you can just install the stable version which doesn’t include any special character at the beginning . Now hit ctrl + s and see the magic. It will install the node package under Dependencies > NPM folder.

We will come back here again when we will talk about gulp.

Bower

Okay! So managing node packages with NPM was easy. Let’s install some client side dependencies like Angular and Bootstrap with it. As I already said, you can of course install these client side dependencies with npm. But wait think of it like this, I’m installing node packages which will be used totally in the server side. For example, if I want to use gulp, first I'll import the module in my server side js script like this,

var gulp = require('gulp')

But I can’t do this for a client side library. For example, I can’t writevar angular = require('angular') in the server side. Actually that doesn’t make any sense since I can’t use a client library in server side.

So comes Bower. Bower is broadly used to resolve client side dependencies so that you have some separation of concern in your project. Bower also has a configuration file, where we will add depencies like we did in the npm Configuration File. So let’s add a bower Configuration File

By the way if you can’t find your package.json and bower.json files just select show all files from the solution explorer.

As you can see bower.json has a child node named .bowerrc. Here we can define some configurations for bower.

By default we have a directory property defined with the value wwwroot/lib. It means that, install all the bower dependencies in the lib folder under wwwroot. You can go through other configurations if you like. Let’s install some client dependencies. Go to the bower.json file and add dependencies in the dependencies property and hit crtl +s just like we did for the node packages. I’m adding Angular and Bootstrap for now,

Now your project structure should look like this,

Notice that JQuery is needed if you want to use the bootstrap js components. That means bootstrap has a dependency on JQuery. Bower, by itself figures out these kinds of things and makes your developing life easy.

NuGet

Until now we’ve been discussing on how we can manage packages for server side and client side using two famous tools i.e. npm and bower. But if you are a .net developer then you would need something similar to resolve .net dependencies if you want. Don’t worry we have NuGet for that. Right click on the project and choose Manage NuGet Packages from the options. You will be presented with a new window where you can see your installed .Net Core packages. Form the Browse tab, you can browse and install other packages. Let’s install a package named Json.net . It’s a great package for serializing and deserializing json in and out of your application.

Like NuGet, Bower has also a package managing UI. If your eyes are sharp then you may have already noticed it under the Manage Nuget Packages option. Anyways you might be wondering that “Can I manage .net packages just like I did with NPM and Bower?”. Yes, you can! Just open the project.json and you will see a dependencies property and there you will also see our installed Json.Net package. Let’s install another package from here. Here I’m installing a .Net Core package for serving static files Microsoft.AspNetCore.StaticFiles.

GULP

So far we’ve been talking about package managers. Let’s talk about a famous javascript build automation tool called Gulp. The main focus of gulp is it provides code over configuration (there is another automation tool called grunt which focuses on configuration over code) to help you manage tasks. Now what are some example of those tasks can be? Well you can start with a very minimal task like minifying all the js scripts in your application and serve them in a single file to prevent excess requests on the server. You can also write a compile script which will compile all the typescript files in you project and output them in plain js scripts. You can do a lots of stuffs with gulp. The sky is the limit. Let me show you how you can write a simple task which will minify all the js scripts and concat them in a single file. So I created a folder named app under wwwroot and added these two files named app.js and controller.js. You don’t have to go trough the code. Our main focus is to minify them and concat them in a single file.

Now add a Gulp Configuration File

Here is the task script to concat and minify all the scripts available in the app folder. After executing the task, it will create a new script file named site.min.js where you will see the minified and concat version of those two files (app.js, controller.js)


var gulp = require('gulp'),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify");


gulp.task("min:js", function () {
    return gulp.src(["./wwwroot/app/**/*.js", "!" + "./wwwroot/app/**/*.min.js"], { base: "." })
        .pipe(concat("./wwwroot/js/site.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

To run the task, we have Task Runner Exploerer. Just select the available task from the left side and right click on it and Run

Here is how the site.min.js looks like after running the task

I hope now you are clear about which tool is used for what purpose. Play with these tools and have fun and I’ll see you in the next post.

Important Notes

For npm and bower, always install packages by defining them in the package.json and bower.json. If you are familiar with installing packages using console, then this is equivalent to install packages with --save flag. For example,

  
  npm install --save gulp
  
  

Benifit of this is that your packages won't be pushed to the source control (like github) if you are using any . And the people who wish to use your project can restore them after requesting a pull. Packages will be restored automatically if you build your app in Visual Studio. You can also restore them using commands like.

  
  npm install
  bower install
  
  

Download Source Code

Github Repository Link - https://github.com/fiyazbinhasan/angular-typescript-net-core-template

This github repository has two ready to use project templates. One, which I showed through out this post. Another one is a template for builing Angular apps with typescript in Asp.net Core.