Bower – A Package Manager

Recently I blogged on Modern Web App development, in which I mentioned few tools which will ease the web development. Today, let’s explore one more tool – Bower, the package manager for Web.

As you may aware that modern web application development requires one to many libraries or frameworks, and maintaining all of them is really hard, especially while upgrading! Isn’t cool, if we have a tool to do this job! Let’s take a look at the tool –

Bower is a great tool which helps us to maintain the project or app dependencies in more elegant way!

How it works?

Bower uses bower.json manifest (similar to package.json) file to hold all the package information. You can easily edit this manifest file. Works like a configuration file for your packages. Using Bower commands you can install all those packages at once.

Installing Bower

You can install Bower using npm (Node Package Manager). If you don’t know what is npm, you can learn here – https://docs.npmjs.com/. So, if you don’t have npm installed on your machine. Install the Node.js, which will install Node as well as npm.

NOTE: Bower requires Git. So install Git before you proceed with Bower installation.

  1. Node.js 
  2. Git

You may have to open Terminal(on MAC OS) or PowerShell / Command Prompt (on Windows). [I recommend PowerShell on Windows than Command Prompt.]

Type the following command –

npm install -g bower

NOTE: You may get permission issues, so you run the above command using sudo in MAC. On Windows, run the PowerShell or Command Prompt with Administrator Privileges.

Once you are done installing Bower globally, now we are ready to play with it!

Now, we need to create bower.json manifest file. You can create this manifest file manually or through bower.

Manually creating bower.json – Create a file and rename it to bower.json. That’s it! Data included in this manifest file should adhere to the spec –  https://github.com/bower/bower.json-spec

A Sample bower.json for Angular app

{
 "name": "demo-app",
 "version": "1.0.0",
 "dependencies": {
 "angular": "^1.3.0",
  "bootstrap": "^3.2.0",
 "angular-animate": "^1.3.0",
 "angular-cookies": "^1.3.0",
 "angular-resource": "^1.3.0",
 "angular-route": "^1.3.0",
 "angular-sanitize": "^1.3.0",
 "angular-touch": "^1.3.0"
 },
 "devDependencies": {
 "angular-mocks": "~1.3.0",
 "angular-scenario": "~1.3.0"
 },
 
}

Interactively create bower.json – You can create the bower.json interactively using  –

bower init

Answer the questions popped by Bower and it will create the file for you.

How to add new packages?

Try the following command –

//install the package and add it to bower.json dependencies
bower install <package-name> --save
//Ex: bower install jquery --save

You can search for available packages  – http://bower.io/search/

Update the bower package  –

bower update <package-name> <package-name> [options]

//-F: Force latest version on conflict

//Ex: bower update jquery -F

Uninstall the bower package  –

bower uninstall <package-name> [options]

//-S: Remove uninstalled packages from the project’s bower.json dependencies

//Ex: bower uninstall jquery -S

More Bower API’s – http://bower.io/docs/api/

Can I register my own package or library?

Yep, you can do that using bower register – 

bower register <your-package-name> <git-endpoint>

//Ex: bower register mylibrary git://github.com/user/example.git

You can also unregister – http://bower.io/docs/creating-packages/#unregister

Bower comes with lot of tools, which allows you to integrate the Bower with other IDE’s and tools. More info – http://bower.io/docs/tools/

Hope you have got quick overview of Bower package manager and usage of the tool.

Happy Web Programming!

Installing/Configuring AjaxControlToolKit through NuGet

I see many questions has been asked regarding installation/configuration of latest version of AjaxControlToolKit in ASP.NET, Experts-Exchange etc., forums. So i thought of writing an blog post on this.

One of the best community tool set available for ASP.NET WebForms developers is AjaxControlToolKit. Microsoft is making sure that this Ajax control tool kit is updated frequently, to make developers task easier!

In this article, i will show you how to configure AjaxControlToolKit through NuGet. Believe me it’s pretty simple process and moreover it’s fast. It’s just avoid the downloading of the package, extracting it and copying it to the Visual Studio and configuring it etc.,

With NuGet, setting up the AjaxControlToolKit in Visual Studio development environment is never so easy.

NOTE: I’m explaining this article using Microsoft Visual Studio 2010 Professional, since most of the users are working in this IDE.

Let’s get our hands dirty….

1.  Let’s create a new ASP.NET Empty Web Site.

image

image

2.  We are done creating a empty website. Now we will configure AjaxControlToolKit through NuGet.

3.  Right click on the web site and select Manage NuGet Packages

image

4. It will invoke Manage NuGet packages dialog.

image

5.  Now search for “ajaxcontroltoolkit” keyword in the textbox on the right side top corner. It will list you the latest version of AjaxControlToolKit.

image 

6.  Click on Install button to install the AjaxControlToolKit.

image

7.  Once it’s done, close this dialog.

image 

8.  Now if you open the web.config file, you can see the AjaxControlToolKit already registered.

image

9. We are done with the setup. Add a ASP.NET web page, and we will test this by adding an control from AjaxControlToolKit.

image

 

NOTE: You should use Toolkit ScriptManager control, instead of Ajax ScriptManager controls, which you can observe in the above code!

10.  Now it’s time to test. I know, you are successful.

Through NuGet, Not only AjaxControlToolKit, there are many more community developed tools available, which i leave it for you explore.

Finally, NuGet made the developer task very easy!

Happy Web Programming…

Thanks