Bower

Bower is a package manager for client-side libraries and components that contain HTML, CSS, JavaScript, fonts, image files, and so on. You can install, locate, upgrade, and remove Bower packages without leaving PhpStorm, on the dedicated Bower page or from the command line in the built-in Terminal.

Before you start

Download and install Node.js.
Make sure a local Node.js interpreter is configured in your project: open the Settings/Preferences dialog Ctrl+Alt+S and go to Languages and Frameworks | Node.js and NPM. The Node Interpreter field shows the default project Node.js interpreter.
Learn more from Configuring a local Node.js interpreter.

Installing and configuring Bower

Install Bower

In the embedded Terminal (Alt+F12) , type:
npm install -g bower

Create bower.json

In the embedded Terminal (Alt+F12) , type:
cd <your project folder> bower init
Answer the questions to specify the following basic settings:
- The testing framework to use.
- The browsers to be captured automatically.
- The patterns that define the location of test files to be involved in testing or excluded from it.

Learn more from the Bower official website.

Configure Bower in PhpStorm

In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Bower. The Bower page opens.
Specify the location of the Bower package and the bower.json configuration file.

Managing Bower packages

Bower installs packages only as project dependencies or development dependencies, learn more from the Bower official website. You can manage Bower packages on the Bower page or in the Terminal tool window.

Install packages in the Terminal

In the embedded Terminal (Alt+F12) , type one of the following commands:
- bower install --save <package_name> to install the package as a project dependency.
- bower install --save-dev <package_name> to install the package as a development dependency.

Handle packages on the Bower page

In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Bower.
On the Bower page that opens, the Packages area shows all the Bower packages that are currently installed in your project.
- To install a package, click , and in the Available Packages dialog that opens, select the required package and click Install Package.
  - By default, packages are installed as project dependencies. To install a package as a development dependency, select the Options checkbox and type --save-dev.
  - By default, Bower installs the latest version. Toget another one, select the Version checkbox and specify the required version.
- To upgrade to the latest version of a package, select it in the list and click .
- To uninstall a package, select it in the list and click .

Last modified: 13 October 2021