Manage Client-Side Packages with Bower

By Noel Rice, Scott Addie

Bower is a “package manager for the web.” Bower lets you install and restore client-side packages, including JavaScript and CSS libraries. For example, with Bower you can install CSS files, fonts, client frameworks, and JavaScript libraries from external sources. Bower resolves dependencies and will automatically download and install all the packages you need. For example, if you configure Bower to load the Bootstrap package, the necessary jQuery package will automatically come along for the ride. For server-side libraries like the MVC 6 framework, you will still use NuGet Package Manager.

Note

Visual Studio developers are already familiar with NuGet, so why not use NuGet instead of Bower? Mainly because Bower already has a rich ecosystem with over 34,000 packages in play; and, it integrates well with the Gulp and Grunt task runners.

Getting Started with Bower

The ASP.NET 5 Starter Web MVC project pre-constructs the client build process for you. The ubiquitous jQuery and Bootstrap packages are installed, and the plumbing for NPM, Gulp, and Bower is already in place. The screenshot below depicts the initial project in Solution Explorer. It’s important to enable the “Show All Files” option, as the bower.json file is hidden by default.

../_images/mvc-project.png

Client-side packages are listed in the bower.json file. The ASP.NET 5 Starter Web project pre-configures bower.json with jQuery, jQuery validation, and Bootstrap.

Let’s add support for photo albums by installing the Fotorama jQuery plugin. Bower packages can be installed either via the Manage Bower Packages UI or manually in the bower.json file.

Installation via Manage Bower Packages UI

  1. Right-click the project name in Solution Explorer, and select the “Manage Bower Packages” menu option.

  2. In the window that appears, click the “Browse” tab, and filter the packages list by typing “fotorama” into the search box:

    ../_images/manage-bower-packages.png
  3. Confirm that the “Save changes to bower.json” checkbox is checked, select the desired version from the drop-down list, and click the Install button.

  4. Across the bottom status bar of the IDE, an Installing “fotorama” complete message appears to indicate a successful installation.

Manual Installation in bower.json

  1. At the end of the dependencies section in bower.json, add a comma and type “fotorama”. Notice as you type that you get IntelliSense with a list of available packages. Select “fotorama” from the list.

    ../_images/add-package.png
  2. Add a colon and then select the latest stable version of the package from the drop-down list. The double quotes will be added automatically.

    ../_images/version-intellisense.png
  3. Save the bower.json file.

    Note

    Visual Studio watches the bower.json file for changes. Upon saving, the bower install command is executed. See the Output window’s “Bower/npm” view for the exact command which was executed.

Now that the installation step has been completed, expand the twisty to the left of bower.json, and locate the .bowerrc file. Open it, and notice that the directory property is set to “wwwroot/lib”. This setting indicates the location at which Bower will install the package assets.

{
        "directory": "wwwroot/lib"
}

In Solution Explorer, expand the wwwroot node. The lib directory should now contain all of the packages, including the fotorama package.

../_images/package-lib.png

Next, let’s add an HTML page to the project. In Solution Explorer, right-click wwwroot node and select Add > New Item > HTML Page. Name the page Index.html. Replace the contents of the file with the following:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>Bower and Fotorama</title>
        <link href="lib/fotorama/fotorama.css" rel="stylesheet" />
</head>
<body>
        <div class="fotorama" data-nav="thumbs">
                <img src="images/asp-net-banners-01.png" />
                <img src="images/asp-net-banners-02.png" />
                <img src="images/banner-01-azure.png" />
                <img src="images/banner-02-vs.png" />
        </div>
        <script src="lib/jquery/dist/jquery.js"></script>
        <script src="lib/fotorama/fotorama.js"></script>
</body>
</html>

This example uses images currently available inside wwwroot/images, but you can add any images on hand.

Press Ctrl+Shift+W to display the page in the browser. The control displays the images and allows navigation by clicking the thumbnail list below the main image. This quick test shows that Bower installed the correct packages and dependencies.

../_images/photo-gallery.png

Exploring the Client Build Process

The ASP.NET 5 Starter Web project has everything you need for Bower already setup. This next walkthrough starts with the Empty project template and adds each piece manually, so you can get a feel for how Bower is used in a project. See what happens to the project structure and the runtime output as each configuration change is made to the project.

The general steps to use the client-side build process with Bower are:

  • Define and download packages used in your project.
  • Reference packages from your web pages.

Define Packages

The first step is to define the packages your application needs and to download them. This example uses Bower to load jQuery and Bootstrap in the desired location.

  1. In Visual Studio 2015, create a new ASP.NET Web Application.

  2. In the New ASP.NET Project dialog, select the ASP.NET 5 Empty project template and click OK.

  3. In Solution Explorer, the src directory includes a project.json file, and wwwroot and Dependencies nodes. The project directory will look like the screenshot below.

    ../_images/empty-project.png
  4. In Solution Explorer, right-click the project, and add the following item:

    • Bower Configuration File – bower.json

    Note

    The Bower Configuration File item template also adds a .bowerrc file.

  5. Open bower.json, and add jquery and bootstrap to the dependencies section. As an alternative to the manual file editing, the “Manage Bower Packages” UI may be used. The resulting bower.json file should look like the example here. The versions will change over time, so use the latest stable build version from the drop-down list.

    {
            "name": "ASP.NET",
            "private": true,
            "dependencies": {
                    "jquery": "2.1.4",
                    "bootstrap": "3.3.5"
            }
    }
    
  6. Save the bower.json file.

The project should now include bootstrap and jQuery directories in two locations: Dependencies/Bower and wwwroot/lib. It’s the .bowerrc file which instructed Bower to install the assets within wwwroot/lib.

../_images/bower-dependencies.png

Reference Packages

Now that Bower has copied the client support packages needed by the application, you can test that an HTML page can use the deployed jQuery and Bootstrap functionality.

  1. Right-click wwwroot and select Add > New Item > HTML Page. Name the page Index.html.
  2. Add the CSS and JavaScript references.
    • In Solution Explorer, expand wwwroot/lib/bootstrap and locate bootstrap.css. Drag this file into the head element of the HTML page.
    • Drag jquery.js and bootstrap.js to the end of the body element.

Make sure bootstrap.js follows jquery.js, so that jQuery is loaded first.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>Bower Example</title>
        <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>

        <script src="lib/jquery/dist/jquery.js"></script>
        <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Use the Installed Packages

Add jQuery and Bootstrap components to the page to verify that the web application is configured correctly.

  1. Inside the body tag, above the script references, add a div element with the Bootstrap jumbotron class and an anchor tag.

    <div class="jumbotron">
            <h1>Using the jumbotron style</h1>
            <p><a class="btn btn-primary btn-lg" role="button">
               Stateful button</a></p>
    </div>
    
  2. Add the following code after the jQuery and Bootstrap script references.

    <script>
            $(".btn").click(function() {
                    $(this).text('loading')
                            .delay(1000)
                            .queue(function () {
                                    $(this).text('reset');
                                    $(this).dequeue();
                            });
            });
    </script>
    
  3. Within the Configure method of the Startup.cs file, add a call to the UseStaticFiles extension method. This middleware adds files, found within the web root, to the request pipeline. This line of code will look as follows:

    app.UseStaticFiles();
    

    Note

    Be sure to install the Microsoft.AspNet.StaticFiles NuGet package. Without it, the UseStaticFiles extension method will not resolve.

  4. With the Index.html file opened, press Ctrl+Shift+W to view the page in the browser. Verify that the jumbotron styling is applied, the jQuery code responds when the button is clicked, and that the Bootstrap button changes state.

    ../_images/jumbotron1.png