Features Releases

PhpStorm gets Bower support

Bower.io support in PhpStormA good developer is a lazy developer, right? Thanks to PhpStorm and WebStorm sharing the IntelliJ IDEA platform, we had an easier job integrating support for Bower from our colleagues! Bower is a package manager for the web, which allows us to manage our project’s front-end dependencies such as Bootstrap, AngularJS, jQuery and many more. Let’s see how we can use it in PhpStorm!

To make use of Bower in our project, we have some first-time configuration steps to do:

  • Installing NodeJS and the NodeJS plugin
  • Install Bower

Installing NodeJS can be done by following the instructions on their website. We can enable the NodeJS plugin for PhpStorm through IDE Settings | Plugins, clicking the Install JetBrains Plugin… button and adding NodeJS to our IDE.

Next, we can install Bower by executing the npm install -g bower command or through Project Settings | Node.js and npm clicking Add. Search for bower and under options, enter –-g to install the package globally. The Install button will download and install Bower. After installation, Bower will appear in the list of installed node packages.

Install Bower

Project dependencies can be specified in the bower.json file. We can generate one from the Terminal tool window (Tools | Open Terminal…) running bower init. Alternatively, we can create the file manually and add { "name": "project-name-goes-here" } as the contents.

To add new dependencies, select Project Settings | JavaScript | Bower, and then click the + button to search and install packages, or to uninstall a package from our project.

Install Bower package

Of course, we can use the Terminal tool window to invoke the bower command line. For example, we can run bower install to install all dependencies specified in bower.json. Or we can simply bower list to see all dependencies we have defined.

Bower terminalwindow

Give the latest PhpStorm 8 EAP a try and let us hear your thoughts! All feedback is welcome through the issue tracker, by posting in the comments below, or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

image description