Adding Bower to ASP .NET Project – Visual Studio Code

Partho Sarathi

03 Mar, 2018 · 4 minutes read

This is the third article in my seriesof using Visual Studio Code to create ASP .NET MVC Projects. Here we will be adding support for bower packages.

The default code generated by dotnet new mvcmakes use of the following JavaScript libraries:-

Recall, from my previous article on adding the files to Gitthat I ignored these files via .gitignore. But, when you run your application in production by compiling the source, packaging it and deploying it, these files will be missing as they were not committed to Git. Instead, these must be downloaded from the Bower repository.

So, let us add a bower.jsonto the root first.

{
  "name": "hello-world-project",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  }
}

Normally bower installs the packages to bower_componentsfolder. But, in ASP .NET Core these static files should go inside wwwroot/libso that they are publicly available. So, we need to create a .bowerrcfile in the root with the following content:-

{
  "directory": "wwwroot/lib"
}

Let us test out now that bower is able to install these pacakages we declared as dependencies for our project.

So, first delete all files & folders under wwwroot/lib. Now, go to the terminal Ctrl+ `and do a bower install.

bower : The term 'bower' is not recognized as the name of a cmdlet, function, script file, or operable program.

This is because we don’t have bower installed on this virgin Virtual Machine (VVM, that sounds like a genre for something).

Trying to install bower using npm would fail as well because we don’t have NodeJS installed. Should I have mentioned this in the pre-requisites category? Nah, sometimes I like things to fail so that you get a deeper understanding of the inner workings.

So, why do we need bower? Because we are building an ASP .NET application which will have some frontend JavaScript libraries. Bower is a repository/package manager for frontend JavaScript libraries. Bower itself is written in NodeJS so we need that too.

This is key here. We have chosen ASP .NET Core for building our Web Application, yet we need the alternative to it – NodeJS (which by the way we are not going to use to run our web application). I hope the dependency is clear.

So, head over to NodeJS’swebsite and download the latest stable version. Once you have installed it, restart VS Code because even though NodeJS has been installed and added to the path, the commands nodeand npmwill not be available to you until you reload VSCode.

Again go back to the VSCode terminal and try executing npm -v. This time your command should succeed and you should get an output such as 5.6.0, depending upon your version of node.

Install bower globally using npm install -g bower. You will get an output such as this:-

npm WARN deprecated bower@1.8.2: ...psst! Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
C:\Users\Administrator\AppData\Roaming\npm\bower -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\bower\bin\bower
+ bower@1.8.2
added 1 package in 12.109s

Now do a bower installto see if the JavaScript libraries we deleted from wwwroot/libcan now be installed by bower.

You will get an output like this.

PS C:\Users\Administrator\hello-world-project> bower install
bower jquery-validation-unobtrusive#3.2.6           cached https://github.com/aspnet/jquery-validation-unobtrusive.git#3.2.6
bower jquery-validation-unobtrusive#3.2.6         validate 3.2.6 against https://github.com/aspnet/jquery-validation-unobtrusive.git#3.2.6
bower bootstrap#3.3.7                               cached https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#3.3.7                             validate 3.3.7 against https://github.com/twbs/bootstrap.git#3.3.7
bower jquery#2.2.0                                  cached https://github.com/jquery/jquery-dist.git#2.2.0
bower jquery#2.2.0                                validate 2.2.0 against https://github.com/jquery/jquery-dist.git#2.2.0
bower jquery-validation#1.14.0                      cached https://github.com/jzaefferer/jquery-validation.git#1.14.0
bower jquery-validation#1.14.0                    validate 1.14.0 against https://github.com/jzaefferer/jquery-validation.git#1.14.0
bower jquery-validation#1.14.0                     install jquery-validation#1.14.0
bower jquery-validation-unobtrusive#3.2.6          install jquery-validation-unobtrusive#3.2.6
bower bootstrap#3.3.7                              install bootstrap#3.3.7
bower jquery#2.2.0                                 install jquery#2.2.0

jquery-validation#1.14.0 wwwroot\lib\jquery-validation
??? jquery#2.2.0

jquery-validation-unobtrusive#3.2.6 wwwroot\lib\jquery-validation-unobtrusive
??? jquery#2.2.0
??? jquery-validation#1.14.0

bootstrap#3.3.7 wwwroot\lib\bootstrap
??? jquery#2.2.0

jquery#2.2.0 wwwroot\lib\jquery

If you go back to the wwwroot/libfolder, you should see the bootstrap, jquery, jquery-validationand jquery-validation-unobtrusivepackages again.

Let’s commit the two files bower.jsonand .bowerrcnow with a message like Added Bower.

Visual Studio Code