installing bower

Getting Started with Bower on an ASP.NET MVC project

ASP.NET MVC is the server-side world.Server-side means the code is executed by the server and results rendered to the front-end which is also known as client-side.

Bower is front-end package manager.Manages installations  and updates to newer  versions.

Prerequisites

You need to install node.js  which includes npm first.Download node.js .Node and npm will enable us install bower.Next, you need to install Github for Windows .

To check if all these three variables are installed in your PC,Open the command prompt and enter below commands.

node -v

npm -v
git –version

Results should look like below screenshot.

Getting Started with Bower on an ASP.NET MVC project

Installing Bower

Once you have everything working fine.It’s time to install bower.

npm install bower -g

The “-g ” means that bower will  be installed globally i.e it will be downloaded from npm servers.

How to use bower in a project

Create a folder and name it <bower-test>.Open command prompt.

Open< bower-test> folder  using cd bower-test command.

Then initialize bower  in the project folder by typing bower init command.See below screenshots.

Getting Started with Bower on an ASP.NET MVC project

You don’t have to worry much about the answers that you enter.You can change these values later.my bower.JSON file looks like this.

{
“name”: “bower-test”,
“description”: “just testing out bower”,
“main”: “index.html”,
“authors”: [
"Eric Mutua<ericmutua44@gmail.com>”
],
“license”: “MIT”,
“homepage”: “”,
“ignore”: [ "**/.*”,
"node_modules”,
"bower_components”,
"test”,
"tests”
]r> }



How to find and Install Packages with bower

1.Searching

There are two ways of searching packages.You can either use  or visit Bower website or  command line

bower search file-upload

will return below results.

searching bower packages using command prompt

2.Installing

After searching the package,you need to install it.As you can see above there are several options to choose from.let’s install jquery-file-upload.

bower install jquery-file-upload –save

results.install jquery-file-upload-using-bower

Now checking bower.json file on bower-components folder.Below code has been added.

“dependencies”: {
“blueimp-file-upload”: “jquery-file-upload#^9.12.6”,}

How to install bower package using Visual studio

To install packages from visual studio,first, you need to set up some tools that are needed. Once you have the tools set,open bower.json file in visual studio.Start typing and below is what I get on my side.installing-packages-using-visual-studio-min

Once you have added the package in json file,From visual studio install the packageinstall-bower-in-visual-studio

or using command Prompt.

bower install

Anything in json file will be installed.

How to Manage Bower Packages

1.List Packages

Command to list packages is <bower list>

installing-packages-using-visual-studio-min

2.Update Packages

Command to update bower packages is <bower update>

3.Uninstall certain package

To uninstall certain bower package command is <bower uninstall jquery-file-upload>

How to use  Bower in an ASP.NET MVC app

Below is a modified stock MVC template that use

Getting Started with Bower on an ASP.NET MVC project

Don’t forget to leaver a comment and share this article please.

About the Author: Eric K

My name is Eric.Am a software developer with skills in Php,Mysql, Java , Android,Node.js Above all, I have certification in Cisco Networking Associate (CCNA) and holds degree in Information Technology. Hire me: Email : kawi3462@gmail.com