Add Bower in an ASP.NET 4.5 application

Bower is packager manager that allow you to manage the client packages of your application and it can be easily integrated with in a deploy workflow with a task runner like Gulp.

In this example, the sample application is an ASP.NET application with some NuGet packages installed and using Gulp to automate the deploy workflow.

With Bower you can manage packages like AngularJS, Boostrap, JQuery and so on; it’s a front-end package manager and it can be installed with npm (Node.js Package manager) :

npm install bower -g

In order to using Bower in an ASP.NET application, the first step is adding the bower.json file:

bower

Bower install the packages in the path defined in the file .bowerrc and you can change it:

{
"directory": "bower_components"
}

Now you can using Bower to install the client packages which the application needs.

Once of the packages installed with NuGet on the existing application is AngularJS; it can be installed with Bower:

bower install angular –save

With the option –save, the bower.json file will be updated:

{
"name": "angular-signalr",
"private": true,
"main": [
""
],
"dependencies": {
"angular": "~1.5.5",
}
}

You can do the same operation for the other packages of the application; they will be installed in the bower_components path and new rows will be added in the bower.json file:

{
"name": "angular-signalr",
"private": true,
"main": [
""
],
"dependencies": {
"angular": "~1.5.5",
"angular-bootstrap": "angular-ui-bootstrap-bower#~1.3.2",
"angular-ui-router": "~0.2.18",
"AngularJS-Toaster": "aangular-toaster#~0.4.11",
"angular-loading-bar": "~0.9.0",
"angular-animate": "~1.5.5",
"angular-resource": "~1.5.5",
"bootstrap": "~3.3.6",
"jquery-ui": "~1.11.4",
"jquery": "~2.2.3",
"signalr": "~2.2.0",
"q": "1.0.1"
}
}

Now what we need to do is automate the workflow and inject these packages in the index page; you can do that with two Gulp plugins:

npm install –save-dev gulp-bower

npm install –save wiredep

You can find exhaustive documentation about these two plugins on the npm site.

The next step is adding the dependencies in the gulpfile.js of the application and creating the new task:

'use strict';

var gulp = require('gulp'),
bower = require('gulp-bower'),
wiredep = require('wiredep').stream

gulp.task('bower', function () {
return bower();
});

gulp.task('wiredep', ['bower'], function () {
var source = gulp.src('./' + config.indexDev);

return source.pipe(wiredep({}))
.pipe(gulp.dest('.'));
});

The main html file need to be changed, in order to make wiredep working:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Angular SignalR Application</title>

  <!-- build:css Content/lib.min.css -->
  <!-- bower:css  -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js Scripts/lib.min.js -->
  <!-- bower:js  -->
  <!-- endbower -->
  <!-- endbuild -->
</head>
<body ng-app="angularSignalR">
</body>
</html>

In the bower.json file you need also specify the main application modules:

{
"name": "angular-signalr",
"private": true,
"main": [
""
],
"dependencies": {
"angular": "~1.5.5",
"angular-bootstrap": "angular-ui-bootstrap-bower#~1.3.2",
"angular-ui-router": "~0.2.18",
"AngularJS-Toaster": "aangular-toaster#~0.4.11",
"angular-loading-bar": "~0.9.0",
"angular-animate": "~1.5.5",
"angular-resource": "~1.5.5",
"bootstrap": "~3.3.6",
"jquery-ui": "~1.11.4",
"jquery": "~2.2.3",
"signalr": "~2.2.0",
"q": "1.0.1"
},
"overrides": {
"angular": {
"main": [
"angular.js"
]
},
"angular-bootstrap": {
"main": [
"ui-bootstrap-csp.css",
"ui-bootstrap.js",
"ui-bootstrap-tpls.js"
]
},
"angular-ui-router": {
"main": [
"release/angular-ui-router.js"
]
},
"AngularJS-Toaster": {
"main": [
"toaster.css",
"toaster.js"
]
},
"angular-loading-bar": {
"main": [
"src/loading-bar.css",
"src/loading-bar.js"
]
},
"angular-animate": {
"main": [
"angular-animate.js"
]
},
"angular-resource": {
"main": [
"angular-resource.js"
]
},
"bootstrap": {
"main": [
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
},
"jquery": {
"main": [
"dist/jquery.js"
]
},
"jquery-ui": {
"main": [
"jquery-ui.js"
]
},
"q": {
"main": [
"q.js"
]
},
"signalr": {
"main": [
"jquery.signalR.js"
]
}
}
}

Now the configuration is completed and you can run the gulp tasks; once verified that the application works correctly, you can proceed with uninstalling the NuGet packages managed with bower; for example unistall AngularJS:

uninstall package AngularJS

You can find the project here.

 

 

 

 

Advertisements
Add Bower in an ASP.NET 4.5 application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s