November 09, 2016 by Anuraj
Once you install Node, you can install bower using npm.
You also need to install Git, it is required for bower to download packages from github. Specifically, you will need to install msysgit and select the “Run Git from the Windows Command Prompt” option.(If you’re using Windows.)
To use bower in your project, you need to create a bower.json file, this is the file that will contain a list of all the packages your application depends on. You can create bower.json file using
bower init command.
You can install packages to bower using
bower install command.
This will install JQuery to bower_components folder. It also modifies the bower.json file with JQuery as depedency.
You can install all the dependencies using
bower install command. You can control the install directory using
.bowerrc file. If you want to install the packages to a wwwroot/lib instead of bower_components directory, you can create a .bowerrc in the root directory and you can add following code.
While installing the dependencies, bower will read this file and install the packages to the specified directory.
You can directly add reference of script files from bower_components directory. But I don’t like this approach. I would like to reference the scripts and css from wwwroot folder instead of bower_components folder, you can create gulp tasks to do this. But I don’t want to use gulp, instead I would like to use a dotnet tool - dotnet bundle, which will helps to bundle and minify scripts and css files. You can install dotnet bundle tool in the project.json like this.
Now you bundleconfig.json file, which contains the configuration information about bundling and minification. Here is the bundleconfig.json file, which will copy the css and script files from bower_components folder and copy to wwwroot folder. It also bundles and minifies the scripts and styles.
You can run
dotnet bundle command as part of dotnet publish scripts or you can do it manually as well.
Now you can add reference of scripts and css from wwwroot folder in the _layout.cshtml file.
Happy Programming :)
Copyright © 2024 Anuraj. Blog content licensed under the Creative Commons CC BY 2.5 | Unless otherwise stated or granted, code samples licensed under the MIT license. This is a personal blog. The opinions expressed here represent my own and not those of my employer. Powered by Jekyll. Hosted with ❤ by GitHub