In .NET land, for package management we’re pretty much all settled on using Nuget. It’s close to ubiquitous, which means, that pretty much any .NET open source (or not) library, can be found there.
There are a few most popular non-.NET packages too. This category contains mostly JavaScript/CSS libraries, which tend to be used in the front-end of projects using .NET on the backend.
While Nuget is great to help you get your foot in the water of the great and broad JavaScript ecosystem, you’ll soon find its suffering from a few drawbacks:
- The JavaScript packages on Nuget only cover a small subset of the ecosystem
- The packages on Nuget are usually unofficial, that is maintained by people not affiliated with the projects, and they can lag behind the official releases
Bower is to web (JavaScript/CSS) packages, what Nuget is to .NET.
On a recent project we used NancyFx to build out .NET backend services, and SPA client (based mostly on AngularJs). We used Nuget for our .NET packages and Bower for the client. This post shows how to set Bower up on Windows, and integrate it into a Nancy project.
Getting started
To get Bower you’ll need to have Node and Git installed. Also make sure both of them are in your PATH
. Once this is done simply open your command prompt and type
npm i -g bower
After this finishes, you can type bower -v
to confirm Bower is installed (and see the version)
Once this is done, let’s open Visual Studio and create a new Nancy Project (I used one of Nancy Visual Studio Templates)
This will give you a simple starting website.
For static content, like the .css and .js files Bower manages, the convention in Nancy is to stick them in the /Content
folder. (see the doco)
Let’s try using Bower to fetch Angular. Open your command prompt and make sure you’re in your solution directory.
Bower 101
There really are very few Bower commands you’ll need
bower seearch angular
will find all matching packages (there are quite a few)
bower install angular
will install the package (if you’re getting errors make sure Git is in yourPATH
)
You’ll notice, however that instead ofContent
the package is installed intobower_components
the .bowerrc
file
We can change the default directory where Bower puts the packages by creating a .bowerrc
file in our solution directory, and putting the following in it:
{ "directory" : "Web/Content" }
Save the file, remove the bower_components
folder and let’s install the package again.
Notice this time the package ended up where we told it to.
Bower is agnostic to Visual Studio, so it will not add the packages to your solution. You’ll need to select Show All Files in Solution Explorer, click on the angular
folder and select Include in Project.
The reality is, it took you much longer to read this post, than it will take you to do the tasks described.
This is the approach I’ve taken and it seems to be working well for us. Do you have a different workflow? Let me know if the comments.