In the realm of modern web development, the reliance on third-party dependencies is ubiquitous, encompassing CSS libraries and preprocessors such as Bootstrap and Sass, JavaScript libraries like jQuery and Angular, and everything in between. It’s not uncommon for developers to be shocked by the sheer number of tools they’ve utilized in their web development endeavors. But how does one effectively manage and track these dependencies across various projects? Ensuring that project dependencies remain updated without disrupting older projects that may not be compatible with new releases is a challenge. Manually managing these dependencies can be a full-time job in itself.
Without the appropriate tool, managing multiple development projects that rely on third-party dependencies becomes a necessity. A package manager like Bower is an essential tool for such scenarios. This tutorial delves into the fundamentals of Bower, catering to front-end developers who are new to the tool but are familiar with command-line interfaces (CLIs). For those not comfortable with CLIs, Bower serves as an excellent entry point compared to diving directly into managing web servers/VPS through a CLI.
Bower is a versatile tool designed to facilitate the installation, updating, and management of all front-end development dependencies. A “dependency” in this context refers to an open-source project that is integral to your site’s construction, such as Bootstrap, jQuery, and Normalize.css. Bower is akin to npm but is specifically tailored for front-end developers (HTML, CSS, and JavaScript).
To install Bower, you’ll need Node, npm (which is included with Node), and Git. If you haven’t yet installed Node and npm, you may want to refer to our tutorial on installing Node.js. If Git is also not installed, our tutorial by Tobias Günther on How to Quickly Get Started with Git can be of assistance. Once Node, npm, and Git are set up, you can install Bower by executing the following command in your command prompt/terminal:
This command installs Bower globally, making it accessible from anywhere on your computer.
As an aside, the command is reminiscent of using Mozilla Firefox to download Google Chrome. Nonetheless, let’s proceed. Next, navigate to your project’s directory/folder. This is crucial, as the rest of the tutorial assumes you are already in your project’s directory. If you don’t have a project directory, simply create a folder on your computer and navigate to it.
Since this is likely your first time using Bower, it’s important to discuss the “bower help” command, which displays inline documentation and tips. Running “bower help” without any arguments will present you with a list of Bower commands. To learn about a specific Bower command, you can use the “bower help” command followed by the command name. For instance, to learn about the “bower prune” command, you would run:
Alternatively, you can type the command followed by the “-h” (or its shortcut, “/h”) option.
This method is useful when you’re in the midst of typing a Bower command and suddenly realize you’ve forgotten what it does or want to explore its options before executing it. The short version of the “-h” option is “:h,” as seen in the following example:
Bower command options often have shortened versions for ease of typing. For example, the “-h” option can also be written as “-h” and “/h” can be written as “/h”.
To find Bower packages you might want to install, use the “bower search” command followed by a keyword or the package’s name. For example, if you want to search for packages tagged with the keyword “responsive,” you would run:
Or, if you know the name of the project you want to install and want to check if it’s available as a Bower package, simply type its name. The package name is typically the project’s GitHub repository name.
For instance, to check if HTML5 Boilerplate has a Bower package, and knowing the project’s name is “html5-boilerplate,” you would type:
This command will return all the Bower packages that match the package name you’ve entered. If you prefer to use a web interface, you can visit Bower’s search page.
In the above example, you can see that Bower returned several results when we performed our “bower search” command.
For those who are unsure about which package to choose or wish to learn more about a particular package, use the “bower info” command followed by the package name. Let’s output some information on Bootstrap:
This command will display the contents of the package’s “bower.json” manifest file, which typically includes details such as the package’s official site, project description, license, keywords, other available version releases, etc.
Next, to include Bower packages in your project, use the “bower install” command followed by the package name. All installed packages will be placed in a folder called “bower_components” that will be automatically created in your project’s folder. Let’s install the jQuery package using this command:
This command will install the latest version of jQuery. By default, the “bower install” command will get the latest version of the package. However, if you want to use a different version, you can specify it.
For instance, if you want to use a not-yet-stable release candidate version or an older version compatible with an old project, you can specify the version number prefixed with a hash “=”. To see all available versions of a package, use the “bower info” command first. For example, using “bower info jQuery” revealed several available versions of jQuery. To install an older version, like version 1.11, you would use the following command:
Many developers use the same set of dependencies across multiple projects. Creating a template for these dependencies can greatly enhance efficiency and manageability. This can be achieved by creating a custom Bower package. This involves creating a “bower.json” manifest file in the root folder of your project. You can create this file manually using a text editor or source code editor, but using the command line with the “bower init” command is more convenient.
After running “bower init,” you will be prompted to fill out details about your Bower package, such as its name, version, and description. To include other packages in your custom Bower package, specify them as dependencies using the “bower install” command with the “-S” (or its shortcut, “–save”) option. For example, to set up a package that includes jQuery, Normalize.css, and HTML5shiv, you would run:
Note: For developer tools like code linters, CSS compressors, and unit tests — i.e., packages used only during development — use the “-D” (or its shortcut, “–save-dev”) option instead. This will include the package in your “devDependencies” as listed under the “devDependencies” JSON object in your manifest file. When you want to install your packages in another web development project, use the “bower install” command followed by the location of your custom Bower package.
If you wish to customize your packages for the new project, you can modify its “bower.json” file. For manual configuration or additional settings beyond what “bower init” creates, refer to Bower’s JSON specifications.
Other basic Bower commands that can be helpful include:
(To see all the Bower commands, visit Bower’s list of commands.)
For developers who have taken a break from a project and are returning to maintenance or redesign work, the “bower list” command can be particularly useful. It not only reminds you of the packages you used in the project but also checks for new versions of your packages. For example, running “bower list” may reveal that there are new versions of the packages you’re using.
It’s crucial to update third-party dependencies at the very least when security patches are released. Manually updating these across all your development projects is time-consuming, tedious, and prone to errors. With Bower, all you need to do is run the “bower update” command. To update a specific package, use the “bower update” command followed by the package name. For example, to update jQuery, you would run:
By default, the “bower update” command will update all outdated packages. To remove a package, use the “bower uninstall” command. To remove a package from your “dependencies” list, use the “bower uninstall” command with the “-D” (or its shortcut, “–dev”) option.
This tutorial has covered the basics of Bower, including installing Bower, displaying help documents for Bower commands and options, finding and obtaining information about Bower packages, installing Bower packages, creating your own Bower package, and other useful Bower commands for managing project dependencies (listing, updating, and uninstalling). In future tutorials, we will explore intermediate and advanced Bower features, such as customizing Bower configuration and Bower’s Programmatic API.
For further reading on web development topics, check out these resources:
Speed Up Your Web Development Workflow with Grunt
Why You Should Use Git
Why I Ditched Angular for React
