Bower is a package manager for the web. It allows you to manage dependencies for your web projects, ensuring that you have the right versions of libraries and frameworks. Bower can handle front-end packages like JavaScript libraries, CSS frameworks, and more.
Installing Packages
This command installs the jQuery library into your project. Bower will download the package and place it in the `bower_components` directory.
bower install jqueryListing Installed Packages
This command lists all the packages that are currently installed in your project. It provides a tree-like structure of dependencies.
bower listUpdating Packages
This command updates all the packages in your project to their latest versions, based on the versioning rules specified in your `bower.json` file.
bower updateUninstalling Packages
This command removes the jQuery library from your project. Bower will delete the package from the `bower_components` directory.
bower uninstall jqueryCreating a bower.json File
This command initializes a new `bower.json` file in your project. It will prompt you for information about your project and its dependencies.
bower initnpm (Node Package Manager) is a package manager for JavaScript, primarily used for managing Node.js packages. Unlike Bower, npm can handle both front-end and back-end packages, making it more versatile. npm also has a larger repository of packages compared to Bower.
Yarn is a package manager that doubles down as a project manager. It is an alternative to npm and offers faster performance, deterministic dependency resolution, and better security. Yarn can manage both front-end and back-end packages, similar to npm.
pnpm is a fast, disk space-efficient package manager. It uses a content-addressable file system to store all files from all module directories on a disk. When using pnpm, packages are linked from a single content-addressable storage, which saves a lot of space and makes installation faster.
Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and use any type of transport (e.g., AMD, CommonJS, etc.).
View all packages available through Bower's registry.
Bower depends on Node and npm. It's installed globally using npm:
npm install -g bower
Much more information is available via bower help once it's installed. This
is just enough to get you started.
Bower offers several ways to install packages:
# Using the dependencies listed in the current directory's bower.json
bower install
# Using a local or remote package
bower install <package>
# Using a specific Git-tagged version from a remote package
bower install <package>#<version>
Where <package> can be any one of the following:
jquery. ‡git://github.com/someone/some-package.git. Can be
public or private. ‡someone/some-package (defaults to GitHub). ‡zip and tar.gz files. It's contents will be
extracted.‡ These types of <package> make Git tags available. You can specify a
semver tag to fetch a specific release, and lock the
package to that version.
All package contents are installed in the components directory by default.
You should never directly modify the contents of this directory.
Using bower list will show all the packages that are installed locally.
N.B. If you aren't authoring a package that is intended to be consumed by others (e.g., you're building a web app), you should always check installed packages into source control.
To search for packages registered with Bower:
bower search [<name>]
Using just bower search will list all packages in the registry.
The easiest approach is to use Bower statically, just reference the package's
installed components manually using a script tag:
<script src="/bower_components/jquery/index.js"></script>
For more complex projects, you'll probably want to concatenate your scripts or use a module loader. Bower is just a package manager, but there are plenty of other tools -- such as Sprockets and RequireJS -- that will help you do this.
To register a new package, there must be a valid manifest JSON in the current working directory, your package must be available at a Git endpoint (e.g., GitHub), and it should use semver Git tags. Then run:
bower register <my-package-name> <git-endpoint>
The Bower registry does not have authentication or user management. It's on a
first come, first served basis. Think of it like a URL shortener. Now anyone
can run bower install <my-package-name>, and get your library installed.
There is no direct way to unregister a package yet. For now, you can request a package be unregistered.
To uninstall a locally installed package:
bower uninstall <package-name>
Bower can be configured using JSON in a .bowerrc file.
Global configuration is handled by creating a .bowerrc in your home directory
(i.e., ~/.bowerrc). Local configuration is handled by creating a .bowerrc
in your project's directory, allowing you to version a project-specific Bower
configuration with the rest of your code base.
Bower will combine the local and global configurations (with local settings taking precedence).
The .bowerrc defines several options:
directory: Set the default directory to install packaged components into.endpoint: Set a custom registry endpoint.json: Set the default JSON file for Bower to use when resolving dependencies.searchpath: An array of additional URLs pointing to read-only Bower registries.shorthand_resolver: Define a custom template for shorthand package names.{
"directory": "bower_components",
"endpoint": "https://bower.mycompany.com",
"json": "bower.json",
"searchpath": [
"https://bower.herokuapp.com"
],
"shorthand_resolver": "git://example.com/{{{ organization }}}/{{{ package }}}.git"
}
The searchpath array is useful if your organization wishes to maintain a
private registry of packages while also taking advantage of public Bower
registries. If a package is not found at your private endpoint, Bower will
consult the registries specified in the searchpath array.
The shorthand_resolver key provides support for defining a custom template
which Bower uses when constructing a URL for a given shorthand. For example, if
a shorthand of twitter/flight or twitter/flight#v1.0.0 is specified in the
package manifest, the following data can be referenced from within the
.bowerrc as part of the shorthand_resolver template:
endpoint: twitter/flightorganization: twitterpackage: flightN.B. To run your own Bower Endpoint for custom packages that are behind a firewall, you can use a simple implementation of the Bower Server.
You must create a JSON file -- bower.json by default -- in your project's
root, and specify all of its dependencies. This is similar to Node's
package.json, or Ruby's Gemfile, and is useful for locking down a project's
dependencies.
You can interactively create a bower.json with the following command:
bower init
The bower.json defines several options:
name (required): The name of your package.version: A semantic version number (see semver).main [string|array]: The primary endpoints of your package.ignore [array]: An array of paths not needed in production that you want
Bower to ignore when installing your package.dependencies [hash]: Packages your package depends upon in production.devDependencies [hash]: Development dependencies.{
"name": "my-project",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<name>": "<version>",
"<name>": "<folder>",
"<name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Bower also makes available a source mapping. This can be used by build tools to easily consume Bower packages.
If you pass the --map option to Bower's list command, it will generate JSON
with dependency objects. Alternatively, you can pass the --paths option to
the list command to get a simple path-to-name mapping:
{
"backbone": "bower_components/backbone/index.js",
"jquery": "bower_components/jquery/index.js",
"underscore": "bower_components/underscore/index.js"
}
Bower provides a powerful, programmatic API. All commands can be accessed
through the bower.commands object.
var bower = require('bower');
bower.commands
.install(paths, options)
.on('end', function (data) {
data && console.log(data);
});
bower.commands
.search('jquery', {})
.on('packages', function(packages) {
// `packages` is a list of packages returned by searching for 'jquery'
});
Commands emit four types of events: data, end, result, and error.
error will only be emitted if something goes wrong. Not all commands emit all
events; for a detailed look, check out the code in lib/commands.
data is typically a colorized string, ready to show to an end user. search
and lookup emit packages and package, respectively. Those events contain
a JSON representation of the result of the command.
For a better of idea how this works, you may want to check out our bin file.
For the install command, there is an additional package event that is emitted
for each installed/uninstalled package.
Bower now has an experimental completion command that is based on, and works
similarly to the npm completion. It is
not available for Windows users.
This command will output a Bash / ZSH script to put into your ~/.bashrc,
~/.bash_profile, or ~/.zshrc file.
bower completion >> ~/.bash_profile
To use Bower on Windows, you must install msysgit correctly. Be sure to check the option shown below:
Note that if you use TortoiseGit and if Bower keeps asking for your SSH
password, you should add the following environment variable: GIT_SSH - C:\Program Files\TortoiseGit\bin\TortoisePlink.exe. Adjust the TortoisePlink
path if needed.
Have a question?
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.
Thanks for assistance and contributions:
Copyright 2012 Twitter, Inc.
Licensed under the MIT License
FAQs
The browser package manager
The npm package bower receives a total of 317,514 weekly downloads. As such, bower popularity was classified as popular.
We found that bower demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."