Monday, March 31, 2014

Setting up Bower with ASP.Net MVC

In our last blog post, we went over some basics for creating an ASP.Net project with AngularJS. This time we are actually going to get AngularJS installed, and setup our bundling in an intelligent manner.

Since the open source community around JavaScript moves WAY faster than most people can package NuGet packages, we are going to (for the sake of this tutorial) use Bower for our JavaScript, instead of NuGet.

Bower, a package manager for the web, is super simple to install, assuming you have Node and npm installed. This command can be ran anywhere, since it is stilling Bower globally.

npm install -g bower

First, lets create a .bowerrc file, which is the settings we want to use for Bower, the largest reason we want this, is so we can put the download packages inside of our website, rather than inside our solution folder.


*NOTE: you will need to create this outside of Visual Studio, the IDE will not let you create unnamed files with just extensions.


Inside this file, simply put the following snippet:

{
"directory": "MyAngularSite/components",
"strict-ssl": false,
"json": "bower.json"
}

That second bit "strict-ssl: false" is for https errors behind corporate firewalls, feel free to omit that, or set to true


Now that we have configured Bower, next is to start defining our bower.json that we will use for our project.

{
"name": "MyAngularSite",
"version": "0.0.1",
"dependencies": {
"jquery": "~1.11.0",
"angular": "~v1.2.15",
"angular-route": "~v1.2.15",
"angular-resource": "~v1.2.15",
"angular-cookies": "~v1.2.15",
"underscore": "~1.6.0",
"bootstrap": "~v3.1.1",
"angular-bootstrap": "~0.10.0"
},
"private": true
}

Those are the core dependencies that we are going to use for this series. jQuery, because we might need it for some things (jQuery is NOT required), angular of coarse, routing, resources, and cookies for angular. Underscore is a fantastic utility library for .Net developers, includes things like foreach, etc… and finally twitter boostrap and the angular directives for bootstrap.


*NOTE: Before running bower install, you will want to make sure that git.exe is in the current PATH directory, I personally have my C:\Program Files (x86)\Git\bin included in my PATH environmental variables.


Only thing left to do from here, is run bower.install:

bower install

Now, inside of Visual Studio, hit the “Show All Files” button in the Solution Explorer:


image


You will now see a new folder called “components” in the root of your project, right click and select “Include in Project”


image


This will include all the “junk” from the bower installations, very similar to what you would see with a NuGet package install.


Now let’s get a bundle for our dependencies put together. Let’s add the Web.Optimizations NuGet package to our web project.


PM> Install-Package Microsoft.AspNet.Web.Optimization

Now that we have the Web Optimizations kit, lets now go through and create a bundle for our dependencies. In the App_Start directory, create a new BundleConfig class file with the following content:

    public static class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/dependencies")
.Include("~/components/jquery/dist/jquery.min.js")
.Include("~/components/angular/angular.min.js")
.Include("~/components/angular-route/angular-route.min.js")
.Include("~/components/angular-resource/angular-resource.min.js")
.Include("~/components/angular-cookies/angular-cookies.min.js")
.Include("~/components/underscore/underscore.js")
.Include("~/components/angular-bootstrap/ui-bootstrap.min.js")
);

#if (DEBUG)
BundleTable.EnableOptimizations = false;
#else
BundleTable.EnableOptimizations = true;
#endif
}
}

Note specifically that bottom portion, this is completely optional, but I prefer to test my bundling by the compilation flag, not by the web.config debug=true attribute.


Now, in the Global.asax, we need to call the BundleConfig.RegisterBundles, let’s append it in the Application_Start.

        void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);

// Bundling
BundleConfig.RegisterBundles(BundleTable.Bundles);
}

And finally, to get our dependencies wired up to our page, we simply need to open up the Views/Home/index.cshtml and call Scripts Render with our bundle path before the closing body tag.

@System.Web.Optimization.Scripts.Render("~/bundles/dependencies")

Now we have Bower all hooked up, as well as having our scripts minified and bundled easily.


Stay tuned for the next posts when we start hooking up the UI and AngularJS application.


You can find the code used in this Blog Post on my GitHub Repository.

No comments: