This is the third article in my series of 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 mvc makes use of the following JavaScript libraries:-

Recall, from my previous article on adding the files to Git that 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.json to 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_components folder. But, in ASP .NET Core these static files should go inside wwwroot/lib so that they are publicly available. So, we need to create a .bowerrc file 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’s website 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 node and npm will 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 install to see if the JavaScript libraries we deleted from wwwroot/lib can 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/lib folder, you should see the bootstrap, jquery, jquery-validation and jquery-validation-unobtrusive packages again.

Let’s commit the two files bower.json and .bowerrc now with a message like Added Bower.

No votes yet.
Please wait...