Installing and Maintaining Bower Packages

Bower* is a package manager for HTML5, JavaScript and CSS libraries and frameworks. The Projects tab lets you discover and select packages from external sources that the Intel XDK fetches and installs in your local project directory. Bower resolves the dependencies of the project packages and the Intel XDK automatically installs those packages that a selected package depends on. To keep track of your project dependencies, Bower uses the manifest file: bower.json. You can configure project dependencies as production dependencies or development dependencies.

Why Use the Bower Packages Explorer?

Using the GUI provided by the Bower Packages Explorer in the Projects tab helps you minimize the manual work needed to use Bower. Whether you already do or do not use Bower, you can use the Bower Packages Explorer to maintain the Bower manifest file bower.json. This helps you:

  • Find and select packages from the central location of the Projects tab (instead of search the internet). The Intel XDK installs selected packages in your project directory.
  • Choose a version for a selected package from the available versions.
  • Download the selected packages to your local Intel XDK project directory and add their entries into your bower.json file.
  • Simply dependency package management, including automatically adding packages that a selected package depends upon. The packages automatically included are also checked for dependencies and automatically included if needed.
  • Simplify future maintenance of the Bower manifest file bower.json, including identifying new available versions and associated dependencies.
  • Greatly simplify manual tracking the packages, their dependencies, and their versions for your app.
  • Use the Intel XDK built-in code editor (Develop tab) to view and modify the bower.json file directly.

Of these, the item that can save significant time is the ability to identify dependencies amongst packages and automatically include dependent packages and packages that depend on them, especially when multiple users contribute to a project. This feature can minimize problems that you otherwise only find when you perform an Intel XDK cloud-based build of your app.

Exploring and Adding Bower Packages

To begin exploring packages to add to this project, in the Projects tab, open Bower Managed Libraries below Project Info. Bower packages you already installed are listed below Add Bower Packages.

Intel XDK Projects tab, Bower packages explorer

To explore and add packages to the list of Bower packages, click Add Bower Packages to use the Bower Packages Explorer:

Exploring Bower packages

1 Choose a category to Browse, such as the Top Packages category, Bower Registry category, or items that match certain Keywords.
2 View the list of packages. In the screen above, the list is filtered to only show package names that match the search string. Packages already installed for this project are indicated by a blue check icon next to their name.
3 To filter the displayed results for a category or certain Keyword, type a partial string of the starting characters. To disable the filter and display all results, click the X to the right of the search field. For example, the filter above shows packages whose names start with the string boot.
4 To close the Bower Packages Explorer, click the X in the upper-left.

The Intel XDK maintains the list of packages installed for this project as well as associated version and dependency information in the standard bower.json file. Packages you install are located in the www/bower_components directory for your project.

Note: Except for packages with a prefix intel, all packages listed are maintained and supported by third-party organizations that may or may not have an affiliation with Intel Corporation. It is important that you read and understand each package's documentation and license terms and restrictions before you include it as a part of your project. The Intel XDK team can only provide limited basic support for third-party packages; advanced support must be obtained directly from the third-party package authors.
Intel Corporation cannot guarantee the reliability or usability of third-party packages and has no authority over their license terms and restrictions.

Select a Package and View/Modify Its Details

From the displayed scrollable list, select a package to view its details. For example, if you select the bootstrap package, the following appears:

1 Click the page icon to view the documentation for this package in a browser.
2 View the current version number. Click the drop-down list to view available versions and choose a different one.
3 View the keywords and dependencies for this package. In this case, bootstrap is dependent on the jquery 1.9.1 package.
4 Choose whether this package will either be included as a required package in a production build (top line) or will be excluded from builds and only used for development tasks (bottom line).

Installing a Selected Package

For a new package you selected, view its details, such as available versions and dependency configuration. Click Install (or OK if modified) in the lower-right to complete the changes and install the package.

After you install (or update) a selected package, either Continue browsing to install or update other packages, or click OK to close the Bower Packages Explorer:

Adding and Checking Source References to Selected Installed Packages

The Bower Package Manager does not modify your source files to include the new installed packages, new versions, or removed packages. So after you add, modify, or remove packages, you need to:

  • Check your index.html file to include the references to new scripts and css files after you install a new package.
  • Remove the associated current references after you remove (uninstall) a package.
  • Check whether you should also update references to it after you update the version of a package. For example, when upgrading or downgrading versions, or if the location of the script file changes.

The Bower Package Manager stores the installed Bower packages in the www/bower_components directory for your project. For example, if you install the angular package, add the following code near the end of the index.html file (usually located in the www (source root) directory):

<script src="bower_components/angular/angular.js"></script>

For each package you install, please check the documentation (page icon) to understand the .js or .css files you need to reference. For example, you might need to reference the selected package itself as well as dependencies packages for that selected package. In the Develop tab, you can use the built-in code editor file tree view to locate the path to the files you need to reference.

Maintaining Your Bower Packages

As you install, modify, or remove packages for the active project, the Bower Packages Explorer updates the project Bower manifest file bower.json. When you need to update or enhance your app, you should check whether newer versions of your installed bower packages need to be updated and determine whether

Viewing Packages and Their Details

The installed packages are listed in three categories:

Viewing installed Bower packages and their categories

  • Production - Lists packages required for production builds. In the bower.json file, these packages are defined in the "Dependencies" section.
  • Development - Lists packages used only for development tasks. In the bower.json file, these packages are defined in the "devDependencies" section.
  • Package Dependencies - Lists packages that are dependencies of the listed Production and/or Development packages. These packages are not tracked as Production or Development packages. That is, in the bower.json file, these packages are not listed in the "Dependencies" section or the "devDependencies" section. To hide dependencies, click the button to the NO position.

To view details about an installed package, click the down arrow to the left of its name. Once you expand a package, you can view its documentation, change its version number, change its dependency type, and view its dependencies (packages that are automatically installed along with this selected package).

Modifying Versions and Dependency Types

While viewing details of an installed package (click the down arrow ), notice you can Get documentation and Change version or dependency type:

Viewing details for an installed Bower package

To change the version number and/or its dependency type for an installed package, click the button to show this dialog:

  1. Use the drop-down list to view the available versions and decide whether to change the current version number. For example, you may want to upgrade to a more recent version or downgrade to a previous version.
  2. View the currently selected dependency type and decide whether to change it.
  3. Click OK to complete the changes for this installed package.

Removing a Package

If you decide you no longer need a bower package, click the button to the right of the package name.

When a package is a dependency of another package (another plugin requires this package), the locked icon appears instead of a button. You cannot delete a package identified by the locked icon unless you first remove the package(s) that require the package. To determine which package(s) depend on a locked package, expand the locked package to view its details. For example, the bootstrap package (and perhaps others) depend on the jquery package; so if you want to remove the jquery plugin you must first remove the bootstrap plugin that requires it.

A locked package can be required by more than one package. All of the packages that require that locked package will be displayed in the locked package's expanded details.

After you modify or remove an installed package, remember to check the script references in your index.html file.

Bower Integration in the Built-in Code Editor

You can manually edit the bower.json file to manage your project package. In the Develop tab, the built-in code editor provides a file tree view. From this project file tree, select the bower.json file to open it in the code editor.

Bower integration with the Develop tab built-in code editor

At the bottom of the code editor, the status bar contains a drop-down button and bower dependencies status. While editing the bower.json file, you can use the drop-down list (shown above) to choose one of several quick options:

  • A shortcut to open the Bower Packages Explorer GUI in the Projects tab.
  • Synchronize packages
  • Install or update all the packages that are not currently installed but are defined in the bower.json file.
  • Remove (prune) all the packages that are installed but that are not currently defined in the bower.json file.


For more complete information about compiler optimizations, see our Optimization Notice.