Modelon Solutions

Visual Studio is a great tool for programming windows applications. It is also a very good tool when creating web sites using the asp.net technology.

Lately, I find it has become a great tool for creating serverless (ajax based) web sites. It was always easy to create an empty web site, and just add html pages to it that would get served by IIS express when f5 was hit. The problem lies in the way we work… almost all web site development consists at a certain point to consume external libraries (i.e. bootstrap, angular, moment.js…). With Visual Studio, this is a workflow that is much easier now because of NuGet, which can download packages and integrate them into our projects.

People who do not use Visual Studio do not use Nuget, they use something else… one of the newer contestants and a very popular one is bower (www.bower.io). Is bower better than NuGet ? maybe, maybe not, to me it doesn’t matter. What matters is that some scripts that were developed outside of the Microsoft ecosystem are published via bower before they get published to NuGet, and this is the recipe to follow to get bower running with Visual Studio.

The first thing to do, in your web site project, is to add the “bower.js” NuGet package. That step will import the “node.js” package (basically an executable to run node things) and also “npm.js”, which is node.js’s preferred package manager. The project file for your web project will then be modified to include targets for npm and bower, which will, on every build, make sure that all of the packages installed (through npm or bower) are present. That was the complicated part 🙂

To install bower packages, just open NuGet’s Package Manager Console and type “bower” and that will bring up the help. Just make sure that you run bower while in the correct directory; to achieve this you will have to use “cd” and “pwd” to change the current directory, in my case “cd web.client”.

To search for packages, you can use “bower search angular”, and then to install a package “bower install angular –save”. You need the “–save” part to add the package’s name to the “bower.json” file for automatic restore of packages.

In my case, I did not check the files that get installed by the packages into tfs, as they get restored automatically on build. In order for restores to work, do not forget to check-in the “package.json” file for npm at the root of the solution. Also, after a restore, you’ll have to restart visual studio for bower to be available in the package manager console. I haven’t tested all of this yet through CI.

Using bower and NuGet, I now have to best of both worlds, I can add packages from bower to my web app at the speed that things change on the internet and use NuGet to grab things more adapted to Visual Studio (i.e. the typed packages  for Typescript) or anything else that powers my web api backend.