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:


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


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")

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

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

// Bundling

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.


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.


for ict 99 said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

for ict 99 said...


Angular 5 Resources

| Angular 5 Training in Chennai. Angular 5 Training in CHennai

sriram said...

It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command.
Angularjs course in chennai

Naveen S said...

Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
Software testing course in chennai

Praylin S said...

Thank you for providing us such valuable information. I really appreciate your effort and hard work. Keep posting more such informative articles.

Mobile Testing Training in Chennai
Mobile Testing Course in Chennai


Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.

Thanks & Regards,
VRIT Professionals,
No.1 Leading Web Designing Training Institute In Chennai.

Web Designing Training Institute in Chennai
SEO Training Institute in Chennai

Sadhana Rathore said...

Very nice post with lots of information. Thanks for this updates.
ui ux design course in Chennai
ui design course in chennai
ui developer course in chennai
Ethical Hacking course in Chennai
Web Designing Course in chennai
Web development training in chennai
PHP Training in Chennai
ui ux design course in Anna Nagar
ui ux design course in Vadapalani
ui ux design course in Thiruvanmiyur

Aruna Ram said...

Superb!!! The blog was very informative and I was impressed your great post. I appreciate to you and continue blogging...
Oracle DBA Training in Chennai
best oracle dba training in chennai
Spark Training in Chennai
Oracle Training in Chennai
Unix Shell Scripting Training in Chennai
Placement in Chennai
Soft Skills Training in Chennai
JMeter Training in Chennai
Tableau Training in Chennai
Oracle DBA Training in Porur

divi said...

thanks for your information really good and very nice web design company in velachery

sandhiya said...

Wonderful blog with great piece of information. Regards to your effort. Keep sharing more such blogs. Looking forward to learn more from you.
AWS Training in Chennai
AWS Certification in Chennai
Best AWS Training in Chennai
Cloud Computing Training in Chennai
RPA Training in Chennai
Data Science Training in Chennai
AWS training in Guindy
AWS training in Vadapalani
AWS Training in Anna nagar
AWS Training in Velachery

virgoacp said...

Aluminium Composite Panel or ACP Sheet is used for building exteriors, interior applications, and signage. They are durable, easy to maintain & cost-effective with different colour variants.

Carolina Classics said...

Are you looking for the best quality F 100 Classic Ford Truck Parts online? Carolina Classics is the manufacturer of best F-100 Ford Truck Parts | Buy F 100 classic Ford truck parts online at Carolina Classics.

Servo said...

Thanks for sharing this information.
Want to Buy Step Down Transformer or Are you Curious about What is Step Down Transformer? Read the blog to get your queries resolved before making a purchase.

priya sharma said...

Such A nice post... thanks For Sharing !!Great information for new guy like Happy New year 2020

anita said...

Such A nice post... thanks For Sharing !!Great information for new guy like Hanuman Chalisa Lyrics

phautecouture said...

Panache Haute Couture, a leading Indian Designer House for Indian Dresses. You can Buy Designer indian wedding dresses lehenga dresses, anarkali suits, indo western bridal gowns,
lehenga choli online, Designer Sarees Online at Online.

lehenga choli

lehenga online

info said...

I’m inspired, I should say. Seldom do I come across a blog that’s both educative and thrilling, and genuinely, you have hit the nail at the pinnacle. The problem is an trouble that no longer sufficient folks are speaking intelligently about. Now i am very happy I stumbled across this in tech the direction of my hunt for some thing regarding this.

IT said...

The development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. machine learning projects for final year In case you will succeed, you have to begin building machine learning projects in the near future.

Projects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.

Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.

The Nodejs Training Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

Banumadhu said...

Excellent blog thanks for sharing the valuable becomes easy to read and easily understand the information.
Useful article which was very helpful. also interesting and contains good information.
to know about python training course , use the below link.

Python Training in chennai

Python Course in chennai

rajmohan1140 said...

Really very happy to say, your post is very interesting to read. I never stop myself to say something about it. You’re doing a great job. Keep it up

Java Training in Chennai

Java Course in Chennai

Ubiqcom said...

UBIQCOM is a GPON ONU Router Manufacturer and Supplier in India. It offers a range of benefits including higher bandwidth, better download speed, faster uploads, higher transmission efficiency and so much more. UBIQCOM is the best GPON router in India and also provides the best GPON router price.

Proforyou said...

If you're looking for the best air purifier in India, look no further. In this blog, you'll find the 10 best air purifiers options available right now! Choose from a wide range of Air Purifier online in India and get the best offers only at Proforyou.

Links For You said...

this is a particularly wonderful helpful asset which you are offering and you find the money for it away for justifiable. I truly like seeing online journal that arrangement the expense of providing an energies valuable asset for pardon. thanks! Microsoft Office 2019 Free Download With Crack

Silent Girl said...

this is my most memorable end up antiquated I visit here. I found for that excuse numerous appealing stuff in your weblog explicitly its wind current. From the stores of criticism vis- - vis your articles, I bet I'm not the unmarried-handedly one having all the happiness here shop happening the affable do thanks! Malwarebytes Anti Malware Premium Keygen

Back linker said...

excellent site, where did u come happening thinking about the notice coarsely this posting? i've habit in some of the articles practically about the request for your site now, and I actually in impersonation of your design. much obliged a million and fascinate continue onward on the working release dependability. thanks! Twins Birthday Wishes Greeting Card