Bower in ASP.NET MVC 4/VISUAL STUDIO 2012

(ASP.NET MVC)


Hi,

I used the asp.net mvc 4 in one of my client project. I read the visual studio 2015 documentation, One of the major change is using bower and gulp/grunt in the asp.net mvc 6. I decided to use the bower and gulp in asp.net mvc 4 with visual studio 2012. I am going to discuss about it in this article.

What is bower?

Bower is a package manager for the javascript libraries. For example using the bower i can download the latest version of the jquery package and use it in my project. Like nuget package manager, which used for managing the packages in the server side.

Step 1: Go to the nodejs.org website to download the node and install it in the windows os.

Step 2: Install the bower through node package manager using the following command "npm install -g bower" . -g stands for the global. refer "Figure 1"

Install Bower

Once you installed the bower package through the node package manager. You will find the bower package in your pc, refer "Figure 3".

Node Package Manager

Create the new asp.net mvc 4 project using the visual studio 2012/2013. Open the newly created project directory and copy the path. refer "Figure 4"

Project Directory

Open the windows command prompt and set the path in the command prompt to the newly created project directory and run the "bower init" command to initialize the bower in your mvc4 project.Once you add the bower in asp.net mvc 4 project, you will find the bower.json file in the root of the project directory, Include the bower.json file in your project. The bower.json file contains the properites and values, which you set while initialize the bower through command prompt. Refer "Figure 5".

Bower 2

Now bower is added into your mvc 4 project. You can use the bower to download the latest/specific version of the javascript libraries. For example i want to download and use the latest version of the jquery libraries in my mvc 4 project. So, i am going run the following bower command "bower install jquery --save". It will add the jquery library inside the bower_components folder. Refer "Figure 6". Don't include the "bower_components" directory into your mvc 4 project. We are going to use the task runner called the "gulp" to copy the required jquery scripts and place it into our project scripts directory. Once you install the new libraries through bower. The bower will add the reference for the newly downloaded library into the bower.json file in the "dependencies" object". Refer "Figure 6".

Bower Four

To uinstall the bower packages run the following command "bower uninstall jquery --save". Refer "Figure 7".

Bower 5

Useful bower commands:

bower search jquery   - search jquery packages in the remote server.

bower install jquery#1.8 --save  - install the specific version of the jquery package.

We installed and used the bower in the asp.net mvc 4 project. Read the article "Gulp in  ASP.NET MVC4/VISUAL STUDIO 2012" to copy the bower packages scripts and place it into our project scripts directory to use it in our application.

test code


Ratings


Average Rating: 5.00 by 6 users
Giri Prasad
8/30/2015
8/30/2015
Download PDF
Download Project

Comments






Jim

Very nice!!


Smith

I understand the bower and gulp. Cool Article!


Johnny

Really good article